Table of Contents TOC Plugins CSS HTML
SEO

Create a Table of Contents Using HTML/CSS: TOC Without Plugins

Creating a Table of Contents (TOC) using HTML/CSS instead of plugins will help improve site speed, enrich user experience and possibly help you earn search snippets.

All posts and pages with long form content and several headings should be organized with a (TOC) Table of Contents. Creating a list of headings, sections and topics allows the user to find answers more quickly and efficiently.  Instead of scrolling through thousands of words scanning for an answer they can click on a TOC heading and auto-scroll directly to a topics they are interested in.

Google has put a big emphasis on user experience (UX) and having a structured TOC helps improve UX scores measured by Google algorithms. However, Google also makes it clear how important page speed is for search engine optimization (SEO). Balancing WordPress functionality, user experience and page speed can be a tricky situation.

As a general rule, I personally favor page speed first since over half of my traffic comes from mobile sources. Keeping your plugin count to a minimum will help keep load times fast and reduce the server load – especially important for people using shared hosting.

In this post I will demonstrate how table of contents plugins affect your website speed and how you can create a TOC without affecting page size and load time.

 

 

1. Page Speed Using a Table of Contents Plugin

Easy Table of Contents Load Time

I tested the most popular TOC plugin, Easy Table of Contents on a WordPress post for speed optimization using GTMetrix.com and this is what I found…

  • Full Loaded Time – Increased by .30-.40 seconds
  • HTTP Requests – Increased by 8 requests
  • Total Page Size – Increased by 15KB

When people use a specific plugin they justify the page load time increase by thinking, “its only a fraction of a second.” While this is absolutely true it fails to take into account the use of multiple plugins.

Lets assume the average WordPress user installs 10-15 plugins and each plugin increases load time by an average of  .20 seconds – that gives us a range of 2-3 seconds.

Page load times don’t just increase on posts and pages where the TOC is embedded either. Javascript and css files are requested on pages that don’t even use a table of contents. The homepage from the above post page example had an increased number of requests (2 requests) and an increased page load time (increased by .20 seconds). This is due to several additional CSS files being loaded.

 

2. Creating a Manual Table of Contents Using HTML

If you have a lot of posts (hundreds) then going back and creating a TOC for each article would be time consuming. In that case the additional .20-.30 seconds of load time could probably be justified. If you are starting out from scratch then I believe manual TOC implementation is the best option.

Lets take a look at the HTML input and output. The raw code below copied and pasted into your WordPress “text” editor results in the table of contents shown underneath it. You can use the example table below as a template for your own posts and pages using copy & paste, being sure to customize the titles to your own content.

I do not include H1 tags in my TOC, only H2, H3,H4, H5, H6 heading tags. Each page should have only one H1 tag so that Google knows exactly what the main topic is.

<h2>Table of Contents</h2>

<a href="#Put H2 Heading Here">1. Put H2 Heading Here</a>
<a href="#Put H2 Heading Here">2. Put H2 Heading Here</a> 
<a href="#Put H2 Heading Here">3. Put H2 Heading Here</a> 
<a style="margin-left: 2rem;" href="#H3 Sub-Heading">3.1. H3 Sub-Heading</a> 
<a style="margin-left: 2rem;" href="#H3 Sub-Heading">3.2. H3 Sub-Heading</a>

Copying the above code results in a TOC that looks like this…

Table of Contents

1. Put H2 Heading Here
2. Put H2 Heading Here
3. Put H2 Heading Here
3.1. Put H3 Sub-Heading Here
3.2. Put H3 Sub-Heading Here

3. Linking Each Heading To Your Table Of Contents

Anchoring your table of contents entries to each header section allows the viewer to navigate to a specific topic quickly. This improves overall user experience, allowing the user to find answers faster. This is especially true with long form content where the user might have to scroll to the bottom of the article for the specific niche topic they want to read about.

 

4. Anchor Headings To The TOC

The final step in creating your plugin free table of contents is anchoring the TOC entry to each specific heading. You can copy and paste the following code substituting your specific titles.

<h2 id="1. Put H2 Heading Here">1. Put H2 Heading Here</h2>

 

5. Customize the Table of Contents Style

Blending the table of contents in with your websites color scheme and style is also important. This can be accomplished by adjusting or adding CSS. You can inject the code into your style.css or custom.css files or use a plugin if you don’t feel comfortable with CSS.

Customizing your TOC involves adjusting both the HTML and CSS. Your wordpress post editor has a “visual” and “text” tab, displaying the visual output and the raw code and text respectively. To edit your html you will need to be in the “text” editor tab – but first lets create some custom CSS to style our TOC.

 

5.1 Customizing the CSS Code

You will need to add this CSS code to your main stylesheet or child theme sheet – style.css or custom.css. You can adjust elements like width to 50% or “auto” for example. You can change the background color to better match your color scheme by adjusting the hex color # to something else. Changing the font, border, alignment and padding to compliment your site is also important.

#toc_container {
background: #CEFFCE;
border: 1px solid #006400;
display: table;
font-size: 100%;
margin-bottom: 1em;
padding: 25px;
width: 100%;
}

.toc_title {
font-weight: 700;
text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
list-style: outside none none !important;
}

 

5.2 Customize the HTML

<div id="toc_container"a>
***PLACE YOUR HTML TABLE CODE HERE***
</diva>

This is the resulting output of the custom CSS & HTML. You can adjust the width, color, border, padding and alignment.

 

When you create sub-headings (3.1) in the table of contents you might want to change the indentation. You can adjust margin-left by changing the “2rem” to an input you like. Be sure to make the main heading a H2 and the sub heading a H3.

 

6. Using Easy Table of Contents Plugin

If you absolutely cannot figure out how to create a table of contents using HTML & CSS method, WordPress will create one automatically for you with a TOC plugin. I recommend Easy Table of Contents for its easy installation and configuration.

As I demonstrated earlier, the javascript  used with this plugin will load on every single page on your website, slowing load time by .20-.30 seconds. Keep in mind that using too many plugins will eventually slow your website down dramatically.

 

Using a table of contents is not only good for UX, but also search engine optimization (SEO). Niche headings within a broad page topic can get a snippet from Google through the use of a table of contents. This is a potential SEO hack that could give your otherwise unlisted article a boost from Google.

Using long form content on a broad search, then addressing a specific topic in depth within the article often gets rewarded by Google when the correct headings and table of contents are used. Help Google algorithms better index your content with a TOC.

Google Jump To Snippet

This is what your search results look like when Google adds a “Jump To” link before the meta description. Jump to sections search results provide an added SEO boost by providing a blue link inside the meta description, where as other search engines like Bing and Yahoo don’t offer this.

 

8. Testing Your Table of Contents

One problem encountered when anchoring your TOC to a specific heading is called “overshoot”. After clicking on a table of contents heading our browsers (Chromse, Firefox etc) will auto scroll to the heading you anchored to – but sometimes they go past the desired header.

Overshoot happens in two common circumstances; sticky headers and sections with images.

Modern wordpress themes have the option for “sticky” headers. That means as the user scrolls down your page the header & menu remain fixed at the top of the page instead of disappearing.  This becomes a problem when anchoring TOC headings.
The user will click and be directed to the anchored header, only it is hidden behind your sticky header. The same general issue exists for images used below headings. If you have overshoot issues you should use the code below instead of the one given earlier in the article.

 

<h2><a style="position: relative; top: -35px;" name="Heading Here"></a>Heading Here</h2>
Garage Door Guide Cal
Hello, I’m Cal – owner of TitanWP.com    

I write tutorials about wordpress, speed, SEO and marketing, With over a decade of experience I’ve learned a lot and I’d like to share my knowledge with you.

Leave a Reply

Your email address will not be published. Required fields are marked *