Adding a Table of Contents or on-page linking

Adding a Table of Contents or on-page linking

Question: If I want to have some key words at the top of an article, then when you click on the key word it jumps down to that spot within an article, is that called 'book marking'? and if so, can I do that on my site?

It's not too hard to build links internally within a page; and if you're thoughtful about your header hierarchy, it's super easy!

Creating a table of contents

On Performance Foundry's blog, we use the  Easy Table of Contents plugin to build content like this, our Best WordPress Hosting article:

This plugin will scan your page or post for header tags (like h2, h3) and automatically build the table of contents for you. At time of writing, the interface has default settings, then you activate the feature on a post-by-post basis:

*We have not seen this plugin on high-traffic sites, but on medium traffic, it has a negligible impact on performance.

Another popular plugin is Table of Contents Plus. We hesitate to recommend this plugin because it is no longer updated or supported by the author. As with any outdated plugin, this poses security risks and increases the likelihood that the plugin will cause problems on your site as its code becomes increasingly obsolete over time.

Building your own links

Linking on a page isn't too hard to do manually either; and that's perfect for if you only use this kind of thing occasionally. No-one wants a plugin that only runs on one single page!

To build a link, switch into Text Editor mode on your WordPress Write Screen. You'll use the anchor code twice: once to build an anchor to link to; and another time to build your link.

To build the anchor:

Use the code like this to give your anchor point a name. It's clever to give it a semantically valuable name, so a search engine can understand what you're creating a link to. You don't need to add any content here, and you can add it just before the content.

 

To link to that section, you can use the standard anchor tag that you're used to. Just add a # before the name you created.

words go here

The end result will look a little like this:

This technique can be a bit time consuming, but is very simple and baked into the core of html and the web, so it's always going to be safe!

    • Related Articles

    • Is there a website or tool that shows what other websites are linking to your website?

      Question: Do you know if there is a website/tool that shows what other websites are linking to your website? The traffic sources as such? Or is it just Google Analytics? There are two different issues at play here: the inbound traffic is actually ...
    • Adding Performance Foundry to Google Analytics and Google Search Console

      When doing optimisation, or specific reports, we may need to get access to Google Analytics and/or Google Search Console.  In those cases, please follow the instructions below with these credentials: Google Analytics New User: ...
    • Performance Foundry affiliate programme

      We love it when people refer clients to us! If you tell someone about us, and they sign up for one of our services, we'd like to give you something back to say thanks. That's why we set up our affiliate programme. You'll get a $100 bonus for each new ...
    • What's included in my hour of development time?

      One of the major things that makes Performance Foundry different from other Managed WordPress hosts is that development time for small fixes and changes is included in your package. How much time do I get? Firstly, question-based support is ...
    • When and how to use redirects

      When a post or a page on your site changes its URL, you need to create a redirect rule from the Old URL to the New URL so that users can get to the content. Never use a WordPress plugin to redirect Redirecting with a plugin adds about 200% to the ...