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

Time needed: 30 minutes.

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>
    <ol>
    <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>
    </ol>
    </div>

  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 header tags (h2-h6). So for this post, we’re using:

    <div class=”mytoc”>
    <p>Table of contents</p>
    <ol>
    <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>
    </ol>
    </div>

  3. Add anchors to each area you want the ToC links to jump to

    The anchor you’ll use is:

    <a id=”anchor-1″></a>

    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 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) https://wptechs.net/toc-post-html.txt

2 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,
    Eddie

    • 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 🙂

Leave a Comment