Make it better-Learn how to add content tables to your WordPress posts and pages (No HTML needed)

Disclosure (full version here): Some of the links you’ll encounter are affiliate links. If you click and buy something, I may get a commission. Thank you! 

 Offering long-form content on your site is the way to go.How to create and add content tables in WordPress posts and pages

You give a tonne of value; build your authority; extend your expertise.

You even get an opportunity or two to promote something you believe in.

It doesn’t get much better than that, right?

Except that it could.

SO much better!

And it’s so easy to do your reading eyes won’t believe it.

You need to make your long piece an example of a GREAT user experience.

In other words:

Add a table of content (TOC) to it.

Do it now and make both the users and search engines happy.

In this article you will learn:

  • The secret SEO benefits of using a content table plugin
  • How to create and add tables of content to your posts/pages (click here to go there right away)
  • Bonus(es)- they’re secret; an they’re awesome; what else can I tell you?

Ready to learn more?

Let’s go!

Amazing benefits of adding content tables to your posts and pages


Everything you can gain falls under two categories:

  • User Experience Benefits (UX)
  • SEO benefits

We’ll start with the user experience gains (there are 2 of them).

Content Outline- What? Where? Here and now; and on a silver plate no less


People reading online are in a hurry. When they stop by your website, it’s for a reason.

No, they didn’t visit to say hello. Or because they like you. They’re there because they have a problem and need a solution.

And you have it.

So how about making that crystal clear?

Do it with a TOC at the beginning of the article. They outline and deconstruct your content and show folks how they can go about reading it.

Will they devour the whole piece? Or will they jump ahead?

No matter, as long as it’s useful.

Tables of content in WordPress save time- Click and go.
Tables of content are like Swedish Tables. You get to pick what you want. And no food is forced down your throat, EVER!

That’s the right way to treat your guests.

It shows you aren’t desperate to keep them on your table for as long as possible. And it shows you’re really trying to feed them by providing nutritious meals. 😀

Feed your guests. Don't starve, and don't stuff them. #blogger etiquette Click To Tweet

This “unusual” treatment turns the common (often grumpy) visitor into a satisfied reader.

And when folks are happy with you- guess what? They trust you more.

And guess what?

When they think you’re genuine, you CAN afford to have affiliate links within the content. And you CAN create eye-catching buttons hoping that the good-humored people will click on them. 

Especially if the product you promote ties in nicely with the problem they’re having.

It’s simple- It’s a win-win.

Content Table Saves Precious Time


Clickable anchors make up the bulk of any content table… and these internal links help people go exactly where they want without having to look for it.

This makes for a huge time-saver (a big deal in this information-abundant age)

Next time folks need help they’ll jump directly to your site because they’ll remember how you’ve shown you value their most precious possession- their time.

And over time this effect compounds and these repeat visitors become the most valuable part of your online business.

Bottom line

Unleashing this simple plugin on your posts and pages can build up a lot of good equity with your readers. And this in turn can boost your revenue like you wouldn’t believe it.

WordPress content tables  also help with brand building and SEO

Which is what I’ll cover next.

Push your SEO to new levels with plugins (sounds weird- but it’s true)


TOC’s are an easy way to boost your SEO because they give you both direct and indirect value.

But first?

What are direct and indirect SEO benefits?

Good question. I’m glad you asked 😛 

Direct SEO benefits are changes you make today that have an impact tomorrow.

For example:

Keyword in the first hundred words.

According to Ahrefs, it’s a minuscule ranking factor. The one unlikely to push that ranking needle… unless you’re targeting a low competition keyword.

In that case just gracing your opening paragraph with your target words can put you in Google’s grace. 😀

It’s a direct effect and happens right away (or very quickly).

keyword in the first hundred words helps with rankings

Indirect SEO benefits are:

You change something today, something else happens tomorrow, and THEN you get an SEO benefit the day after tomorrow.

For example:

You spice up your meta description, make it  snappier and more action-oriented. This attracts more clicks to your post. Over time this increased activity causes Google to reward you with a higher SERP position.

And where do content tables fit into this?

They improve your SEO by improving user experience signals that Google (and especially its machine-learning software- RankBrain) pay so much attention to.

Let’s break the down real quick!

a) Decreased pogo sticking and increased dwell time (direct)


Pogo sticking- the bane of every honest webmaster. They fear it more than the devil.

What is it?

It’s when people click on your result in the SERP’s, and then click right back. This tells Google, “these results suck”

So they drop you like a stone.

Google de-ranks website with lots of pogo sticking
Source

Content tables minimize this effect because they outline the article and give folks a chance to click.

And once they do, they’re pulled in the middle and… that clock is always ticking.

Once 1m passes, dwell time kicks in.

What is it?

Dwell time is the time visitor spends on your site .

If they spend more than a minute- good.

More than two – great!

So you get a boost from Google for that page and that keyword. And this process is repeated across your entire site. For every page/post (with TOC) and for every keyword.

So imagine the effect on your SEO, and in extension, on your affiliate earnings.

I propose a metaphor.

Little clump of show starts rolling of a steep hill.

The thing you get at the base is?

(Is there even a base? Or is it a horizon?)

😉

b) Lower bounce rate (direct)


Bounce rate is the percentage of people who visit your site and then leave after having visited only one page.

SEO’s disagree whether this is a ranking factor.

I say it doesn’t matter.

Why?

Because – and forget SEO for a moment; you want people to spend more time on your site, regardless of SEO.

And content table helps you with that.

How?

Internal links. You probably have them on every article on your site, right? I mean why wouldn’t you?

They:

They’re super useful but… useless unless clicked on.

TOC draws people in so they can find your little links.

Like this:

Getting your internal links clicked helps you in two ways:

  • It increases your overall dwell time, which is another metric Google tracks
  • It exposes your content to people who could potentially link to/ share it in the future

So really, by having content tables at the beginning of your longer posts and pages, you’re playing the long game of white hat SEO, and not only that;

you’re winning at it too 😉

c) Affiliate sales (direct)


This is not an SEO benefit but it’s definitely a good one (you agree?).

Just like with internal links. More people that see your affiliate links»more they click»more money you earn.

Simple.

Are you blown away yet with the usefulness of the simple content table?

And we’re not done yet!

d) Improved CTR (indirect)


Google takes the anchors (links) of your content table and shows them as part of your result in the SERPs.

It’s called Google Sitelinks. Think of it as a type of enhanced rich snippet.

And this special treatment from Google causes you to have a higher than normal CTR.

I will give you two examples:

First: I noticed recently that my site ranks on the first page for the term “siterubix site speed”

This term of course comes from my review of  SiteRubix Free Site Builder. And if you look closely, you’ll see that under my listing there’s a small “update 4. SiteSpeed“link.

That’s a sitelink generated from my content table and also a way for Google to quickly get YOU where you want to go.

Second:

Take a look what comes up when I search for “Coffee Arabica” in Google:

Sitelinks in Google's result for term "coffee Arabica)

First result is obviously Wikipedia. They rank because of their awesome content and huge authority. Below their listing you can see four little links:

  • Biology
  • Distribution and habitat
  • Cultivation and use
  • Strains

These are pulled from their TOC.

Now:

Let’s imagine for a moment that this result was on the fifth position.

According to research, fifth listings get around 4.4 percent of clicks, but I’m willing to bet that Wikipedia’s rich result would get more, maybe 10% maybe even 12%, who knows.

The point is that this higher-than-average CTR would gradually cause the page to jump higher. And this increase is just based on CTR as a metric.

There’s a caveat to this though:

Google doesn’t always show sitelinks.

It’s pretty random and you can’t order them to do it. But you can influence, and now you know how.

Note– Notice on the image how second listing (illiy.com) doesn’t have sitelinks. Then again, that’s not the only thing they’re missing 🙂

(Hint: maybe someone should sent them this article?)

🙂

Bottom line

Content table shows people they CAN get  what they need.

And that YOUR listing has “it”.

People click more and good things start to happen and compound.

You might say all of this is crazy. I disagree.

It’s brilliant. 🙂

People staying is good, people reading is excellence-make it so! Click To Tweet

e) Keyword-rich anchors push relevance (Hypothetical SEO gain)


Content table is a list of links based on the post headers. Do you agree?

Yes?

And you concur that those headings are usually keyword-rich?

Good.

And we know that properly used heading tags signal relevance to Google and still have some SEO value.

Now, it’s my theory (meaning I haven’t read this anywhere- a concoction of my mind) that those links actually help Google understand what parts of the page are about, and from there- what the whole page is about.

Thus you get an easy relevance boost.

Care for an example?

Some of the headers for this post are:

  • SEO benefits of adding content tables to your posts and pages
  • How to create and add a table of content in WordPress?
  • How to add tables of content to your sidebar. And how to make them float?

Don’t you think that they tell Google my post is about:

  • Easy SEO gains content tables bring.
  • How to make content tables in WordPress
  • How to add them to your sidebar, and sticky sidebar no less!

I do. I’m certain of it, though I might be wrong. But also, no one can disprove me since no one knows for sure…

Ah, the true beauty of SEO.

😀

Boost your article's relevance with keyword-rich content table links- it's an easy way to higher rankings. Click To Tweet

How to create and add a table of content In WordPress Post/Page (guide)?


At the time I first got the idea for this post and when I did my research, I noticed that every tutorial uses “Table of Contents Plus” and touts it as “the best”.

I wanted to follow suit but then I noticed it is severely outdated.

Outdated plugin

Normally that isn’t a deal breaker, but then I stumbled upon Easy Table of Contents.

I chose it because it’s:

Here’s how to set it up:

Note– It’s hard to explain in words alone, so I’ll use lots of images. If you find something confusing, just remember- images are your friends.

Also, this plugin has way too-developed back end.

You don’t need all those settings!

I think there are like 50 boxes to check/uncheck. I will focus on the crucial functions you need to make the TOC you can be proud of.

First, install and activate the plugin through the WordPress dashboard.

 The best content table for WordPress- easy table of content

Then click Settings»Table of Contents

Now:

  • Enable support– I chose pages and posts. This means a table will be created on all pages and posts that are suitable (depends on the number of subheads).
  • Auto Insert– Posts and Pages (rich in content ).
  • Position– Before the first heading. This tucks it in nicely between the blog post title (H1 tag) and first subhead. I like it so because it gives me space to open the article with a good introduction.

How to set up table of content plugin?

  • Show when- Define the number of subheadings needed for the table to be created. I suggest at least four. Anything less and it would be redundant. You don’t ever see a 300-word post with a table of content- or you shouldn’t. (If you do- report it to redundancy police 😀 )
  • Display header label– I leave it off because it makes my table look cleaner. If you check it, it will say something obvious like “Table of Content”.
  • Show as a hierarchy– Check it because it matches the logical structure of your blog post. People have an inherent need to follow the trail of breadcrumbs to reach a conclusion- make them happy.
  • Counter– I leave it at decimal because numbers are universally appealing and recognizable.

content tables. how to set them up

 

These were basic options you need to have a functional and beautiful table of contents.

You DON’t need to do anything else.

However, there’s some advance stuff worth tinkering with (very easy, I promise)

Custom Theme

I think default settings are fine for any site, but this adds a nice touch to your tables.

I suggest you use your brand’s colors if you decide to change anything. I did and you can see it in my TOC’s (hint– my brand colors are Neil Patel orange and Microsoft link blue).

 use brand colors when designing your WordPress table of content

Headings

You can set headings you want to be included in the table of contents.

Here’s the criterion I follow.

I divide my posts in h2 and h3 headings and want them all to be included in my table of content.

It’s because h2’s give  a big picture on what I want to talk about, while h3’s break it down with several paragraphs of stand-alone information each.

And this awesome feat warrants a place in the table.  🙂

You can exclude your “lesser” headings (in my case h4) if they contain little info (maybe just one short paragraph).

Choose headers to be included in your table of content
My theme looks better with h3 and h4 headers- Improvisation is the name of this game.

Phew! That’s it.

Now that you you know how to create and add a content tables to your WordPress posts and pages- my work here is done.

Or is it?

Create a table of content in your WordPress post or a page- it's easy and the benefits are mind-boggling. Click To Tweet

Bonus tip #1- How to add tables of content to your sidebar, and how to make it stick (floating content tables)
Table of content widget comes with the plugin


I promised you bonuses, didn’t I?

I recommend always having the content table at the beginning of the post.

It’s because… Oh, you already know why? I refuse to repeat what I already said (takes you to the top)!

But perhaps you want it in your sidebar as well so that it can scroll down as you scroll down?

Here’s how:

Remember that plugin I said you should install (Easy Table of Content)?

Well, with it you get an extra TOC widget you can use.

So go to Appearance»Widgets and add TOC to the sidebar

And you’re done.

Really, that’s it.

Now whichever post has a content table will also have it in the sidebar.

How to make it scroll with you (floating sidebar content table) ?

Scrolling content tables are great for increasing engagement. It’s because people won’t have to monotonously scroll up. They can just click and off they go.

You need another plugin for this. Go back to the WordPress plugin repository and install/activate the Q2W3 Fixed widget.

And that’s it. Of course, there are setting to tinker it but you don’t need them at all.

Instead, return to Appearance»Widget and click on the content table you added.

Now you’ll see “Fixed widget” option appeared below. Click save and you’re done.

Q2W3 fixed widget - select and content table will stick as you scroll
Simple!

Bonus Tip #2- Explode Your User Engagement With This Simple Plugin


Imagine it!

How fast; how easy;

how convenient it would be!

What?

If you could, instead of laboriously scrolling back and forth on a long post, click once and be instantly propelled to the top.

Then you’d just click on another anchor and instantly be transported to wherever you really want to go (courtesy of content tables)

But why imagine?

Make it so!

Introducing WPFront Scroll Top

This plugin is:

  • Free
  • Updated
  • Easy to use

And here’s how:

Install and activate the plugin. Then head over to your main WordPress dashboard and click on Settings»WPFront.

You’ll have to set it up, but be warned: it has way too many setting and you can fine-tune it to an insane degree.

You don’t need to bother with most of it.

Here I’ll show you how to get the basic settings right so it performs at its best AND remains simple to use for an average webmaster.

  • Click Enable– Obviously.
  • Scroll Offset– This tells it when to appear. It’s set to 100px by default which is a very small value. My setting is 3000px and this makes it appear around the third of my post.
  • Auto Hide– I leave it disabled because I don’t think the blue arrow is neither obtrusive nor distracting.

scroll top settings

  • Hide on Small Devices– Yes, because of the folks who browse the web from their phones. It’s better UX for them.
  • Button Style– Image. I chose a blue arrow because blue is easy on the eyes and the arrow pointing up is self-explanatory
  • Location– Bottom right. The most logical place for it.

Setting for WPfront plugin

There you go. Simple isn’t it?

I think I’ll keep this plugin and use it for my site.

Notice a certain blue arrow somewhere?

Don't let folks be bored by scrolling all the way to the top. Let them go there at once with WP Scroll- they'll thank you for it. Click To Tweet

Bonus tip #3- How to make content tables on free sites and web 2.0 (Tumblr;WordPress; Blogger…)


Free websites are awesome for beginners to take their blogging baby steps.

They get free hosting, security and updates.  And they don’t have to worry about themes, plugins, and a bunch of other stuff too.

It’s perfect and…

“Wait a minute, no plugins”!?

Sadly, yes.

Free sites, while overall a positive experience,  limit what you can do with them, including installing new plugins.

“So if I can’t use a plugin to create my content table… then what? No content table at all”?

Yes, I mean No!

We’ll be using jump links instead.

Before you ask…

Jump links are simply links on the page that, when clicked on, take you to another part of that page. So they’re similar to content table links, except that they can be a one-man team and scattered across the page.

For example, this is a jump link. And if you click it, it’ll take you to the beginning of this article. So tread carefully.

I got the idea from Brian Dean. I noticed that in one of his guides he used jump links to create a makeshift table of contents.

Table of content made of jump links

As you can see- it’s doesn’t look as fancy as when you make it with a plugin. But for free sites and web 2.0 they’re all we’ve got…

So let’s make them work!

How to create page jumps in WordPress  (a mini tutorial)

To make a jump link you need to insert two pieces of code into your post’s HTML editor.

One where you give a unique name to the link you’re creating:

<a href="#unique-name">Your Link Text</a>

And the other where you set the target on the page:

<a name="unique-name">Target Text</a>

And that’s really it.

It looks complicated at first, but it’s easy and if you have questions, shoot them in the comment section below (this is a jump link). But not before you’ve read the next part.

It is here that all your questions will be answered,

I promise.

Content table made of jump links- an example

I’m going to use my Tumblr sister site, and specifically this blog post. It’s a story of how I was able to get a followed link from Moz.com (DA 90) simply by being part of their community.

Now, that post isn’t very long, a must for content tables to make sense. But it’ll do for demonstration purposes.

Also:

I already made the table so as to prevent you having to plow thorough my clumsy writing and possibly falling asleep.

I admit it- I’m not comfortable writing anything related to using HTML, so this was precaution on my part.

What you’ll see now took a lot of time to write…

First, here’s how the table looks:

Content table from page jumps on my Tumblr blog

And here’st the code in the back-end:

Tumblr back-end

I know- it’s a mess.

But look what happens when I go CTRL+F and type “#”

<a href=”#unique-name”>Your Link Text</a>

Unique name code

And here’s is how the other part of the code looks:

<a name=”unique-name”>Target Text</a>

Second code line in my Tumblr back-end

And that’s really all there is to it. 

This method works but it’s not the most elegant. For example the code behind Tumblr is hell, and it takes ample time and focus to make a table this way.

Also, notice then when you click on on the table anchor, it open in new tab.

I don’t like that, but don’t know how to change.

If you do, leave me a comment, and I’ll credit you with a (nofollow) link.

Grace your free site or Web 2.0 with a content table- courtesy of page jumps! Click To Tweet

Conclusion- Table of content+WordPress Pages and Posts (a match made in heaven)


There you go, friend.

I hope you realize by now how useful having a table of content is. And how easy they are to make.

Now you really have no excuse not to use them.

And if you start right away I know you’ll be pleasantly surprised with the results.

I’m sure you’ll reap more than a handful of benefits.

In fact, they might be more than a lapful (I invented the word), so you won’t be able to carry it all, and you’ll have to hire help to manage. 🙂

If you have a question- feel free to leave a comment below.

Also, if you want to recommend another plugin, I am curious. Is there one better than Easy Table of Contents?

But remember– it must be updated and can’t be theme-exclusive. I want everyone to be able to use it.

Thank you for reading and have a nice day,

Also, check out Wealthy Affiliate if you have the chance. You’ll be surprised.

16 Comments

Add a Comment

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