An on-page table of contents lists the main headings of a long article or guide, each linked to its section with an anchor. It shows readers the shape of the page before they commit, lets them skip to the answer they came for, and gives search engines a compact outline of the topics the page covers.
When a table of contents earns its place
Long guides, documentation, comparison pages and glossaries benefit most. If a page has fewer than four or five sections, or is short enough to scan in a few seconds, a table of contents is clutter.
A useful test: would a returning reader want to jump straight to one section? If so, give them the links.
How it works technically
Each heading gets an id attribute, and the table of contents links to it with a fragment URL. Many CMSs and static site tools can generate this automatically from the H2s and H3s.
<nav aria-label="On this page">
<ol>
<li><a href="#setup">Setup</a></li>
<li><a href="#pricing">Pricing</a></li>
</ol>
</nav>
...
<h2 id="setup">Setup</h2>Search benefits
Google sometimes shows links to sections of a page in its results, labeled with the heading text, and clean anchors with clear headings make that possible. There is no guarantee it will appear. The more reliable benefit is that a visible outline forces clear, descriptive headings, which helps readers and anything that parses the page, AI systems included.
Example
A setup guide that answered three audiences
Hypothetical SSO vendor Brightquay had one long guide covering Okta, Azure AD and Google Workspace. Each admin only cared about one provider. A table of contents at the top with a link per provider let each reader skip the other two thirds of the page, and the section anchors became the links support staff pasted into tickets.
Common mistakes
Listing every H3 and H4
A table of contents with thirty entries is as hard to scan as the page. Usually H2s, and sometimes H3s, are enough.
Hiding it behind a script that crawlers cannot run
If the list is built only in client-side JavaScript after interaction, crawlers may never see it. Render it in the HTML.
Questions
On long pages a sticky sidebar version is helpful on desktop. On mobile, a collapsible list at the top usually works better than something that covers the text.
