Have you ever visited a website with a lengthy explanation of the topic you are looking for? Did you find yourself reading the full article? Like most users, your eyes probably got tired from looking at too many words or gave up upon failing to find the required information.
On the other hand, there is another website that also offers you a lengthy explanation but features an outline of the information. Is this not more convenient and makes finding the information you seek easy? Again, the simple solution is TOC or table of contents.
Concerning your WordPress website, the user experience plays a significant role. The primary aim of any site is to satisfy your user’s demands and give them the best experience. You may use free WordPress themes for this purpose. However, as effective as a theme is, it is essential to incorporate other elements into your WordPress.
Therefore, one thing you cannot miss is TOC to increase post readability and keep your site organized. So, to let you enjoy the power of TOC, we will discuss how you can manually create it for your WordPress site.
What is Table of Contents and Its Importance?
When you open a book, it features all the chapters the entire book has, along with the page numbers each chapter is on. Thus, readers do not have to skim through every page to find the chapter they seek. Instead, they can readily jump to the correct page number. The same for a website is known as the table of contents or TOC.
The minimum time for websites to capture a user’s attention is fifteen seconds. When nothing catches the user’s eye, or they cannot find the relevant information, they are bound to move to another website. To maintain a low bounce rate and draw your users in, you will need a TOC.
A TOC features links to various sections of the same page or post. Sometimes, such links also interlink other web pages of the same website. Generally, the links are for the same post and showcase all the main sections in one place to increase the user’s reading experience.
When users come across a section that might hold the information they need, they do not have to scroll to that section but can readily jump to it to find the answers. Users may also use TOC to read the post in any order.
When you are writing blog posts, the table of contents may feel like an unnecessary step. However, if you want your users to have the best browsing experience and leave your website with a good smile, TOC can hold great significance. Some of the important reasons are:
- Users can skip scrolling for hours through a lengthy page of information and comfortably jump to a relevant point with TOC.
- A TOC allows you to boost your website’s Search Engine Optimization score. You can readily add relevant keywords with these helpful links and add to keyword density. As a result, your website will have better rankings.
- Google offers featured snippets or extended top search results with a short excerpt that quickly answers users’ queries. If you want your post to obtain a featured snippet, you must include a TOC as a concise answer to communicate well with the user’s questions.
You have knowledge of TOC and the importance of incorporating it into your WordPress web pages. Now, it is time to look at how you can add a table of contents manually.
How to Add Table of Contents in WordPress Manually
Creating a table of contents without the help of any additional tool may seem challenging. Although it is time-consuming and demands loads of work, it is not impossible to achieve. The process will require you to do some coding to add TOC manually.
In this process, you can use the Gutenberg block editor to add table of content in your post. When using any other page builder for WordPress, you will be more fortunate with a Table of Content plugin compatible with the builder.
Now, let us discuss how to add table of contents for your WordPress website.
Step 1. The first step is to visit the web page or post for which you want a table of contents.
Step 2. Ideally, your posts must have headings that help users to find relevant information. However, if your post has no, you must first create headings that act as the various items for your table of contents.
Step 3. Next, when you have the first block for the heading, click within it. You will see a toolbar pop-up with multiple options.
Step 4. The toolbar will have an icon with three dots and the “More” option. Click on it to get a drop-down list, and select the “Edit as HTML” option.
Step 5. To the heading’s opening tag, incorporate a unique ID. Any HTML element’s opening tag will have a distinctive identifier, in this case, an ID name. For a heading, this may look like this:
<h2 id=”unique-id”> Section Name </h2>
Step 6: In the next steps, you will iterate step 5 for all the headings you wish to add to your page’s table of contents. For example, if your ID name is ABC-1, ABC-2, ABC-3, and ABC-4. Then you can add as follows
<h2 id=”ABC-1″> Section 1</h2>
(Add information)
<h2 id=”ABC-2″> Section 2</h2>
(Add information)
<h2 id=”ABC-3″> Section 3</h2>
(Added information)
<h2 id=”ABC-4″> Section 4</h2>
(Added information)
Step 7. For the next step, move to the top of your web page. The toolbar on the top features “Add Bock.” Select this option.
Step 8. After you select this option, it will give you a drop-down menu with multiple blocks to add. Next, select the “Custom HTML” option, which enables you to create a table of contents for your post.
Step 9. Now, it is time to add jump links to your table of contents. Hyperlinks that allow readers to jump from the TOC to the same post or page’s numerous sections refer to jump links. In this example, we will only add hashtags with the previously used ID name to every href attribute.
You can copy the following HTML into a block and create a TOC for your page:
<div class=”toc”>
<p>Table of contents</p>
<ol>
<li><a rel=”noopener” target=”_blank”href=”#abc-1″>Section 1</a></li>
<li><a rel=”noopener” target=”_blank”href=”#abc-2″>Section 2 </a></li>
<li><a rel=”noopener” target=”_blank”href=”#abc-3″>Section 3 </a></li>
<li><a rel=”noopener” target=”_blank”href=”#abc-4″>Section 4 </a></li>
</ol>
</div>
Step 10: If you want your sections to link correctly, accurately alter the jump links and section names. Remember to write # (hashtag) before your ID name when customizing the jump link.
You will have a well-established table if you have followed the given steps accurately. You can see how easy it is to follow the steps. However, you will need a basic understanding of CSS and HTML coding languages.
But we know not every WordPress website owner is familiar with coding, and several may even find it difficult to code. Therefore, you always have the option to use an automatic option or a plugin. In addition, a range of plugins is available to readily add a table of contents to your WordPress pages or posts.
To give you detailed knowledge, in the next section, we will discuss different options you can use to add a table of contents to your WordPress post or page.
Add Table of Contents in WordPress Using Plugins
Now you understand how necessary a table of contents is on your WordPress websites. The benefits are not just limited to increasing your post’s readability and making it easy for your readers to find the information they seek. An efficient table of contents also enables you to optimize your website for search engines and increase rankings.
However, manually creating a table of contents for your posts and web pages can require immense effort. Therefore, you can use other easier methods to incorporate a table of contents in your posts. Let us get started.
Plugins for Adding Tables of Contents:
When looking for more functionality, plugins are always the number one option. You can find innumerable plugin solutions to incorporate a table of contents into your WordPress website’s posts.
It is advisable to use this method as it consumes less time and automatically generates a TOC for your post using your content’s subheadings. It also allows you to create an entirely adaptive TOC featuring adjustable links.
This post will use AIOSEO, which is short for an All-in-One SEO plugin. This plugin features a built-in block for a table of contents. Apart from this, there are multiple other plugins that you can use, such as Fixed TOC.
With AIOSEO, you can readily use the free version to incorporate TOC. However, the premium version delivers better rankings on search engines.
To install the plugin, do the following:
- Visit your WordPress dashboard and find “Plugins.”
- Find and select the button for “Add New.”
- Either use “Plugin Directory” to install your free plugin. If you have a premium plugin, you will upload its .zip file.
- “Activate” your plugin.
Now that your plugin is active, you can enjoy its range of functions. With the AIOSEO, you must first configure it. After this, you can do the following:
Add Toc Using Aioseo Plugin
- Visit or create the post/page where you plan to add a TOC.
- Select the plus (+) icon or “Add Block” from the top toolbar.
- Drag the “AIOSEO-Table of Contents” block anywhere on your page/post.
Now, your plugin identifies the page’s headings and automatically adds them to your TOC. In the case of different heading styles, including heading 2, heading 3, heading 4, etc., the lower sub-head levels will appear indented. In case when you add more headings, the plugin will ensure they are present in the TOC. Remember, you can only add one TOC to a single post.
Conclusion
Reading lengthy content and finding relevant information is no less than being lost in a maze. It could also be a big reason many users leave one website for another. If you want to lower your bounce rate and increase your content’s readability, add a table of contents.
A TOC involves all your post/page’s headings and sub-headings, along with jump links to multiple sections. So your user can effortlessly jump to the information they are looking for. It also improves the quality of the audience’s user experience and boosts your SEO.
You can use the manual method to create a TOC for your site. However, this involves writing codes and is time-consuming. Another option is to use plugins for TOC that automate the process and is the best if you are not a developer or know the basics of coding languages, such as CSS and HTML. Whatever option you use, you must add a TOC to make your user’s life easy and make them revisit your site.
