Create index or table of contents in WordPress posts

Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training

Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days

What is the first thing you do when you flip through a book? The cover, the back cover and the flap give us generic information about the content of the book and, when we want to know something more, we start to leaf through it and, generally, we stop at its index.

The index of a book allows us to quickly locate the page or pages where the information that may interest us is, but it also provides general content information of the book, its structure and, in short, it serves as a reference to acquire it.

Something similar happens with the posts or pages of a website.

When a user arrives at a post, usually after performing an organic search on Google, what they want and need is find the point of the text that solves your doubt or question, what led you there.

Without an index, the user is forced to scroll through the entire web page, which can be several thousand words long. This can discourage you and discourage you from continuing to browse and look elsewhere.

With a table of contents we avoid this situation: the user will not only not be lost when he reaches our page or post and will be able to quickly locate the information he was looking for, but he can find other points of interest in the rest of the content.

In this article, we will see what are the tables of contentswhat advantages and features it has and how to implement it in our posts and pages easily and quickly, with or without a plugin.

What is a table of contents?

Basically, as mentioned in the introduction, a table of contents is equivalent to the index of a book, applied to a web page, showing the structure of the book. web page content and a link to each of its sections.

Regarding the index of the book, in which we have to search and locate the page of the book from the number in the index, the table of contents allows the user “jump” directly to the point of interest on the web page, by clicking on the reference that appears in the table.

An example of a table of contents can be seen in this example image, in which the following table of contents (or index of contents) is shown and in which its main elements can be identified:

When the user arrives at the web page, the first thing he sees is its description, with a brief introduction of the content of that page, which would be equivalent to the front or back cover of a book, followed by the table of contents, where he can read and locate your area of interest.

Imagine the difference, from the user’s point of view, with a page that did not have a table of contents: the user would have to move it down with the mouselocating and identifying each relevant area of content.

If the user scrolls down the page too quickly, they might not find what they are looking for, returning to the Google search page and leaving us with a visit with short length of stay.

Therefore, a table of contents, well designed and organized (later we will see how to do it), Improves user experience when it arrives at our website, with the consequent impact on organic positioning.

Structure of a table of contents

Let us now see what elements a table of contents contains or can contain and what each of them consists of:

Table of Contents Header. Although a table of contents is visually identifiable, it is convenient to add a distinctive and visible headerwith large and prominent letters, with clear text such as “Table of contents”, “Index of contents” or similar.
Hide/Show the table of contents. Most plugins allow you to add a link next to the table of contents header, which shows or hides it.
In these cases, the table should always show by defaultwhen loading the web page, to avoid the user having to press it.

Still, this feature doesn’t really provide any utility: if the user wants to query the table again, he would have to click that link again.
List of the main sections of the content. Similar to a book, the post or page is organized into sections (chapters), each with its own header.
The table of contents contains the text of these headersas the anchor text of the internal link that leads directly to the start of that section.
List of the sections of each main section. When the post or page is long enough (more than 2,000 words, like this very article we are reading), some sections may contain several sections.
If the post is well organized, each section will deal with a very specific topic and it will have a header, so including this header, with its direct internal link, will be very useful for the user to get directly to what they are interested in.
Graphic or visual elements. The table of contents can be “dressed up” with images or graphic bullet points. In general, they are not recommended, they can visually overload the table of contents, they can confuse the user and they do not provide any information.
Traditional bullet points, such as bullet points or hyphens, are more than enough to organize the information in the table of contents.

How to design a table of contents?

Identification and highlight design
must always be at the beginning
It should always be shown by default
No more than two levels of nesting

How to create and add tables of contents in WordPress

It’s time to put into practice everything we’ve learned and see how to insert a table of contents in our posts and pages in WordPress.

Tables of contents with HTML

We can insert the table of contents ourselves as part of the HTML content of the post or page, using the following HTML tags:

to generate the unenumerated list that will contain the entries with the headings of the sections and paragraphs.
which contains each of the table of contents entries.
to include the internal link to the point in the post where the section or section corresponding to that entry begins.
which we will place in the header of each section or section, and which will form part of the internal link in the table of contents.

The following video shows an example of how to use these HTML tags with a post in WordPress:

Tables of contents with plugins

Editing the HTML code ourselves to create the table of contents allows us to have full control over its display and layout.

However, as it is an almost mechanical task, it can be tedious and prone to transcription errors.

WordPress has a wide collection of plugins that generate the tables of contents for us, without the need to edit HTML or be careful with the correct writing of links and headers, just install and configure them properly.

The following video shows how to install and configure the “Easy Table of Contents” plugin, one of the most used and with multiple customization options for our website:

How to organize a table of contents: good practices

As we have seen, the concept of a table of contents is very simple and, at first glance, very easy to create. However, this apparent ease hides the main purpose of a table of contents: to be useful.

It is useless to have a table of contents if a user consults it and does not clearly understand its entries (that is, the headings of each section and paragraph) or, when following its links, the text does not correspond to what he expected to find.

This and other considerations that we will see below are critical so that inserting a table of contents is not a mere technical formalism (easy to solve, on the other hand), but rather provide usefulness to the user and don’t feel frustrated or even more lost when using it.

So, to organize and create a useful table of contents, we must follow these guidelines:

Have a good structure of the information contained in the postorganized logically and coherently in sections and these, in turn, in paragraphs.
A table of contents in which the information of two sections or sections overlap would confuse the user, who would not know which of those sections or sections to go to.
A table of contents makes sense and is useful when the text of the post or page is quite high. Posts that are less than 1000 words or less than two screens will have a table of contents with two or three links at most and do not add anything to the user experience, since you can almost see the article at a glance.
It would be like having a table of contents for a two page brochure.
The text of the headers of the sections and paragraph must faithfully represent its content. Although it may seem obvious, who hasn’t ever followed a link in a table of contents and found information that doesn’t match the header?
The same care that we put to optimize the headings for SEO, we must put them so that they represent the content of the corresponding section or section
Avoid sections and paragraphs with less than 100-150 words (2-3 paragraphs) and more than 300-400 words (6-7 paragraphs) of plain text.
If they are too short, seeing a screen in which the headings stand out more than the actual text confuses the user: too many headings attract their attention.

If they are very long, it can make it difficult for the user to read and understand them, and we should consider subdividing that section or section.
If the table of contents is very short (three or fewer entries) or very long (more than 20-25 entries), consider review content structure of the text.
If the article is very short, a table of contents is useless (as we have seen in a previous point), but if it is long, we should check that we are not mixing concepts within the same section or section.

Similarly, if the table of contents is very large, we should ask ourselves if we could combine similar sections or regroup the sections in another way.
try to have less than 7-8 main sections Y less than 7-8 paragraphs per section. On the one hand, because with so many sections and sections, there is a greater chance that your information will overlap and, on the other hand, simply because of usability: too many sections or sections can confuse or intimidate the user.

Advantages of using tables of contents in WordPress

We already know what a table of contents is and how it should be organized, but apart from the fact that it is useful to the user (which in itself is reason enough), does using tables of contents provide any additional advantage?

In fact, there are several advantages that we will obtain by…