How to: Make a Table of Content [TOC] in Blogger Posts for SEO Friendly

Table of Content [TOC] in Blogger Posts

What is Table of Content in Blogger

Many people ask me about “How to create a table of contents or Table of Contents(ToC) automatically in Blogger similar to EL Creative Academy? Well, here I will show you how to make it only with Vanilla JavaScript and CSS3! So, here we will create a ToC Script whose example is similar to the following table of contents:

For bloggers who often write long articles and often divide articles into sections, visitors may have difficulty reading it without navigation. One solution for making a long and easy article to navigate is to make Table of Contents (ToC) / Table of Contents. ToC is one of the features that you might often see on well-known websites/blogs, for example like Wikipedia and useful to make it easier for visitors to navigate long articles.

Table of Content can provide a summary or a short description of the Search Engine about the contents of the article you are creating. Anchor Link in the ToC may be an additional value for SEO and of course, Google likes Anchor Link especially when the Link is useful and can provide better navigation and understanding of the content you are creating.

Table of Content that I will show you this time of course is also SEO friendly and can be automatically generated.

The Table of Content is usually found in PDF and Word format files. In addition, TOC is also in the article a website, well on this occasion I will share a way to install an automatic TOC or a table of contents in a post that uses a blogger platform and certainly SEO Friendly.

Table of Content has the same functionality across multiple platforms, i.e. it contains links from the core submitted to articles or blog posts. This anchor text link will make it easy for visitors to crawl the page with the links on the header tag either H2, H3, and H4.

Why do you need a table of content on blogs

There are many factors that do website SEO or blog, one of them is the quality of articles or Menscroll. Liquid article A key factor over the traffic gained due to the impact of SEO optimization well. A lot of articles must be optimized with SEO techniques so that the Ranking website on search engines can increase.

Adding a Table of Content to an example article. Before it explains how important the ToC role is in a blog article or website to SEO, it is very good to read the following explanation.
Table Of Content makes it easy for readers to find the subject you want to read just by clicking on the link provided
Table Of Content helps readers of our Blog to know exactly what points the Blog owner wants to say on the post.
Table Of Content makes it easy for search engines to recognize our articles, as they are considered more informative for readers.

How to make a table of contents automatically in blogger

Is the Table of Contents SEO Friendly?

you can provide a summary or brief description for Search Engines about the contents of the article that you created. Anchor Link contained in the ToC might be an additional value for SEO and of course, Google likes Anchor Link especially when the Link is useful and can provide navigation and a better understanding of the content that you create. The Table of Content that I will show this time is of course SEO Friendly and can be generated automatically. Here is a display of the top results on the Search Engine that we will make:

How to Install a Table of Contents on Blogger

The ToC script that we will create this time can be installed on any platform. Both in WordPress, Blogger / Blogspot, or HTML documents (you can download the Source Code at the end of this article). But this time, I will only discuss the steps to install it only for Blogger. Apart from that, you can create it yourself.

Follow these steps: Go to Blogger > Theme (Theme). Previously, first Backup the Template that you are currently using. Click Edit HTML button. Look for the tag and add the following JavaScript code directly above it:

Next, look for code and paste the following CSS code directly above it:

Look for code and paste the following code directly below it: