In this article, I will show you how to use the new Rank Math Table of Contents block. We will look at adding Rank Math’s TOC block to individual posts as well as customization options.
Rank Math makes it easy to add a Table of Contents block to your article without any hassle. The TOC block lets you create an index or table of contents on long-form pages and posts. This makes it easier for readers to scan through your post and quickly find the pertinent headings without having to scroll.
When I switched from Yoast to RankMath, one of the features that I requested was the inclusion of a Table of Contents within the plugin. The table of contents block was a useful feature that many publishers had been waiting for, and now it has finally been released by the Rank Math team.
With the release of RankMath version 1.0.104, you can now include a table of contents block in your articles. This new feature will get rid of the need for the separate WordPress plugin that many publishers were using to show the TOC in each post.
The TOC blocks by Rank Math are available for both free and paid users of the plugin. You just need to update the plugin to the latest version to use this Rank Math TOC feature. The TOC block should work independently of any WordPress theme that you are using.
Here is the explanation for anyone wondering why they should use the table of contents: Including a table of contents on your site’s posts allows you to see the structure of long posts and helps with Search Engine Optimization (SEO). This addition will improve the user experience by allowing the readers to quickly navigate to relevant sections of your post without having to scroll.
Also Read: Enable the SEO Reports in Rank Math Plugin
How to Use Rank Math Table of Contents
I will now go through the steps that show how you can use the Rank Math table of contents block in your posts and pages. You’ll learn how to add a new Rank Math TOC block and customize it to suit your needs.
Step 1: Install and Activate RankMath Plugin
To make use of the table of contents feature by Rank Math, you must download and install the Rank Math SEO plugin from the WordPress repository. In case you’re using another SEO plugin such as Yoast or AIO SEO, Rank Math can migrate the data from these plugins without any hassle. If you’ve got existing Table of Contents blocks from Yoast/AIO SEO and decide to migrate to Rank Math SEO, the plugin handles it in a breeze. If you have already done this step, jump to the next step.
Step 2: Add RankMath Table of Contents Block
To add the RankMath table of contents block, you can choose an existing post or create a new one. Navigate to your post/page editing screen where you wish to add the table of contents. In the post-editing screen, click the “+” icon and locate the Table of Contents by Rank Math block.
Once you’ve added the Rank Math TOC block, add a title for your table of contents. You can add a title such as Table of Contents, In this Post, etc. Next, the Rank Math will automatically generate TOC from the post’s content.
If the post or page doesn’t have any content, you can still add the TOC block. However, the table of contents will show headings only when you add more content with proper headings.
The Rank Math TOC block will automatically identify the headings on the page and adds them to your table of contents, linking to the corresponding sections within your post or page. The order of headings will be sequential, meaning H2, H3, H4, H5, H6.
If you use different heading tags (say H2, H3, and H4), lower-level headings will be indented to show the structure of your content. For instance, if you start with an H2 heading block and then add an H3 to an H4 below it, these will get incrementally nested and added as subheadings, as shown below.
When you add the TOC block to a post or page, the Rank Math automatically includes the SiteNavigationElement Schema for the headings. From the below screenshot, we see the SiteNavigationElement added for a post, and you can verify this when you test your structured data via Schema.org.
Global Options for Table of Contents Block
Before we look into the customization options provided by TOC block, I need to show you the global options that you configure for Rank Math table of contents plugin.
To customize the TOC Block settings, navigate to Rank Math > General Settings > Blocks, as shown in the below screenshot. If you don’t see the “Blocks” option here, you must switch to the Advanced Mode of RankMath and enable the Schema (structured data) module.
You will find the following global options that you can configure for the TOC blocks:
- Table of Contents Title: Enter the default title to use for the Table of Contents block. You can always override this default title on a post level.
- Table of Contents List Style: Choose how you want to display the headings within the TOC block. The options include: None, Numbered, and Unordered.
- Exclude Table of Contents Headings: Here you can choose the headings to exclude from the Table of Contents block. I recommend not to configure this because you can manage it for individual post via the TOC block settings.
How to Customize Rank Math TOC Block
Now that you know how to add the TOC block to an individual post or page, let’s explore the customization options. The Rank Math Table of Contents Block provides several options to help you customize the table of contents to suit your needs.
Edit the Headings in TOC Block
Usually, when you change one of a post’s headings, the TOC block updates the heading within the block. The best part of Rank Math TOC is that you can edit the headings directly from the TOC block. This is useful when you notice that the specific title is too long or too short.
Hide Individual Headings in the TOC Block
When you have multiple headings in a post or a page, the TOC block displays the headings in a sequential order. The Rank Math plugin allows you to hide individual headings from the TOC block, taking customization to the next level.
To hide headings in the TOC block, click the eye icon next to the headings. This will now hide the heading in the table of contents block and not be displayed to visitors. For example, in the below screenshot, the top-most heading is hidden in the block.
Alignment Options for Headings in TOC Block
When you have multiple headings within a TOC block, you can align them to a specific position. The Align option basically sets the alignment for the table of contents. The following alignment options are available for the table of contents block:
- None
- Align left
- Align center
- Align right
- Wide width
- Full width
List Style Options for Rank Math TOC Block Headings
On WordPress, the list style options are available for unordered lists. The Rank Math’s TOC block includes support for the List option that lets you choose a list style for your table of contents. You can choose a bulleted or numbered list style for your table of contents, or you can choose none if you do not want to set any list style.
Set Background Color for TOC Block
With the Rank Math TOC block, you can customize the text color and set a background color. You can choose the color for the text and background separately. The color options are useful if you want to style the TOC block and assign a color that suits the site background.
To change the background color of a TOC block, select it and look for the Color options on the right-hand side. You can select Background and either set a solid color or go with the gradient color options. Thanks to Rank Math for providing the prebuilt gradient options to quickly choose from.
If you wish to customize the background color further, click on the control points that control the color on the left and right and add the hexadecimal code of the color. You can also adjust the angle of the color as per your preference.
If you wish to set the default text color and background color for a TOC block, select the three vertical dots next to Color and select Reset all. This will reset the custom defined text and background colors to default for a TOC block.
Adjust the Typography for TOC Block
For almost every block on WordPress, you get to adjust the typography. Typography here means the size of the text that is displayed within the TOC block. When you select the Rank Math TOC block, under the Typography section, you can set a custom font size and line height for headings. You can choose from the available sizes like Small, Medium, Large, Extra Large, and XXL. You can use the up and down arrows to increment or decrement the line height.
Configure the Dimensions for Table of Contents Block
For an individual TOC block, you can add padding and margin with the help of dimensions. The padding controls the spaces inside the block, and the margin controls the spacing outside it.
Final Thoughts
The goal of this article was to introduce the Rank Math table of contents block and explain the customization options. If you are using a TOC plugin from a WordPress repository, you can move away from these third-party plugins and start using Rank Math’s Table of Content block. From my personal experience, adding the TOC block and customizing it is super easy, and thanks to Rank Math for adding this feature. Some of the features that I find missing and would like to see in the upcoming updates are:
- Option to Enable smooth scroll to ID.
- Enable collapsible content per TOC block: Not all visitors need to scroll through the TOC, it can be displayed as a collapsible block.
- Option to start the TOC collapsed: This option is available with other TOC plugins.
- Specify Icons for TOC headings: It would be nice to set an icon for headings.
