How to Create a Clickable Table of Contents to Increase Traffic
By: Shinichi Okada
Tags: Anchor, Table Of Contents, HTML, Accessibility, UX

How to Create a Clickable Table of Contents to Increase Traffic

Improving User Experience With Attractive TOC

Photo by Ryoji Iwata on Unsplash

Why Is the Table of Contents (TOC) Important?

Do you want to increase the chance that people find your article?

Add an attractive table of content!

I’m not an experienced writer but my articles are getting pretty good traction. Is that because I’m a good writer? No, absolutely not, I know that! Then I wondered why.

Of course, you need good content, but I always added a TOC in my articles.

The TOC serves many purposes:

❀ It gives users an overview of the document’s contents and organization and what they are getting from your content.

❀ If you provide a clickable TOC, it allows readers to go directly to a specific section of your content.

❀ I’m not an SEO guru, but a simple search shows you that your TOC improves the search ranking.

I will show you how to add an attractive TOC to your article.

Let’s start making your TOC. In this article, Return and Enter key are synonymous.

Update (2020–10–29)

There is a Chrome extension called TOC Medium.

How to add a Table of Contents using TOC Medium

After adding the table of contents, you can wrap it using three backticks as you see in this article.

Bullet Styles

You can use a dash, - , or numbers to create a list. If you use Return, the line height is higher than a list created with SHIFT + Return.

Unordered list using the Return key. Image by the author.

Ordered list using numbers and the Return key. Image by the author.

Unordered list using ∙ and SHIFT+Return key. Image by the author.

I prefer SHIFT + Enter because it takes up less space. Also, it allows you to use symbols or emojis you want. ★, π, 👽, 💩.

Emoji Bullet

You can use an emoji for the bullet points as you can see I used 🍒 in my TOC.

How about 🍕 or 🍰 for your cooking article?

How about 🖌 or 📗 for your writing tip article?

How about 💕 or 💔 for your relationship article?

How about programming language icons for your tech articles. You can find icons here and here.

TOC with emoji bullets. Image by the author.

How to create a clickable link

Let’s add a link to your list.

IMPORTANT

This won’t work when you are editing the article. It will work after you publish the article. So you need to check if it works once you have published your article.

In the Chrome browser, open the Developer Tool Console by going to View → Developer → Developer Tool.

Developer Tools in Chrome Browser. Image by the author.

You will see a new window at the bottom of your browser. It is called a developer console or browser console. It is something like this:

Developer tool. Image by the author.

Now you need to click the far left icon in the console as you see in the above image (red arrow).

When you select an element on the page, it will highlight the code in the console.

In the following gif, can you see a blue line in the console when I highlighted Content 1? That line has name="4faf" .

Please note that your number will be different.

Finding id of a header. Image by the author.

You are going to use this 4faf for the link. We need to prefix it with # .

You need to highlight the TOC list and add the link #f062 . This link is called an anchor link. An anchor link is a web link that allows users to leapfrog to a specific point on a website page.

Adding an anchor (link) to a TOC list. Image by the author.

You need to complete all of your lists.

Link to Top

You can extend this to add a link to the top.

🍒 To TOP

This is an anchor link to the top of the page. This will improve the user experience in your article. I also used the same emoji as the TOC.

Conclusion

I suggest adding the TOC when you have completed your article.

Making TOC is easy and user-friendly from the user’s point of view.

You can use this for your blog.

I hope you are inspired to use TOC in your articles and have fun.

If you have any questions, please add it in the comment. I will be happy to help.

Newsletter