How to Create Table of Content Without Plugin and Get Featured Snippets in SERPS

You know google loves fast loading websites and one thing you can do to make your website load faster is to use only those plugins which you only need the most. Plugins can add extra http requests and JavaScript files even when you might be not needing them, that hits the page speed without reason.

To show you this I am taking a simple example of Table of Content Plus WordPress plugin.

You can see the extra http request created by TOC plugin in front of arrow in the above image.

Plugins like Table of Content Plus and Thrive Content Builder which makes the life easier as they creates the table of content for you automatically detecting the headings in content and also provides hide and show feature.

But there are other factors also:

  • What if I want more customization, TOC plugin creates a table of only headings that it finds in the content but what if I want to include a content link to some bold text or a button element which is not heading.
  • Table of Content Plus has not been updated from past two years and not everyone wants all the features of content builders, many of us still want to keep our blog simple and fast and loved by google.

Google Snippets Through Manually Created TOC

You can create Table of Content for both long (above 3000 words) and short content (below 1000 words) and still get featured in google “jump to” and “list snippets”, I will show you both scenarios.

Let’s take an example: Type in google search “best DSLR camera under 30000” you will see two results like below with the google snippets.

List Snippet

 

Jump to Snippet

Now the benefit of these links are that it increases the click through rate for your website plus it also reduces the bounce rate in a way, suppose a user only wanted to check the specific part of your website let’s say here in the above “jump to” image he mainly wanted to check Nikon D3400 in comparison to other cameras so he clicks on the Nikon D3400 “jump to” link and directly lands on Nikon D3400 section of the page instead of just getting lost in the large content page, and you may know if the user does not find what he is looking for in less than 5 sec, he may hit the back button and we don’t want to give google pogo-stick signals.

When you click that best DSLR camera under 30000 from google results you will come to know that those “jump to” snippets are coming from that page’s table of content.

You can use the plugins also for automatically creating table of content if you already have large number of articles on your website but here I am going to build the table of content manually as my client site is a newer website and have only few articles on his website so it will require less effort to go back and edit the article manually as per required customization plus as I said in the beginning less http requests help website load faster.

Creating Table of Content Manually

It is very simple, there are only two steps involved.

Step 1:

First, is to create list of links for Different sections of your content.

Divide your content into list. (You don’t necessarily have to divide the content on the basis of headings or subheading you can link your list points to any para or any other HTML element like button or any set of images etc.)

In our example of TOC looks like this.

Now let’s see the HTML behind it.

Code

<h2 id=”Best DSLR Camera Under 30000 Rs”>Best DSLR Cameras Under 30000 Rs in India</h2>

<div style=”background: #f9f9f9 none repeat scroll 0 0; margin-bottom: 20px; padding: 20px;”>

<ol>

<li><a href=”#Nikon D3500 B07GWKDLGT”>Nikon D3500: 24.1MP, 11AF points, 1550 shots, 395g, 18-55mm – Best DSLR Camera Under 30000 Rs</a>

<ul>

<li><a href=”#what makes the D3500 a good buy”>What makes the D3500 a good buy?</a></li>

<li><a href=”#Designed with the starters in mind”>Designed with the starters in mind</a></li>

<li><a href=”#Nikon D3500 Video Performance and Images”>Nikon D3300 Video Performance and Sample Images</a></li>

<li><a href=”#95% Field of View”>95% Field of View</a></li>

<li><a href=”#Additional Special Effects”>Additional Special Effects</a></li>

<li><a href=”#D3300 Pros and Cons”>Pros and Cons</a></li>

</ul>

</li>

<li><a href=”#Canon 1500D B07BS4TJ43″>Canon 1500D: 24.1MP, 9AF points, 500 shots, 475g, 18-55mm</a>

<ul>

<li><a href=”#Body Design and Handling”>Body Design and Handling</a></li>

<li><a href=”#Manual Mode”>Manual Controls plus an Auto Mode</a></li>

<li><a href=”#Easily accessible Control Layout”>Easily accessible Control Layout</a></li>

<li><a href=”#Image and Video Quality”>Image and Video Quality with Sample Images</a></li>

<li><a href=”#Pros and Cons”>Pros and Cons</a></li>

</ul>

</li>

<li><a href=”#Nikon D3400″>Nikon D3400: 24.1MP, 11AF points, 1200 shots, 395g, 18-55mm</a>

<ul>

<li><a href=”#Body Design and Handling”>Body Design and Handling</a></li>

<li><a href=”#Manual Mode”>Manual Controls plus an Auto Mode</a></li>

<li><a href=”#Easily accessible Control Layout”>Easily accessible Control Layout</a></li>

<li><a href=”#Image and Video Quality”>Image and Video Quality with Sample Images</a></li>

<li><a href=”#Pros and Cons”>Pros and Cons</a></li>

</ul>

</li>

<li><a href=”#Canon 3000D”>Canon EOS 3000D: 18MP, 9AF points, 500 shots, 436g, 18-55mm</a></li>

<li><a href=”#Canon 1300D”>Canon EOS 1300D: 18MP, 9AF points, 500 shots, 485g, 18-55mm</a>

<ul>

<li><a href=”#Design and Handling”>Design and Handling</a></li>

<li><a href=”#Manual and Auto Modes”>Manual and Auto Modes</a></li>

<li><a href=”#Performance”>Performance with Sample Images</a></li>

<li><a href=”#How good is its videos”>How good is its videos? </a></li>

<li><a href=”#Built-in Wi-Fi and NFC”>Built-in Wi-Fi and NFC</a></li>

<li><a href=”#1300D Pros and Cons”>Pros and Cons</a></li>

</ul>

</li>

<li><a href=”#Conclusion”>Conclusion</a></li>

</ol>

</div>

You can paste the above HTML code in your WordPress text editor.

Step 2:

Second, is to give an Id to the html elements of those section of your content.

I want my first link (of Nikon D3500) in TOC to Jump to this “Nikon D3500 – Best DSLR Camera under 30000” h2 heading section shown in the below screenshot.

So, I will give the same ID as in TOC link of Nikon D3500 to this heading, HTML behind shown below.

”Code”

<h2 id=”Nikon D3500 B07GWKDLGT”>NIkon D3500 – Best DSLR Camera under 30000</h2>

And this is it, you only need to do this, so at end for our first TOC link and ID will look like this below.

”Code”

<a href=”#Nikon D3500 B07GWKDLGT”>Nikon D3500: 24.1MP, 11AF points, 1550 shots, 395g, 18-55mm – Best DSLR Camera Under 30000 Rs</a>

<h2 id=”Nikon D3500 B07GWKDLGT”>NIkon D3500 – Best DSLR Camera under 30000</h2>

You can do the same for all other links in TOC and can link to any HTML element in your content with ID.

Note: The ID should be same as the name you give in your href attribute after # symbol like above it is “Nikon D3500 B07GWKDLGT”

Tips for getting “Jump to Links” Snippets

  1. “Jump to” snippets mainly appear in google SERPS when the content is long (2000 words and above).
  2. Table of content directly below the H1 or H2 heading tag.
  3. Create sub-points of your points in your table of content (i.e. list under the list).
    Like this one.
    And this one also.
  4. Make your points lengthy.
  5. Put your targeted Keyword in the Heading above list or in any of the points of the list or in the content around list to let the google clearly and quickly know what’s the list about.

Tips for getting “List Snippets”

You can get List Type of Snippet for both long and short contents

  1. Table of content directly below the H1 or H2 heading tag.
  2. (Optional) Create sub-points of your points in your table of content (i.e. list under the list).
  3. Include more than 8 points in your list.
  4. Make your points of more than 8 words length limit.
  5. Targeted keyword in the heading of Table or in any of the points of the list or in the content around list to let the google clearly and quickly know what’s the list about.

Author’s Bio:

Anirudh is a SEO Analyst at Skcamera.com, His journey started 5 years back when he left his job and switched from engineering to digital marketing realizing the growing power of digital marketing. In his spare time he likes to write poetry. You can find him here.
https://www.facebook.com/skcamera1306/
And on his website https://skcamera.com/

Leave a Reply

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