What is Table of Content?
The Table of Content , shortly known as TOC , is list of links to the section of the web Page to get easy navigation throughout the page .It basically fetch all the heading of that page give brief navigation to their sections.
Does TOC help in SEO?
Yess, It does.From an SEO standpoint, having a table of contents means you have a bullet list with relevant keywords just on top of the page. Lists are considered more relevant for Google than regular paragraphs, so the bots will take those elements into account in indexing your content.
What are the advantages of using Table of Contents?
Table of Contents permits us to arrange all the headings and subheadings tags
from your blog-post automatically without manually characterizing the heading
tags and makes it into a pleasant table for your audience to navigate.
Whenever you visit Wikipedia, you find TOC on each and every article you read,
right! Doesn't it make us simple to explore the article and hop directly into
that specific passage or point?
Obviously, it does, and its because Wikipedia automatically selects the
heading labels and prepares Table of Contents out of it.
Therefore, a well-planned Table of Content can adversely help in:
- Giving a professional look to your post or article.
- Arranging points of your post or article in a systematic way.
- Managing your audience's expectations, since it provides a high-level view of your posts or article.
- Providing a roadmap for your audience to easily navigate your whole post or article.
- Improve User Experience .Let users to go to the section they need to read without consuming time to read whole article.
How to Install TOC in Website
Installation of TOC is very simple .You just have to add some some javascript and CSS for this .
Installing Css of TOC
- Open you Blogger Dashboard .Go to Theme section , then click on Edit Html .Now search for </b:skin> and Place this Css code just above it .
/* Table of Content v2.0 by K K UPGRADER */
.tocify-wrap{display:flex;width:100%;clear:both;margin:0}
.tocify-inner{position:relative;max-width:100%;background-color:rgba(155,155,155,0.05);display:flex;flex-direction:column;overflow:hidden;font-size:14px;color:#2F353B;line-height:1.6em;border:1px solid rgba(155,155,155,0.1);border-radius:5px}
a.tocify-title{position:relative;height:38px;font-size:16px;color:#1a72c9;font-weight:600;display:flex;align-items:center;justify-content:space-between;padding:0 15px;margin:0;border-radius:5px}
a.tocify-title.is-expanded{transition:all 1s ease;border-bottom:1px solid rgba(155,155,155,0.1);border-radius:5px 5px 0 0}
.tocify-title-text{display:flex}
.tocify-title-text:before{content:"\f0cb";font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";font-size:14px;font-weight:900;margin:0 6px 0 0}
.rtl .tocify-title-text:after{margin:0 0 0 6px}
.tocify-title:after{content:"\f078";font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";font-size:12px;font-weight:900;margin:0 0 0 25px;-webkit-transform:rotate(0deg);
transform: rotate(0deg);}
.rtl .tocify-title:after{margin:0 25px 0 0}
.tocify-title.is-expanded:after{-webkit-transform:rotate(180deg);
transform: rotate(180deg);}
a.tocify-title:hover{text-decoration:none}
#tocify{display:none;padding:8px 15px;margin:0;}
#tocify ol{padding:0 0 0 15px}
#tocify ol > li{counter-increment:ify;list-style:none}
#tocify ol > li:before{display:inline-block;content:counters(ify,'.')'.';margin:0 5px 0 0}
#tocify li{font-size:14px;margin:7px 0}
#tocify li a{color:#0049ce}
#tocify li a:hover{color:#0049ce;text-decoration:underline! important}
Installing Javascript of TOC
- Now , Copy the below Javascript and Paste just above </head> .
<script async='async' src='https://cdn.jsdelivr.net/gh/KKUPGRADER/blogger@js/table-of-content.js'/>
- Also Install Fontawesome Pro if not installed in your Blog.
<link href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" />Placing TOC
- If you want to Automatic add in every article just above the post, then , Search for <data:post.body/> and place below code just above it .(There may be multiple <data:post.body/> place before each.Or if you want to place in custom place then just copy this code place anywhere in your post in HTMl Editor mode.
<div id='toc'/>Activation of TOC
- Search for<data:post.body/> and replace it with This below Code .
<div class='post-body' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"' id='post-body'>
<data:post.body/>
</div><script>/*<![CDATA[*/
$("<div class='tocify-wrap'><div class='tocify-inner'> <a class='tocify-title' href='javascript:;' role='button' title='Table of Content'><span class='tocify-title-text'>Table of Content</span></a> <div id='tocify'/></div></div>").appendTo("#toc");
document.addEventListener('DOMContentLoaded', () => new TableOfContents({from: document.querySelector('.post-body'), to: document.querySelector('#tocify')}).generateToc() );
$(".tocify-title").each(function(e) {
(e = $(this)).on("click", function() {
e.toggleClass("is-expanded"), $("#tocify").slideToggle(170);
});
});
/*]]>*/</script>Conclusion
Having a table of content in Long-form content is very useful and improves
user experience.
If you like this Guide, do share it with your friends and Join our
Weekly Newsletter in the Footer section.Thank you.🤩
