There are many factors that can affect the SEO quality of a blog and website. One of these factors is the quality of the articles that are shared with the search engines.

The better the quality of the article, the greater the chance of getting higher rankings in the search results. But what are the characteristics of a good essay?

Adding a Table of Contents is part of our SEO tips to make blog posts user friendly.

In the beginning, if you want to use a table of contents for WordPress

Table of Contents is an important thing in blogger topics, and it is useful as a bookmark for a specific page or discussion. Just imagine that if a book does not contain a table of contents, then it is very difficult for the reader to find a specific topic that he wants to read.

You can add a table of contents in very long web articles, with the aim of making it easier for Internet users to read, and if your blog topics are easy to read by Internet users, this will be beneficial for the website.

What is the table of contents?

The table of contents is an add-on that appears above the topics on the Internet and is considered as an index of the topic, as it displays the topic headings arranged automatically, and if you click on any title, it will be directed to it within the topic.

What are the benefits of a table of contents?

• The table of contents makes it easy for readers to find the gist of the article.
• Moreover, this table of contents can do your search engine optimization.
• For example, Wikipedia likes to add an automatic table of contents for each published article, because it attracts readers more by providing greater accessibility and better navigation.
• Adding a Table of Contents in Blogger will allow readers to navigate to important parts of a blog post, readers will find it easier to understand the content.

Table of contents features

1. The table of contents is characterized by the fact that it supports a set of professional features, which are:
2. The ability to easily show and hide the tool through a simple button
3. The table of content provides smooth navigation when navigating to the called up address
4. Showing an animated arrow next to the address that was directed to alert the user to it directly
5. The ability to control the distance between the heading address and the top of a page (useful in the case of a fixed page header)
6. Responsive night mode

Stages of installing the table of contents

Go to theme on the blogger platform, click edit html

Copy the CSS code and place it just above

Copy the JavaScript code and place it just above the closing tag

.mhtoc *{box-sizing: border-box;}.mhtoc .mtochead,.mhtoc .mtoclist{display:flex;padding:8px 10px}.mhtoc .mtoclist ul,.mhtoc .mtoclist ul li{padding:0;margin:0;background-color:transparent}@font-face{font-family:toc-font;src:url('https://cdn.jsdelivr.net/gh/hamianemohssine/7amian/font-icons/tableofcontenticons.woff2')}.mhtoc{display:block;width:100%;height:auto;text-align:right;direction:rtl;overflow:hidden;border-radius:3px;user-select:none;background-color:#cccccc20;border:1px solid #aaaaaa60;margin:0 0 10px}.mhtoc .mtochead{flex-direction:row;justify-content:space-between;align-items:center;width:100%;border-bottom:1px solid #aaaaaa60;cursor:pointer}.mhtoc .mtochead:after{content:"Hide";transition:transform .3s ease-out;padding:0 10px;border:1px solid #aaaaaa50;border-radius:3px}.mhtoc .mtocon{border:none}.mhtoc .mtocon:after{content:"Show"}.mhtoc .mtoctitle{display:flex;flex-direction:row;align-items:center;column-gap:6px;line-height:0}.mhtoc .mtoctitle:before{content:"\f0cb";font-family:toc-font}.mhtoc .mtoclist ul{counter-reset:section;list-style-type:none}.mhtoc .mtoclist ul li{list-style:none;line-height:1.8}.mhtoc .mtoclist ul li:before{counter-increment:section;content:counters(section, ".") ".";margin:0 0 0 5px}.mhtoc .mtoclist ul li>ul{margin:0 30px 0 0}.mhtoc .mtoclist a{text-decoration:none;color:inherit}@keyframes ichara{0%,100%{transform:translateY(0) scaleX(1)}25%{transform:translateY(10px) scaleX(.5)}50%{transform:translateY(-10px) scaleX(1)}}.tocmatch:after{display:inline-block;content:"\e800";font-family:toc-font;animation:.5s linear infinite ichara;margin:0 10px}

JavaScript Codes Table of Contents.

Before saving the theme, do not modify the JavaScript variables indicated in the description to your convenience .

It is not possible to modify the aforementioned variables to suit you.

<script>//<![CDATA[!function(){	var TocMarginTop = 75;	var TocSpeed = 800;	var TocHidden = false;	var Tocheader = "h1,h2,h3,h4";    var headersDiv = ".post-body";$("#Blog1 "+ headersDiv).each(function(){var t=$("<div class='mhtoc'><div class='mtochead'><div class='mtoctitle'>Table Of Contents</div></div><div class='mtoclist'></div></div>"),a=$(this),i=a.find(Tocheader);if(i.length){var d=$("<ul></ul>");for(let e=0;e<i.length;e++){var l=i[e];d.append("<li data-head='"+$(l).prop("tagName").substring(1,2)+"' ><a href='#xxtoc"+e+"'>"+$(l).text()+"</a></li>"),$(l).attr("id","xxtoc"+e)}var n=d.find("li");for(let o=0;o<n.length-1;o++){var s=n.eq(o),c=n.eq(o+1);if(s.data("head")<c.data("head")){s.append("<ul class='inside'></ul>");for(var f=o+1;f<n.length;f++){var h=n.eq(f);s.data("head")<h.data("head")&&s.find("ul").append($(h))}}}t.find(".mtoclist").append(d),t.find(".mtochead").click(function(){var a=$(this);t.find(".mtoclist").slideToggle(300,"swing",function(){a.toggleClass("mtocon")})}),t.find(".mtoclist a").each(function(){var t=$(this);t.click(function(a){a.preventDefault();var i=$(t.attr("href")),d=i.offset().top;$("html,body").animate({scrollTop:d-TocMarginTop},TocSpeed,"swing"),i.addClass("tocmatch"),setTimeout(function(){i.removeClass("tocmatch")},4e3)})}),t.find(".mtoclist ul li"),TocHidden&&(t.find(".mtoclist").css("display","none"),t.find(".mtochead").addClass("mtocon")),a.prepend(t)}});}()//]]></script>

• TocMarginTop = 75;
• var TocSpeed = 800;
• var TocHidden = false;
• var Tocheader = “h1,h2,h3,h4”;
• var headersDiv = “.post-body”;

The variable TocMarginTop allows you to specify the distance that should be left when heading to any address, and here we mean the distance between the address and the apparent page header, and it is useful in the case of a static header on the site, where you can specify the value of the variable with the value of the Hieght Header height to avoid the appearance of the header above the address that was headed mechanism.

The TocSpeed ​​variable indicates the time it takes to go to any address, and you can specify its value in milliseconds.

The TocHidden variable if true allows you to hide headings in the TOC until the Show button is pressed.

The TocHeader variable defines the header tags that will be targeted for fetching from within the content. You can add more, but put commas between them.

The variable headersDiv refers to the element that contains the content of the topic, where Class or Id must be added to this element in the value of this variable. In the case of class, we put a dot before it. In the case of Id, we put a # before it.