The table of contents is making a comeback for blog posts. It helps to provide a better experience and can even give your content a boost in search engines.
It certainly isn’t a new concept. Wikipedia has done a great job using this feature. So why haven’t other websites been following suit? Articles having been getting longer so it seems like a good table of contents is more important than ever.
I also think we assumed that users could use CNTRL+F or other tricks to skip to the content they wanted most. However, this can be cumbersome on mobile. Many other users aren’t aware of these tricks. At the end of the day, it has been a bad user experience so that needs to be fixed.
Table of Contents
A Better In-Post User Experience
According to Time, you’ve only got 15 seconds to capture a reader’s interest. If they aren’t drawn in by a strong hook or the ability to find their answer with ease, they’re going to bounce fast.
A table of contents allows users to see exactly how you’ve laid out the post content. This can tell them if you’re going to answer their question or take them down a path that piques their curiosity.
The modern version of a table of contents can also help readers “jump” to a section in the article. This is a much better user experience versus having to read a 3,000+ word monster article to find a single section. It is great that some readers want to take in all of the content, but a lot of people are busy. Most times they’re just looking for a simple answer, so make it easy for them to find.
Search Engines are Using Tables of Contents
Google is utilizing the table of contents and bookmark links (a.k.a. jump links or anchor links) from blog posts. They’ve started to show search engine results specifically for these links as rich snippets.
For example, the “how to” search below was searching for a search answer. Google pulled in not only the right answer but a link directly to that section within the post if the visitor wanted to learn more.
You can see from the Google Search Console data below how that particular bookmark link has been getting a fair amount of traction. It wasn’t the only one getting traction either. For this particular website, I scanned the top 100 most popular pages for search traffic and 28 of them were bookmark links!
That meant about a quarter of all the top pages in search results were directly from a bookmark link. This isn’t all good.
Google seems to favor these types of snippets because they can feature them directly on the search results page. It is a better experience for Google users but that doesn’t necessarily help marketing efforts.
The downside to these bookmark links is their click-through rate tends to be much lower. In my opinion, click-through rate is a more useful metric for the main article and not the bookmark link. Take that into consideration when comparing link data in Google Search Console.
How to Create a Table of Contents in WordPress
We happen to specialize in WordPress website development and design so I’m going to focus on that platform for a table of contents solution.
This is a great option for adding a table of contents to all WordPress blog posts automatically. This plugin will automatically generate the table of contents based on the headings within the article.
There are a variety of Gutenberg blocks for a table of contents. This one by Ultimate Add-ons for Gutenberg is my personal favorite.
If you are wanting more control over which posts have a table of contents or where it shows up in the post, blocks are the best way to go. It gives you a lot more control over placement. This can be handy if you’re wanting to display an intro first before showing the in-post navigation links.
My favorite setup is shown below from a Craigslist marketing blog. It uses the same Easy Table of Contents plugin along with a custom layout that keeps the widget floating in the sidebar. This means the navigation links are always within view for the reader to jump around.
Plus, the headings dynamically change to bold as the reader scrolls down the page. This is great for showing the reader exactly where they are at in the article.
Quick Tip: Add a progress bar
As a bonus, consider adding a progress bar. This helps the reader understand where they’re at in the blog post. The image above has a yellow bar at the top of the post. It is powered by the Read Meter WordPress plugin.
Great Inspiration and Examples
Below are just a few of my personal favorites for examples of great table of contents design and experience.
A simple ToC display with plenty of white space, which allows the reader to focus and jump to the right section.
A simple sidebar floating ToC that makes navigation a snap. As a bonus, the social icons float on the right as well as the reader scrolls down the page.
A floating table of contents that highlights the current section as your scroll with a beautiful design.
The Jetpack blog is my personal favorite. The table of contents stays static in the sidebar, highlights the sections you’re viewing, and dynamically opens and closes submenus.
Is It Worth Adding a Table Contents to your Blog Posts?
The table of contents does push your content down lower. Plus, the bookmark links that result from the table contents tend to attract fewer clicks. Does that mean you shouldn’t include these links for Google? Could it actually hurt your article’s ability to draw in visitors?
From the data I’ve reviewed, it still looks like it is well worth it. These links might get fewer clicks but it helps increase the overall reach of your article and brand. Google displays these rich snippets for about 1/3 of their searches so it gives you prime positioning.
This gives your article a chance to potentially show up multiple times in the search results: once as a regular result and another as a featured rich snippet. Check out the example below.
That means you could still be growing the traffic to your overall website while the click-through rate might decrease. Plus, adding a table of contents to your blog posts is generally a better user experience for your readers.