How to Add a Table of Contents to WordPress: a Complete Guide to Improving Readability and SEO

Adding a table of contents to a long WordPress post not only improves readability but also enhances the overall structure of the site. A table of contents provides readers with clear navigation and helps them quickly locate the content they are interested in. In this post, we'll detail how to add a table of contents in WordPress manually or using a plugin to keep your posts well-organized and enhance user experience.

The Role and Importance of Catalogs

First, let's discuss why adding a table of contents to a WordPress post is crucial.

• Enhance readability: In long articles, readers may feel lost as to how to find the information they need. A table of contents guides users through clean navigation, helping them jump to relevant content quickly and improving readability.

• Better website aesthetics: a table of contents can make articles look more organized, improve the overall design and make readers feel that the content is clearly structured and professional.

• Increase user engagement: If users can easily find the content they care about, they are more likely to stay longer and read more content, thus increasing time on page and boosting user engagement.

• SEO Advantage: Search engine crawlers can crawl the various parts of an article more easily through a table of contents, which helps with SEO optimization. Search engines look at page structure as part of website optimization, and directories can help enhance the structure of a website.

How do I manually add a directory to WordPress?

The manual method is for users who prefer a more free and customized solution. The following describes how theClassic Editorrespond in singing Gutenberg EditorAdd the catalog manually in the

1, manually add the catalog in the classic editor

For those still using the Classic Editor, you can add a catalog by following these steps:

Step 1: Create a list of catalog titles at the top of the article

First, create a table of contents at the top of the article using a paragraph or list that lists all the article titles. This helps users easily navigate to the section they are interested in. You can manually enter the headings and make sure that each one matches the actual headings in the article content.

For example, you can enter the following in a paragraph block or list block:

• Title of Part I
• Title of Part II
• Title of Part III

Ensure that each header text is separated by aline break, making each item a separate line.

Step 2: Add HTML Anchor ID

Next, go through each title in the article and assign each title a unique HTML anchor ID, which is a location marker within the page that users will be directed to when they click on a link in the table of contents.

Need to switch totext editormanually add an id attribute to each heading in the HTML code. Manually add an id attribute to each heading in the HTML code.

For example, if your title is "How to Create a WordPress Website", you can add the following HTML code to it:

<h3 id="create-wordpress-website">How to Create a WordPress Website</h2>

This id attribute is unique and should not be repeated on the page.

Step 3: Convert to Anchor Link

HTML anchors for each title are set ID After that, return to the top directory listing and convert each title into an anchor link that can be clicked to jump.

In the Classic Editor'svisualizationmode, select a header text in the catalog and click "Link"Icons.

In the link box that pops up, enter the well number (#) with the corresponding anchor ID. e.g., for the title "How to Create a WordPress Website", can be entered:

<a href="#create-wordpress-site">How to Create a WordPress Website</a>

Remember, anchors need to be unique and relevant to the content of the title to ensure that users can jump accurately.

2. Add a catalog using blocks in the Gutenberg editor

The Gutenberg editor, which has been the default editor since WordPress 5.0, uses the block system to build posts. Here's how to add a table of contents to the Gutenberg editor.

Step 1: Create a List Block

First, click on the top left corner of the "+" icon, in the search box type "listings" (Catalogs do not have to be added using lists). Select the "List Block" and add it to the article. This block will serve as a table of contents for the article.

Step 2: Create Anchor Points

Create anchor points for each heading. Select the heading block and click on the "Advanced" option in the right hand column. In the "HTML Anchor" box, enter a custom anchor for the title. For example, if the title is "How to create a WordPress website", you can enter "create-wordpress-site".

Step 3: Add a link to the list block

Go back to the listings block and enter the name of the catalog item, such as "How to Create a WordPress Website". Select the text, click the link icon on the toolbar, and in the link box type "#create-wordpress-site". This will link the catalog item to an anchor in that section.

Step 4: Add More Catalog Entries

You can continue to add more headings and repeat the steps above, each time creating anchors for the new headings and linking them to the catalog.

Adding Directories to WordPress with Plugins

Using the LuckyWP Table of Contents plugin

LuckyWP Table of Contents is another powerful plugin for users who wish to have more control over their catalog style.

Step 1: Install the plug-in

As with other plugins, first search the plugin repository for the LuckyWP Table of Contents and install and activate it.

Step 2: Setting up the plug-in

After activation, go to "set up" > "LuckyWP Table of Contents", configure the display options according to your preferences, such as automatic insertion of the location of the directory, customizing the directory style, and so on.

Step 3: Manually or Automatically Add Catalogs

Optionally, you can have the plugin automatically insert a table of contents in all posts, or manually choose whether or not to add a table of contents in each post. The plugin can also exclude specific titles, and titles that you don't want to appear in the table of contents can be left out.

In the editor click on "+", add Table of Contents to automatically identify the page content to generate your catalog, click Read to view.

summarize

Adding a table of contents to your WordPress posts not only improves the user's reading experience, but also enhances the structure and professionalism of your website. Whether you add a table of contents manually or use a plugin to generate it automatically, it can bring significant optimization results to your website. With a table of contents, users are able to navigate through long-form content more quickly and easily, thus increasing their engagement and dwell time. What's more, a clear page structure also has a positive effect on SEO optimization.