This article explains the benefits of adding a TOC and the easiest way of doing it, both for Gutenberg pages and for Elementor Pages.
As this article was written using Elementor,
This is how the Elementor TOC looks It is done with the Qi Elementor Addon.
User Experience
User Experience is always improved with more structured site and page navigation.
A TOC ( Table of Contents ) is only really necessary for long posts with many sub-sections. It enables the reader to scan and jump directly to what he or she is interested in.
Google's SEO View of the Page
It will almost certainly improve bounce rate which is definitely a Google rank factor.
The organization of your post can be clearly seen. The Hub and Spokes approach is best for any post, it keeps things tidy and easy to follow.
Google’s crawler bots will also be able to follow complex pages more easily.
Google’s advice for ranking well, includes using TOC’s, and as it is so simple – use one!
The Article Writers Perspective
By activating the TOC, before you finish writing the article, you will be able to see the TOC develop.
It is a relatively simple piece of software that works hierarchically. So headlines with lower ‘rank’ will be indented further.
You will immediately be able to spot if your article is not following a logical path, looking at the TOC.
In both cases below ( Gutenberg and Elementor ) the post should be updated first to make the TOC update.
Choose Your Plugin Wisely
The Table of Contents should be self-updating, that is to say, no user intervention is needed to compose each entry or the links within the entry.
Although there is a simple manual way to make these TOC’s, using HTML unordered lists, I would avoid doing it that way as it is open to all sorts of problems and just takes way too much time to update and test.
How to Add a TOC on Gutenberg Pages
For my Gutenberg pages, I chose the TOC+ plugin.
It is simple to set up, in fact, if ALL your posts need a TOC, no setup at all is needed! However, as I said above, I only add one if it is a long-ish post with many subheadings.
The options I chose for this blog are more or less default, position above first heading and show when 4+ headings are present .
Set the color as required, text wrap on or off. Clicking the Advanced tab in the settings brings up more options. One of which I would argue really should be in the main settings – How deep should TOC+ look in the headings hierarchy and display.
You can mark exactly which you want H2 to H6. For example for very long posts, go the whole way to H6, but for shorter posts just accept H2 to H3, that way the Contents block size isn’t overpowering
How to add a TOC on Elementor Pages
For my Elementor page TOC I chose the Qi Elementor Addons, only activating the bottom section with the TOC widget. The other widgets I may use at some future point, but to minimize memory use/ code bloat, I only activated what I needed.
To use, just drag and drop the widget into the space, style as with any other Elementor unit. ( ideally match the Elementor and Gutenberg colors on your blog )
The resulting TOC for this page is shown at the top.
