SEO Tip #3: Table Of Contents

A lot of people have asked about ToC plugins lately so we’re going to talk about a much faster, lightweight alternative using html Anchor links in your posts. This will be much better for your pagespeed while still providing the functionality sought after by those ToC plugins, here’s the ToC we’re going to build in this post using basic html and css:

Why a Table of Contents?

A ToC does two things really well:
#1 as a user experience enhancer it helps visitors skip to content they specifically want to see.
#2 it can help increase the chance of getting a featured snippet or search features, when we search Google for “low carb diet” see these search features enabled by a Table of Content:

search features
healthline got search features enabled for their post, those links below their search result jump directly to that section on their post!

ToC Plugin or Nah?

Most ToC plugins available in the WP repository are pretty lightweight ranging around 500KB in size, they load fairly small styles and scripts too, however, why load more scripts and stylesheets on your site when the majority of your posts won’t even need it? We can manually add a ToC to any individual post for less than 1KB, and no plugin to maintain nor extra javascript or stylesheets to load – MUCH more efficient, and pretty easy too!

Build your ToC

3 steps to add a table of content to a post:

1.) Switch to html mode on your post and add your ToC code:
If you’re using gutenberg you can just add a “custom html” block. Wherever in your post you want the ToC to appear, paste this to get started:

<div class="mytoc">
<p>Table of contents</p>
<li><a href="#anchor-1">linked text goes here for item 1</a></li>
<li><a href="#anchor-2">linked text goes here for item 2 </a></li>

2.) Customize the code to fit your post.
You can use anything to describe the link/section of the post, we suggest you use your heading tags (h2-h6). So for this post, we’re using:

<div class="mytoc">
<p>Table of contents</p>
<li><a href="#anchor-1">Why a Table of Contents?</a></li>
<li><a href="#anchor-2">ToC Plugin or Nah?</a></li>
<li><a href="#anchor-3">DIY a ToC</a></li>
<li><a href="#anchor-4">Customize your ToC</a></li>

3.) Add anchors to each area you want the ToC links to jump to.
Adjusting the id to match each of the links in your Toc, so for this post each of our headers look like this in html view:

<h2><a id="anchor-1"></a>Why a Table of Contents?</h2>
<h2><a id="anchor-2"></a>ToC Plugin or Nah?</h2>
<h2><a id="anchor-3"></a>Build your ToC</h2>
<h2><a id="anchor-4"></a>Customize your ToC</h2>

You could also format them like this:

<h2 id="anchor-1">Why a Table of Contents?</h2>
<h2 id="anchor-2">ToC Plugin or Nah?</h2>
<h2 id="anchor-3">Build your ToC</h2>
<h2 id="anchor-4">Customize your ToC</h2>

You can see all we changed was this:
<h2>Why a Table of Contents?</h2>
To this:
<h2><a id=”anchor-1″></a>Why a Table of Contents?</h2>

If using Gutenberg, you can just click your headings and use the sidebar option to add the anchor id:

gutenberg anchor

Customize your ToC

Alright, so now you’ve added a basic Table of Contents to your post and it should link up to the headings in your post, for us our ToC now looks like this:

basic table of contents before customizing
Doesn’t look very fancy does it?

Styling this ToC is easy! We just need to add a little CSS (dun dun DUNNN!). If you have FTP and are comfortable with using it, then you can add the CSS directly to your theme’s style.css, otherwise just use the easy and safe WP Customizer that’s part of WordPress:

wp customizer for custom css
Customizer is accessible from wp-admin at Appearance > Customize

Once you open the WP Customizer go to “Additional CSS”:

Here’s the CSS we added to customize this ToC:

.mytoc {background-color: #f8f9fa; padding: 10px; border: dashed 1px #000;}

To get a different background color, just change the background-color in the CSS, we used #f8f9fa but you can use any color. Maybe you want a smaller box that doesn’t stretch out so much, you can adjust the line of CSS to something like this:

.mytoc {background-color: #f8f9fa; padding: 10px; border: dashed 1px #000; width:50%; min-width:300px;}

Now our ToC only takes up 50% of the content area (and maintains a minimum width of 300px so it looks good on mobile):

Well now that’s better 🙂

We can manipulate the css to style the ToC box any way you like, it’s very easy. Want a solid border? Just change the border from “dashed” to “solid”, want to change the color of the border? Just change the border color from “#000” to whatever you like – it’s one simple line of css that can control most of the styled properties of the contents of the ToC box.

DIY ToC Summary

This post might seem a bit long or difficult with so many steps, but really it’s a very simple process. Once your CSS is added all future posts will only need the code in step 1 (the ToC box), then add the anchor id to each heading you want the links to jump to, very easy 🙂

See This Post’s HTML (Gutenberg formatted)

Katie’s Special ToC

If you want a nested ToC for a long/complicated post, you’ll need to make a few adjustments to your base code from above, but it’s still very easy. First, I’ll show how to do it by just plopping in some text “headings” to split the list, then I’ll show how to make an actual nested list.

The ToC with text-separated sections:

<div class="mytoc">
<p class="mytoctitle">Table of contents</p>
<p class="mytocsection">Section 1</p>
<li><a href="#anchor-1">Why a Table of Contents?</a></li>
<li><a href="#anchor-2">ToC Plugin or Nah?</a></li>
<li><a href="#anchor-3">Build your ToC</a></li>
<p class="mytocsection">Section 2</p>
<li><a href="#anchor-4">Customize your ToC</a></li>
<li><a href="#anchor-5">DIY ToC Summary</a></li>

My newly adjusted CSS for WP Customizer as well:

/*my ToC css */
.mytoc {background-color: #f8f9fa; padding: 10px; border: dashed 1px #000; width:50%; min-width:300px;margin-bottom:20px;}
.mytoctitle {font-size:26px; font-weight:700;}
.mytocsection {font-size:22px; font-weight:700;}
.mytoc p {margin: 0;}
/*my ToC css */

And this is the result:

The ToC with nested lists:

<div class="mytoc">
<p class="mytoctitle">Table of contents</p>
<li><a href="#anchor-1">Why a Table of Contents?</a></li>
<li><a href="#anchor-2">ToC Plugin or Nah?</a></li>
    <li><a href="#anchor-3">Build your ToC</a></li>
    <li><a href="#anchor-4">Customize your ToC</a></li>
<li><a href="#anchor-5">DIY ToC Summary</a></li>

This is just literally making another <ol> (ordered list) within another ordered list, the result:

10 thoughts on “SEO Tip #3: Table Of Contents”

  1. Hello,
    Thank you for this amazing article!
    I also want to add a ToC in my posts but I would like to skip the option, of adding a plugin to my WP theme.
    By adding the code manually is more fun and educating.
    The only thing that concerns me is that I am not using Gutenberg and I would like to place the ToC on my sidebar.
    Perhaps, would you be so kind to share some thoughts of how this can be done?
    Again, thank you for this unique post.
    Warmest wishes,

    • Hey Eddie,
      Unless you’re hyperlinking to pages/posts with anchors in those pages/posts, I wouldn’t recommend adding the ToC in your sidebar. The reason is that the sidebar is a sitewide area, so to add a normal post-specific ToC would mean it only worked on that one page/post and was useless for the rest of the site. If you were linking to a full URL with an anchor attached then it would at least be functional sitewide in this case, but unlikely to work after the first click (after having already landed on that page/post, after that initial click the ToC will likely not work without additional logic).

      Now you could use something like Widget Options to force a ToC in the sidebar to only show on the relevant post/pages they were needed on – that might be a good option for that need (using Widget Options to hide a text widget that contained your ToC, for example)… This might get a bit confusing for managing your sidebar in wp-admin if you end up building very many ToC’s though @[email protected]

      As for not using Gutenberg, that’s completely fine, you can add the ToC code into the Classic editor using the html/text mode, for a sidebar widget you can use a basic text widget and switch it to the html/text mode as well.

      Without knowing anything about your site I would just default to my standard K.I.S.S. protocol and use the basic ToC on pages/posts as-needed, but depending on your specific needs maybe the sidebar makes sense, in that case it will be trickier to implement, but still doable. Hope any of this jumble of words helps in some way, and thanks for reading the article 🙂

  2. Nice Article,

    This is exactly what I’m trying to do, but I’m wondering, how does Google know, this is a table of content? Does the crawler just search for hash href=”#…” links or is there some sort of HTML attribute we need to put, to tell it what the table represents?

    • Yes for the purposes of the SERP search feature Google recognizes the anchor links and uses them without any additional schema/markup, just plain old simple html 🙂

  3. Hi WPTechs !
    I dont thing google bot recognize it as a ToC just cause theres anchor # in your html. I myself use a main menu (header and footer too) with a few anchors, and i havnt any ToC in my Serp.

  4. Hello,
    thank you for this nice article.

    I use per plugin generated TOC on my WordPress site on selected pages since a few weeks. But I am not sure, if it is good for SEO, to include TOC.


    Because my articles and pages was optimized for special keywords. Now, when I added TOC into that, pages are “overoptimized”. Keywords occur to many times, because the are additionaly in TOC on the same page. Now, many analytic tools show much lower SEO score as before.

    What du you thing about it?

    It seems for me, that TOC is not good for that reasons.
    It is needed to include keywords in headings for better SEO ranking. But when TOC is added, then all this keywords occur twice. And this is to much.

    So I think, it is better not to use TOC than to have overoptimized pages.

    Page example with overoptimization due to TOC:

    Thank you,

    • Overoptimization, especially in headings, is a very important consideration. Luckily our ToC here is just using a simple list with anchor links, intelligent search engines will understand this to be a ToC and most likely not use the verbiage in it as a ranking metric… That being said, I would only recommend a ToC for lengthy posts where a ToC is likely to be of great benefit to the visitor to help them quickly find content. To that end, regardless of whether it is “keyword spamming” or not, it is far more important to write for the best user-experience of the visitor, even if that means breaking some seo-best-practices.

      For your specific post example, I’d say you could skip the subsections (h3’s) and just use the main heading sections (your h2’s). That would reduce any potential keyword spam, while still being a useful tool for your visitors.

  5. Thank you for posting! I was curious if I was missing something by coding out my ToC by hand and why so many were recommending plugins…looks like they don’t do anything special and I’m saving on page speed by coding it out myself.

    Appreicate it!


Leave a Comment