Adding a table of contents - also called summary - at the beginning of your blog posts can be a "real plus", both in terms of SEO optimization of your blog than improving the user experience (UX) of your readers.
In the past, you needed some knowledge of HTML to be able to insert a table of contents in your articles.
Here you will see that there are several solutions and we will go through them all...
- 1 - Why insert a summary at the beginning of a blog post?
- 2 - Insert a table of contents with a free extension
- 3 - Inserting a summary manually with Gutenberg
- 4 - Inserting a table of contents manually with the Divi Builder
- 5 - Insert a summary manually with the classic WordPress editor
- 6 - In conclusion: manual or automated table of contents?
Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
1 - Why insert a summary at the beginning of a blog post?
Adding a summary at the beginning of your blog posts may seem insignificant, but it's quite the opposite!
When I was starting out in blogging, I only inserted a table of contents if it was really worth it. That is, if the article was really long or a bit complex.
Over time, I realized that this "little extra" was actually essential for many reasons:
- As my articles are less and less succinct and more and more developed, a summary allows to make the content more digestible.
- This helps Divi Tips readers better navigate and understand the chapters in my articles. This way, they can quickly get to the part that interests them the most.
- Reading the summary of the article can also whet the curiosity of readers who might not have bothered to go beyond the introduction.
- This is essential for Google, which also needs to know quickly the content of your article and to understand it better thanks to a appropriate HTML semantics.
- The table of contents allows the indexing robots to propose enriched results (Richs Snippets) directly in its search results, with links pointing to some of your chapters.
Adding a summary to your articles is an optimization not to be underestimated and can help you improve your position in search results as explained in this article full of tips for quickly reach the 1st page of Google.
So, with a table of contents at the beginning of your articles, you kill two birds with one stone!
In fact, when I have a little time, I try to update my old articles to optimize and update the content and I always take the opportunity to add a summary, if it is not already the case... It's a big job but it's worth it!
2 - Insert a table of contents with a free extension
If you are thinking of doing this, I suggest you discover a simple way to do it.
The free extension named LuckyWP Table of Contents is very easy to configure and gives a more than satisfactory result, let's see how to do it...
2.1 - Installing LuckyWP Table of Contents
Simply go to the tab Extensions > Addtab, available directly from the administration part of your site.
Do a "table of contents" search: install and activate the LuckyWP plugin.
You can find the plugin settings under the tab Settings > Table of Contents.
2.2 - LuckyWP Configuration
Setting up this plugin is very easy and its options are available in ENG/FR. Just navigate through the various tabs to check/uncheck the options available to you.
2.2.1 - General tab
It is from this tab that you can make the main settings such as :
- The minimum number of titles that triggers the creation of a table of contents.
- The possibility to display the summary according to the hierarchy of your titles (H1 - H2 - H3 etc.).
- The type of numbering to be used: numbers, Roman numerals, no numbering etc.
- The numbering suffix: none, a parenthesis or a dot.
- The title to be displayed above the table of contents.
- Activate the filter allowing the user to show or hide the summary. You can even change the labels.
- Add an automatic margin before the anchor point and enable smooth scrolling.
Once you have made your settings, don't forget to save your changes.
2.2.2 - Appearance tab
The Appearance tab allows you to customize the display of your summary.
You will be able to specify the font, the fat and especially the colors to be used.
The options are quite complete and allow you to fully customize your table of contents by deciding the background color, link color, hover links and visited links.
In short, everything is done so that your summary blends in with the graphic charter of your site/blog!
2.2.3- Auto Insert Tab
The LuckyWP plugin allows you to automatically insert a table of contents in your publications.
It's a good option that could save you a lot of time, but fortunately it's only an option.
If you don't check it, the summary will not be added automatically and this will leave you more freedom on where you want to insert it (manual method).
2.2.4 - Table of contents settings tab
From this tab, you will simply decide which publication types can host a table of contents.
2.2.5 - Miscellaneous Tab
The Miscellaneous tab offers interesting options, especially in terms of SEO...
- Check off the titles you want to exclude from your summary. For example, you could decide that only the H1 - H2 and H3 titles should be included and that the others should be hidden.
- Decide on the format of your URLs. A link is automatically created internally: an anchor is therefore placed at the end of the URL of your articles. With this option, you can decide on the appearance of the anchor.
- Concerning these anchors added to the URL, you will be able to convert your titles to lower case and replace the underscores (the underscores _ ) by dashes.
- Two SEO options are also possible: tagging the summary with a "noindex (this tells Google not to index these URLs) and to add a "nofollow to your summary links (this tells Google not to follow these URLs). It's up to you to choose what you think is best...
- Other settings are also possible, such as deciding in which HTML tag your table of contents will appear (UL or DIV).
2.3 - Inserting the LuckyWP summary into your blog posts
Now that the settings are done, you can enjoy this new feature.
If you have decided to automatically insert the summary, everything is normally already in place. You won't have to do anything more than check the appearance of the summary within your articles.
If, on the other hand, you have decided to manually insert LuckyWP's table of contents into your articles, here's what you need to do:
When writing your articles with the new WordPress editor (Gutenberg), you can easily insert a "Table of Contents" block - available in "Common Blocks" - where you want it.
This block will retrieve all the titles identified in your articles and list them in the form of a clickable summary.
You have nothing else to do...
Find out more about Divi compatible plugins... and who really want you well 😉
3 - Inserting a summary manually with Gutenberg
If you're the reluctant type and don't like adding plugins unnecessarily, you should follow this second solution: manually add a table of contents using Gutenberg.
Ideally, you would need some knowledge of HTML, but nothing too complicated if you follow these steps:
When your writing is complete, or when the outline of your paper is finished, you will need to add an IDENTIFIER for each of your paragraphs.
Gutenberg's TITLE blocks are ideal for this purpose.
- Select the title block to be modified: click on the contextual menu (the 3 small dots) and choose "modify in HTML".
- Vous verrez alors la version HTML de votre titre. Celui-ci est placé dans des balises H2, H3 H4 etc. Dans cette balise, vous devez ajouter un <strong>identifiant unique</strong> que vous créerez pour chaque titre. La balise <strong><em><h2></em></strong> devra ressembler à cela <strong><em><h2 id= »mon-identifiant-1″></em></strong>. Vous renouvellerez cette action pour chaque titre en prenant le soin de ne <strong>jamais utiliser le même ID</strong> et <strong>sans utiliser des espaces ou des caractères spéciaux</strong>.
- You can then close the editing of the HTML by selecting "Edit visually".
Once all your titles have an ID, you can insert a "List block" to list the items in your table of contents.
For each element, you will just have to insert a link such as #my-identifier-1, #my-identifier-2, #my-identifier-3 etc.
This allows you to create an internal link to the article that will lead the user to the desired location.
It is time to test Divi for free to see what it can do... It's over here!
4 - Inserting a table of contents manually with the Divi Builder
To create a table of contents in a page/article using the Divi Builder, it's pretty much the same as with Gutenberg :
First of all, you will need to insert as many lines (rows) or sections as you need for a paragraph. Learn more about how the Divi Builder works.
When your paragraphs are well separated in different rows and sections, you will be able to add an ID (CSS identifier) that will be used to create your table of contents.
- Edit the row settings
- Go to the ADVANCED tab
- In the "CSS ID" field, enter your unique identifier. For example : summary-1. Do not use special characters or spaces.
- Save your changes.
You will need to repeat this step for each of your paragraphs.
Then, you can create the summary using a Text module in which you add a bulleted list (or a numbered list if you prefer).
- Open the Divi Text Module
- Highlight one of the items in the summary (bulleted or numbered list)
- Click on the insert link icon
- Add the CSS identifier of the paragraph with a "hashtag" as a prefix. For example: #summary-1
- Validate by clicking on OK
- Repeat these actions for each paragraph: the identifiers must be unique, don't forget that.
- Save your changes.
Now you have a working table of contents for your publication using the Divi Builder!
5 - Insert a summary manually with the classic WordPress editor
If you are still using the old WordPress editor to write your blog posts, you can also add a table of contents easily.
All you have to do is write your articles from the VISUAL editor (left screen on the screenshot above) and then switch to the TEXT version (right screen on the screenshot above), to insert the CSS identifiers (IDs) within the H2, H3, H4 tags etc.
Finally, you will be able to add these CSS IDs as link addresses within your summary, as we have seen before with Gutenberg or the Divi Builder.
Discover many other tips and resources directly on Elegantthemes' blog.
6 - In conclusion: manual or automated table of contents?
Manual methods are efficient and give you more freedom, however, it takes much more time than with the help of a plugin. Especially if your summary must display nested lists!
If you want to be tempted by the plugin method, you should know that there is not only LuckyWP, other free or freemium extensions are also available: