What is a table of contents?
On a web page, a table of contents (TOC) is a short list of the page's sections in which every entry is a link to that section. Clicking one scrolls the page instead of loading another. The entries are called jump links, anchor links or in-page links.
It differs from an HTML sitemap, which lists the pages of a whole site. A table of contents never leaves the page it is on.
How jump links work
A jump link is a link whose address is only a fragment: a # and a name.
- The link:
<a href="#pricing">Pricing</a> - Its target:
<h2 id="pricing">Pricing</h2>
The browser looks for the element whose id equals the fragment and scrolls to it. If no element has that id, the click does nothing. An id has to be unique within the page and cannot contain spaces.
Add the fragment to the page's full address, as in example.com/plans/#pricing, and the same jump works from another page, an email or a bookmark.
Example
A 4,000-word guide to renting a van has five H2 sections. Its table of contents reads:
- Which size you need
- What the daily rate leaves out
- Insurance and the excess
- Collecting the van
- Returning it
A reader who only wants to know about insurance taps the third line and is there. Without the list they scroll, guess, and may give up.
What it means for search
Search engines treat the entries as links with descriptive text pointing at named parts of a page. Google sometimes displays a few such section links beneath a result, and may send a searcher straight to a section. It chooses when; a table of contents makes that possible and does not make it happen.
It is not a ranking factor, and a short page gains nothing from one. The entries are only as informative as the headings they copy, so the first job is a clear heading outline with a single H1.
In WordPress
By hand: set an HTML anchor on each Heading block (under Advanced) and link a list to those anchors. That is dependable for one page and tedious for fifty.
Hydrogen SEO has a Table of Contents block and a [hydrogen_seo_toc] shortcode from version 0.0.31. They list the post's H2 and H3 headings by default, add an id to listed headings that lack one, and load no JavaScript; see table of contents block and shortcode. For pages outside WordPress, the free table of contents generator builds the list from pasted HTML or Markdown.
Common mistakes
- Links with no matching id. The list looks right and nothing scrolls.
- The same id twice. The browser stops at the first one.
- Every heading level included. A list as long as the article is no shortcut.
- Ids that change when a heading is reworded. Old links to the section then land at the top of the page. Fix the id by hand for sections people link to.
- A sticky header covering the target.
scroll-margin-topon headings moves the landing point down.
Common questions
Are jump links and anchor links the same thing?
Yes. Both mean a link to a place within a page, written as a # followed by the id of the element to scroll to.
Does a table of contents count as internal linking?
Its links are internal, but they point within one page. They help readers and describe the page's sections; they do not replace links between pages.
Should every post have a table of contents?
No. It suits long pages with several distinct sections. On short posts it only pushes the content down.