This feature can easily be implemented on WordPress blogs and now, Blogspot/blogger blogs can have the same.
What is Table of Contents?
A Table of Contents (ToC) is a table showing the basic headings or subheadings in a post or article.
What are the Benefits of a Table of Contents?
If you've visited Wikipedia at one time or the other, you must have seen a table of contents menu at one corner, and you have definitely used it to easily skimp through a post, or jump immediately to the section you're looking for.
Whichever is the case, a Table of Contents optimizes visitors time on a site by providing a map of the page.
That is, instead of going through individual sections of a post especially if it's a lengthy one, they can navigate to the section they are most interested in.
Although it is just as useful to go through a post from the first paragraph to its last, some visitors to your site who aren't very patient may leave immediately if they think you're deviating from the topic at hand or beating around the bush.
Trust me, they don't mind wasting another time finding the same information on another site than going through a lengthy page.
In a study by Jakob Neilsen of useit.com,
Although visitors spend more time on pages with more words, they only spend 4.4 seconds more for each additional 100 words.
On the average, users only read half the content of a page with 111 words or less,
It'll be both beneficial to you and your visitors when they spend less time finding the most relevant section to them in your posts.
The need for a Table of Contents on your blog cannot be overemphasized.
Can Table of Contents Improve A Site's SEO?
Yes, it can!
Here's one reason:
- It allows you write longer articles which Google uses as a ranking factor.
This is because a post with a Table of Contents will most likely require that you divide your content into subsections with each talking about a different aspect of the same topic.
With a longer post, you get higher rankings in search engine result pages.
- A Table of Contents widget in your blogger blog can reduce your blog's bounce rate.
This is because visitors while skimping through the post will not mistakenly scroll past the section that actually solves their problem.
Jumping past it means they didn't find what they came for and the location of the close button isn't that much of a secret.
Also in some search results,
- Google displays a 'Jump to section link' crawled from the Table of Contents in a site's page in order to show the most relevant result to the user.
While this increases the click-through rate to a site, it can also help it achieve higher rankings
So you see the need to implement one on your blog?
To format your blogger post with a Table of Contents, follow the steps below.
Adding Table of Contents Widget to Blogger
- Goto your blog's template
- Click on 'Edit HTML'
- Using CTRL+F key combinations, search for the tag </body>
- Copy the code below and paste 'above' </body>
- Save your template.
- Next, Goto the post editor of the post you want to create a table of contents for.
- Click on 'HTML'
- Below the line of code <div dir="ltr" style="text-align: left;" trbidi="on"> type the tag
- Place this code in the section of your post where you want the table to display
- At the end of the post just after the last </div> tag, close the first two tags by adding
- In each header tag in your post, add ID="ID-Number"
- Update the post and preview it to note the changes made.
- Goto the post editor of the post you want to add this table to your template.
- Click on 'HTML'
- There are two codes provided below, and each gives a different layout.
- Copy only one of the codes below depending on your structure choice and paste where you want the widget to show.
- Before updating the post, there are some changes you have to make in the code and the post headings (all fields highlighted in white).
For all post headings, include an ID using the tag <span> </span>
- If one of my subheadings is:
I'll modify it to,
Note: Use unique ID numbers for each heading, for example, ID1, ID2, ID3 and so on.
- Next, modify the ID numbers in the code to match your the ID number you just inputted in your headings.
- Also, modify the code by changing the text URL within the hyperlink tag to the post URL.
Keep in mind that the ID number after the hash symbol must match the heading you included the number in.
Finally, make changes to the texts 'This is heading...' by replacing it your subheadings.
Your final code should be similar to the image shown below:
If you have more headings to add than those provided in the code, use the List tags <ul> <li> </li> </ul> to add more headings.
For example, after a closing </li> tag add:
<li><a href="URL#IDnumber">1</span> This is a heading</a></li> and modify accordingly.
Using the methods listed above, you can easily categorize posts on your blog into sections that give more ease in navigating through your site's content.
If you encountered problems while trying to use this code on your blog, then leave a comment and we'll guide you through it.