HTML Table of Contents Generator

Screen Shot 2017 12 28 at 20.41.32

A few weeks ago I needed a simple Table of Contents that did not use plugins or Javascript.

I needed just a simple bit of HTML and CSS that I could manually add to posts. I could have used a plugin, but I didn’t want excess javascript files loading on every page of the site.

This guide will show you how to add a table of contents to your WordPress posts. Particularly useful for guides, FAQ pages or any long form content marketing on a budget.

It’s really easy to implement, you just need tiny bit of HTML & CSS knowledge and the ability to copy and paste.

What is a Table of Contents?

A table of contents ( or TOC), is a list found on a page before the start of the main content. The table will show the different section title with a clickable link that will jump you to the relevant subheading.

Why is the table of contents important?

People skim when reading on the web. Think about when you read a large block of content. You scan for headlines. I know I do. So make it easy for readers and just give them the headlines. This way they can’t miss what they are looking for by scrolling past it.

This is where a table of contents comes in.

There’s this small site that ranks for a few terms (ranks #1 for about 56% of searches). I think it’s called Wikipedia.

HTML Table of Contents Example

Here are some examples of Wikipedias ToCs in the wild:

pasted image 0

Notice there’s a table of contents on every single page. I’m not saying this is the sole reason for Wikipedia’s success. But it wouldn’t be there if it wasn’t providing users value.

Table of Contents & SEO

It’s easy to see how a TOC can improve user experience. But can it improve SEO?

This is a loaded question. And one that’s impossible to answer as it depends so much on the site, niche, competition etc.

What can be said, is that including long tail keywords in the TOC can result in sitelinks in the SERPs:

pasted image 0 2

You don’t need to include the entire long tail, Google’s algorithm is clever, it knows what the subheadings refer to within the context of the page.

What’s more, Google likes data in tables and often uses this data for the featured snippet.

Regardless of whether or not having a table of contents improves rankings, you should use them because they help users navigate long content better. Ignore Google. Focus on your readers.

How to generate your own table of contents

Follow the instructions below to generate your own TOC for WordPress.

[Or save yourself some time and download my html table of contents template.]

The generator is made up of two bits:

The CSS Bit

First, you need to add some CSS to your wordpress site so it will style the actual table bit at the start of your content:

If you are using the Genesis Framework (which I strongly recommend) you can just go to the built-in CSS module and paste in the code.

Alternatively, you can add the CSS code into your theme’s stylesheet file. If you are not sure how to do this, avoid breaking anything and use a CSS plugin like Simple CSS to inject CSS code without altering any of your core files. The good thing about this method is if you aren’t that comfortable with CSS, it’s quite easy to remove if things go wrong.

The HTML Bit

Now that the CSS code is in place, you can use HTML code  to create a ToC in any page. You are basically making a list of links that are in the page.

The code is made up of two bits:

  • The table of contents (controlled by OUTPUT 1) – these are the TOC links that will appear at the top of your page.
  • The titles (controlled by OUTPUT 2) – these are the title anchors for the table links.

Go to the post you want to add a table to. Copy the subheadings you want to include in your table of contents. Paste these into the TITLE column.

Note: under the HEADING column is a red box. This will automatically change your HTML code for H2 title tags. Personally, I use H2 tags for my subheadings. But you can use any. Change the tag in the red box and the code will automatically update. 👍

Once you’ve added your titles, the rest of the code you will populate in OUTPUT 1 and OUTPUT 2.

Copy this code and paste it into your post where you want the TOC to display:

Now copy the code from the OUTPUT 1 column and paste it over: >>>PASTE OUTPUT 1 HERE<<< This is what the finished HTML table looks like:

You should now have a table of contents. Click on preview to make sure it is showing. To make the links actually take you to the relevant sections, it’s time for some copying and pasting.

Are you sitting comfortably? Good, because now it’s time to copy the code for each heading and replace your post headings with it. It’s a bit tedious but it doesn’t take that long really.

Once you’ve done this, check that the links take you to the right section.

You are now the proud owner of a table of contents.

[Steal my HTML ToC Generator Google Sheet here.]