User experience is a crucial element to consider when creating a blog, article, or long-form guide. Inserting a table of contents (ToC), especially for long reads, can improve the user experience, which will greatly determine if the reader reads what you have posted.
If an article or blog is well over 1000 words, it is a long read. And if it has four or more subheadings, creating a table of contents can organize the content and even motivate readers to continue reading.
This article goes into detail about the ToC and examines its contributions to search engine optimization (SEO).
What Is a Table of Contents?
A table of content is an organized list of sections for a blog, book, or document. It is abbreviated as ToC and labeled with numbers. That means a ToC needs to have several items on its list, numbered or unnumbered. And where is it placed? A table of contents is always placed at the beginning of your document. Your reader should tell what the article is about by glancing at the listed sections. Some tables are clickable. Readers can skip to their topic of interest just by clicking on a given section. So, what makes for a good ToC? A good table of contents clearly summarizes the main content without looking crowded. It should be easy to scan and accurate. Now, you can create a ToC automatically using a plugin. Or, follow a set of steps to create one manually. We’ll detail the steps for creating a ToC manually later in this blog post.What is the purpose of the ToC?
Your table of contents lets your reader see how you have structured your content. It shows them the main pain points and draws them in. Online readers may be highly impatient. According to Neilsen, only 16% read what you have written. Most readers skim. So, a ToC allows skimmers and readers to find answers to their questions FAST. A clickable table of contents rocks because the reader can simply click on a heading and jump to the topic. The ultimate purpose of the ToC is to serve as a map of the content on the page.Format of a table of contents
A ToC is basically a list, and lists may be formatted in two main ways: ordered or unordered.- Ordered list – The list is formatted formally. The HTML ordered lists always start with the
<ol>
tag and end with the<ol>
tag. Items on the list start with<li>
and end with</li>
. - Unordered lists – The items on the list do not follow a specific order. Unordered lists are known as bulleted lists because they are marked with bullets. The list starts with the tag
<ul>
and ends with the tag</ul>
. List items start and end with<li>
tags.
Types of ToC
- Clickable – A clickable table of contents means that your readers can click on the item and be directed to the specific section they want. It makes it easy for your reader to find content.
- Non-clickable table of contents -The reader will have to skim through the article to find the section they need to read. It offers an overview with a reduced navigation function.
Why should you use a table of contents?
1) It presents organized content to the reader
When readers visit your site for the first time from a referral link or a search engines query, they are looking for specific information. For instance, if you highlighted a topic in a Facebook post promoting your new article, users clicking on the redirect link expect to see that info first. If they find your site disorganized, they might feel discouraged and close the page immediately. From a KPI standpoint, this would cause your page’s bounce rate to skyrocket and the time per user session to plummet. A table of contents lets users get exactly what they want from your site. It improves the visual appeal of the page, as well.2) It makes navigation easy
A clickable table of contents allows your reader to navigate a blog post or article easily. For example, if you have a 3000+ word article with many subheadings, it can take time to scroll down the page and find the information you’re looking for. With a table of contents, readers can move directly to any section, even to the conclusion. And with a back-to-top button, they can easily go back to the first section.3) It improves user experience
Long-form content is becoming the norm because websites are rewarded for providing comprehensive information on a topic and fulfilling the searcher’s intent. But the quest for more organic visits with long-form content should not come at the expense of the UX. Put yourself in your reader’s shoes, especially when they are short of time and need to find the info fast. A ToC will surely help them.Examples of great Table of Contents
Let’s analyze some of the best table of contents out there.
1) Hubspot
HubSpot runs a popular marketing and sales blog. Many posts are super long. And for readability and ease of navigation, they include a clickable table of content with descriptive headings. Take, for instance, their blog post on « 5 Steps to Create an Outstanding Marketing Plan ». It’s a 20-min read with nearly 4000+ words. Now, including a ToC with all the subheadings at the beginning, may add 250+ words to the post, and it would bore down the reader. So, their approach is to create a summarized ToC with anchor links to the main sections: It’s a friendly ToC and flows with the text. For instance, readers looking for a template can easily find it. Another important lesson to swipe from Hubspot is that they have ToC within each section. For instance, the main ToC lists “How to Create a Marketing Plan.” If we go to that section, we see: This style is useful if your content contains a lot of subheadings.2) Wikipedia
Wikipedia doesn’t need any intro. Some of its pages can be quite large and contain many subtopics. ToCs are standard for all their pages. They are placed right after the main intro. Wikipedia ToCs are quite useful for contributors looking for direction on how to format their submissions.3) Ahrefs
Ahrefs is a SaaS provider of SEO and marketing tools. They write in-depth guides that are very authoritative in the SEO world. You’ll find their floating ToC on the left side of the page. It’s clickable, giving users easy access to different sections. Floating means that the ToC remains visible even as you scroll down the page. That is the approach we chose to follow on Zenbrief’s blog. You can easily pull off the same style with a simple WordPress Plugin. There are more tidbits to learn from Ahrefs. They have short sections, plenty of white space, and the design is clean and neat.Does a Table of Contents Help SEO Directly?
Implementing a table of contents is certainly not new for blogs. But it’s not a popular choice. Websites that do it are not motivated by better rankings. They mainly do it to improve usability because Google doesn’t use the ToC as a direct ranking factor. So, is there really no point in including a ToC for SEO? Well, not quite. A ToC can have indirect SEO benefits. For instance, a better UX experience encourages visitors to stay on your site for a longer time, reducing bounce rate and increasing session length. Content writers or web admins undertaking their research can easily leave backlinks. And well, top blogs like Hubspot and Ahrefs do it, and by the look of it, it is a wise decision, given that blog posts are slowly becoming longer. Let’s examine more indirect ways a ToC can improve SEO:Why is a table of contents Important for SEO?
1) It makes it easier to share links for different sections
If your blog has different sections, using a clickable table of contents automatically generates a shareable link for each section. In fact, when you click on any item on the table of contents list, the URL changes. You can share this URL with anyone to create a backlink to the section. A ToC can help differentiate sections, helping out the Google algorithm as it crawls your site.2) It allows you to rank your site for more keywords
Google algorithm gives added focus on different sections of your blog. Focusing on different keywords in various sections may allow you to rank for more keywords because you can appear on more searches.3) It improves design and reduces bounce rate
Google cares about quality design. And a table of contents (ToC) improves your user experience. Visitors can navigate easily through a blog post and find the information they need fast. John Mueller, a Senior Webmaster Trends Analyst at Google, notes that the search engine doesn’t utilize Google Analytics metrics such as bounce rate or average session views to determine organic results. However, they penalize poor design and slow loading pages.4) It increases CTR
The different sections on your site produce anchor links. Section links sometimes feature in organic search results as jump-to links below the main blog post link. This can increase your click-through rate as users may be motivated to jump directly to the information they are looking for. For example two of Investopedia’s ToC’s sections show up directly in search results. These jump-to links increase the CTR on Investopedia’s page.5) It improves the rate of returning visitors
A table of contents generally makes the site experience memorable for users as it reduces the hassle of finding information. Happy users may click on your SERP results more because they know they will get answers to their questions fast. SEO experts agree that reduced rates of returning visitors can negatively affect search rankings and organic visits. That’s because having more returning visitors enhances the site’s credibility in Google’s eyes.Is a Clickable Table of Contents Good for SEO?
There are two main arguments against using a table of contents. Some site owners claim that a clickable ToC makes their sites load slower. There is no strong evidence to indicate this. Plus, there are many ways to improve the load speed, from implementing lazy loading to using lightweight plugins. Others purport that the ToC reduces the time spent on the page. Now, dwell time has been shown to have a positive correlation with good rankings. Users may indeed spend less time on the page because they don’t have to read everything. But on the other hand, they leave happy. The visitors will be more inclined to visit again. More importantly, they will be less likely to visit other sites in order to find the information they were able to find on your website. This last point is very important as it shows whether your site is useful to the reader. Google’s latest algorithm update, the Helpful Content Update, makes it clear that Google wants search results to be people first. To reiterate, Google has not explicitly stated that they use dwell time to determine rankings. It could be that pages with high dwell time excel in many areas. Another reason that we have already hinted at is that a clickable table of contents generates shareable section links. And Google may feature the links as jump-to links in the search results, hence boosting CTR.How to Create a Table of Contents in WordPress Manually or With Plugins
With WordPress, you can create a table of contents manually or insert it automatically with a plugin.How to manually insert a table of contents within your WordPress posts?
If you prefer to create a formal table of content manually instead of using a table of contents plugin, here is the straightforward way to do it:- View the blog post in the WordPress editor, or if you’re using Elementor like us, Edit the post in Elementor using the option in the top bar menu
- Format the different headings as h2, h3 and h4 to create a clear content outline.
- Add unique IDs to each heading. In the classic WordPress Editor, click on the ‘More’ icon on the toolbar and select ‘Code Editor.’ In Elementor, this can be done by clicking on the ‘Text’ tab of the Text Editor.
- Add a ‘unique ID’ tag to the opening of the heading.
For instance,
<h1 id="myHeader"> My Header </h>
. The unique id is case-sensitive. It should not start with a number or contain whitespace (but you can use hyphens, for instance, my-heading).
- Add unique IDs to the rest of the headings.
- Next, list the headings in a list near the top of the article.
- Highlight each list item, and select insert link to create anchor lists.
- In the URL field, enter # followed by the unique id for the different section headings. For instance, for the list item My Header, the URL should be “
#myheader
.”
How to create a table of contents in Gutenberg?
Using the Gutenberg block editor, to add a ToC is quite simple as every content piece is introduced as a block. Here is how it goes:- Enable all blocks made available by the Gutenberg editor by going to Setting > UAG. Scroll down the plugin page and find the Blocks section, and select “Activate All.”
- Go back to the posts section, and select the post to edit.
- From inside the editor, look for the add block icon (+ sign), and click on it to view available blocks in a dropdown menu.
- Find and click the Table of Contents block.
How to create a table of contents automatically using WordPress plugins?
Updating the clickable table of contents can be a bit difficult — if it’s implemented manually. Because SEO involves constant change, for instance, updating titles or adding new keywords, it’s advisable to include a dynamically updated ToC. If you are using WordPress, here are some of the best plugins to consider to easily create ToCs within your WordPress posts:- SimpleTOC – Loads quickly as it doesn’t use Javascript or CSS.
- Easy Table of Contents – Generates the ToC from content.
- Table of Contents Plus – Described as “powerful and user-friendly.”
- Easy Table of Contents – WordPress plugin | WordPress.org
- Fixed Widget and Sticky Elements for WordPress – WordPress plugin | WordPress.org –
- WP Shortcode Pro – WordPress Shortcode Plugin for Landing Pages & Posts @ MyThemeShop
- Luckywp plugin – a great WordPress table of contents plugin that is customizable and provides you with a way to edit the text of the hide/show toggle button, something other plugins usually don’t cover.
What Are Some Table of Contents Best Practices?
Here are some best practices to implement when coming up with a ToC:1) Make it accurate
Errors may be introduced when generating a ToC automatically or manually —for instance, if the sections have been wrongly labeled. When creating a manual ToC, check that the anchor links work correctly. With an automatic plugin, counter-check that all the headings have been captured correctly and the numbering is accurate.2) Insert keywords
If you want your sections to stand out and get noticed by Google’s algorithms, you need to insert some short-form keywords in the titles. This is especially good for SEO as it contributes to keyword ranking. You can also target long-form keywords with low competition and cover commonly asked questions for a better shot of appearing in People Also Ask boxes.3) Place the ToC at the beginning
A good table of contents should be at the beginning of your blog posts. Ideally, place it above the fold. This gives readers a clear impression that you have a ToC. They can easily navigate and find the content that they need.4) Be consistent
Consistency means including a table of contents in all of your blog posts or using a similar design and placement. This caters to regular readers who may become accustomed to using the ToC. A uniform design is also key to having a great UX.5) Make your table of contents clickable
A clickable table of contents has more benefits than a non-clickable table of contents that only tells readers what the blog post entails, only acting as a basic summary.6) Add ToCs to different sections
If you have a high number of subsections (e.g., h3 and h4 titles), follow Hubspot’s outstanding example! First, the main table of contents should only include the heading 2s. Second, add ToCs for different sections that may have plenty of H3s and H4s.7) Consider making your Table of Contents sticky on Desktop
Take advantage of the large screen size offered on desktop devices to make the ToC sticky. You’ll ensure that desktop users will continuously have access to the ToC as they scroll down the page. It will inevitably improve the user experience, as users can instantly access any section without jumping to the start of the article to find the ToC.Bottom Line
When traveling to a new place, you need a map to navigate. It shows the next stop, town, or road. A map can even help you determine the shortest route. Essentially, that’s the role of the table of contents to a new visitor. It shows them what your content includes and shortcuts to reach specific sections in no time. While it’s not a direct ranking factor, it can provide indirect SEO benefits to a site and contribute to overall page quality. When implementing ToC with a plugin, it’s important to choose a lightweight implementation such as the SimpleTOC plugin that doesn’t add javascript or CSS to the page. Other tidbits to consider include ensuring correctness and consistency. At the end of the day, you only have more to gain than lose by including the ToC in your content.Was this helpful?
Let us know if you liked the post. That’s the only way we can improve.