How To Add SEO Friendly Table of Contents To Your Website How To Add SEO Friendly Table of Contents To Your Website | RaQMedia | Complexity Simplified

How To Add SEO Friendly Table of Contents To Your Website


You May Also Like

How to Add Automatic Table of Contents in Blogger or WordPress

The table of contents is an advanced feature that has been introduced to websites mainly in WordPress years ago. So what is a table of contents? How can table of contents improve your blog SEO?

Advantages of the table of contents

  • Gives a professional impression to your website.
  • Makes it easier for your visitors to navigate through the different parts of your content.
  • Improves your SEO as it optimizes your posts to search engines.
  • It fastens the indexation by web robots.
  • Highlights the most important parts in the post.
  • Generates the heading automatically and there is no need to type it yourself.
  • Does not affect the load and performance of your website especially if you are using a well coded template or WordPress theme.
  • SEO Friendly codes.
  • Adds a clickable table of contents ToC to web page topics in Blogger and WordPress.

How to Create a Table of Content in WordPress Posts and Pages

As we all know, adding features and options to WordPress is easy and simple by using the various plugins. Obviously, there some ones that are paid and offer advanced options. But we have tested most of them whether paid or free.

And here are the plugins that we recommend:

Both of these two plugins are very popular exceeding more than 300.000 users and installations. They will do the job automatically and systematically. You still customize your choices through the plugins configuation panel. Just install and forget 😉😉🙏.

How To Add SEO Friendly Table of Contents In Blogger

Let's move now to the second part concerning Blogger users. Yeah! You read right. In today's tutorial, we show you how to add a very stylish table of contents. The implementation is easy and does not affect your site performance like adding a sitemap page to Blogger.

As you were browsing this post, the table (TOC) is that table that you find it at the top.

Step 01

First follow these steps:
  1. Login to you Blogger dashboard.
  2. Backup your template first.
  3. Head to Template then edit HTML.
  4. With Ctrl+C to copy and Ctrl+V to paste the following codes in their appropriate places.
  5.  Search for the line of code by hitting Ctrl+F
  6. Save your template and exit.;

Step 02

Next paste the following code just before </head>

[<link href='' rel='stylesheet'/>
<link href='' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>//<![CDATA[//TOC    
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}//]]></script>]

Step 03

Now, search ]]></b:skin> line and paste the following CSS code just above that ]]></b:skin>.

[.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald, arial;display: block;width: 70%;}.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}.mbtTOC ul {list-style:none;}.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0;margin:0 0 0 30px;font-size:15px;}.mbtTOC a{color:#0080ff;text-decoration:none;}.mbtTOC a:hover{text-decoration:underline;}.mbtTOC button{background:#FFFFE0;font-family:oswald, arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px;}.mbtTOC button:after{content: "\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px;}]

Step 04

 After that search for <data:post.body/> tag and replace all of them with the below code.

[<div id="post-toc"><data:post.body/></div>]

How to Add TOC automatically In Blogger Posts

To finish setting up the script, you need to add the following code in every post of your blog right after the first headline.

[<div class="mbtTOC">
 <button onclick="mbtToggle()">Contents</button>
 <ol id="mbtTOC"></ol>

And finally at the end of the blog post paste the following script:

Important Notice

 Note: If you have already used any other scripts of Table of Contents, make sure you delete them. You can change the word "contents" with what you want. Credits goes to MyBloggerTricks.
🔔 Subscribe to our channel to get exclusive & free tech tips & hacks 🔔

And that way you have successfully created an automatic Table of Contents in Blogger. If you face any problems or find ways to improve this script or better WordPress Plugins, do share your thoughts and feedback. We love to hear from you 😊💗.


  1. The “Table of Contents” block enables you to create interactive
    and SEO friendly indexable contents
    without going through the hassle of coding 😊 💙

  2. 🔔 اضافة جدول محتويات الموضوع فى بلوجر, روابط الانتقال السريع او جدول المحتويات

Thank you for taking time to comment. 😊 💙

🔔 If you're interested in more, have questions, or any constructive criticism, let us know in the comment section below!

⚠ Your email address will not be published. By using this form you agree with the storage and handling of your data by this website.


Android,13,Android Apps,1,Apps,2,Around-The-World,14,Articles,11,Autos,4,Blogger,16,Blogging,32,Celebrities,9,Classroom-Ideas,4,Dictionaries,1,DIY,57,Earn-Money,10,English-Club,1,English-Exercises-Online,4,Entertainment,48,ESL-Games,6,Facebook,11,Freebies,5,Fun,21,Girls-stuff,41,Grammar,10,Health,35,Imaniat,66,Kids,44,Learn-Arabic,20,Learn-English,72,Lesson-Plans,1,Lifestyle,138,Listening,1,Methodology,13,Motivation,9,Mysteries,14,News,32,Online-Tools,4,Personality,2,Photoshop,8,Printables,25,Pronunciation,3,Qasas-ul-Anbiya,23,Qasas-ul-Quran,7,Quizzes,10,Rawae,18,Realities,17,Reviews,13,SEO,8,Services,3,Sira,24,Stories,1,Students-Corner,4,Teach-English,24,Tests,7,Travel,14,Tutorials,92,Vocabulary,40,Windows,5,Women,41,WordPress,8,Writing,1,YouTube,24,شروحات تقنية,14,
RaQMedia | Complexity Simplified: How To Add SEO Friendly Table of Contents To Your Website
How To Add SEO Friendly Table of Contents To Your Website
You can add a clickable seo friendly table of contents TOC to your website whether WordPress or Blogger easily in few steps following this guide.The implementation is easy and does not affect your site performance. how to add automatic table of contents. إضافة سكريب جدول المحتويات تلقائيا لمدونة بلوجر
RaQMedia | Complexity Simplified
Loaded All Posts No posts are found VIEW ALL Read more Reply Cancel reply Delete By Home PAGES POSTS View All You May Also Like - قد يعجبك أيضا LABEL ARCHIVE SEARCH ALL POSTS Sorry! No posts were found matching your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Click Here To Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Contents