Table of contents graphic

TOC Even When No Content

Table Of Contents

Introducing In-Page Table Of Contents (TOC)

Creating a good Table Of Contents (TOC) is vital to any website that needs long reference pages. I will show you how to make long pages easier to navigate for your visitors. This is vital for good visitor experience, but it also helps search engines understand your page, because a TOC has to have structure.

Before I go on to describe the structure and advantages of a TOC, I should stress that the following techniques apply to all websites, not just WordPress.

Usual Table Of Contents Structure

Wherever possible, I recommend that you break large articles into a series of smaller articles, and have a Table Of Contents page. This article is about a TOC within a page, which should be used sparingly.

Generally speaking, pages should be about a single topic. This will often link to one or two other topics, but any more than three topics becomes cumbersome.

Your visitors may be unsure what your page is about, and the search engines are unlikely to follow the structure, so you may miss out on search results listings. Following the Shrewdies tradition, we focus on visitors, then include relevant factors for search engines. Remember, you are writing for visitors, not search engines, but the search engine is your funnel to attract visitors, so you have to encourage search results that attract the right visitors.

What we are really doing when using TOC within a page is condensing a group of hierarchical pages into a single page. So, I could create a series of pages describing the webmaster role with the topics of preparation, deployment and improvement on separate pages. The webmaster role page has a summary of each topic, with links to each topic page, and topic pages link back to the webmaster role subject page.

In that scenario, we have an in-depth description of the webmaster role spread across four pages of content. Pages such as these, on a specific topic should rarely be above 1000 words. Internet readers rarely enjoy pages over 1000 words. We have 3 pages that are focused on specific topics that should reflect what potential visitors are searching for. The webmaster role page is effectively a Table Of Contents for those essential topic pages. Visitors know where they are, and the search engines are happy.

TOC In-Page Structure

Occasionally, we need to write an article that summarizes a wide subject. I have deliberately simplified the Table Of Contents scenario because the topics I named above are really subjects in their own right. An extended summary page can be useful to give visitors a good overview. We can include appropriate hints that much more can be found in each topic area.

The problem with overviews is that they can become vague. If you do not believe me, write a 2000 word summary of what a website is. Experienced writers can often do this well, but most people new to Internet publishing will produce many paragraphs of text that easily loses visitors attention. We get round that by adopting the Table Of Contents page hierarchy into a TOC structured page.

Table of contents graphic

Table Of Contents (TOC) Structure

The shrewd way to do this is to create topic headings with an identity for each of our topics, then create a TOC at the top linking to those pages. If you are new to WordPress editing, you will probably be using the Visual Editor. We can most of the writing, but the final styling requires the freedom of the HTML editor. The best approach is to:

  1. Type in your headings using the Heading 2 paragraph style (under the kitchen sink).
  2. Type your introduction and topic text.
  3. Type your topic headings into a list just after your introduction heading.
  4. Highlight each heading in turn, and click the link button. Unlike your usual link selection from the list, or copying an external URL, you will add a unique in-page link reference. It is a word preceded by #. You can use any reference you like, but short names based on the topic heading is best. You can use hyphens or underscores for readability if you like. The reference must be unique within the page, but you can use the same references on other pages if you like. The URL field should not include the http text that is displayed by default – replace it with #your-topic. The Title can be blank, or your creative best, and make sure the Open link in a new window/tab is clear then click Add Link.
  5. Switch to HTML mode, then change each <h2> tag that starts your headings to <h2 id="your-topic">

There you have it – In-Page TOC the shrewd way. Can we do better?

TOC: Next Steps

One significant visitor benefit missing from many in-page tables of content, is the ability to return to the table of contents. This allows you to move from section to section, as you would expect to move from topic pages back to the table of contents page. I’m sure that you can see how this is done, but if not, please see the source of this page.

A final point to note, as you will see when you View Source, you have to take additional care where you use a TOC on a WordPress Post compared with a WordPress Page. This only applies if the <!--more--> tag interrupts the paths to the topics. All will appear OK when you view as a full page, and this is good when you are writing your page and testing the links in Preview. However, once you publish, the TOC before your <!--more--> tag will lose the link target. You fix this by pasting the full URL for your newly published page into the links immediately before the #topic-name.

If you still need help after viewing the source of this page, please ask in the Webmaster Forum.