How to build an automatic table of contents in a Blogger theme, a detailed step-by-step guide
A clickable table of contents is one of the elements that instantly makes a long article feel professional. This article teaches you how to add a table of contents generated automatically from your H2/H3 headings in a Blogger theme with BlogKub, from the start to uploading it live, along with the SEO reasoning and fixes for common problems.
Quick summary: add the Table of Contents (TOC) block in BlogKub (many templates install it already), set the heading, depth (H2 or H2+H3), and numbering, then Export the XML and upload it to Blogger. From there, write your article with headings set as H2/H3 and the table of contents is generated and updated automatically. It raises time on page and opens the door to jump-links in the Google results.
What a table of contents is, and why long articles need one
A table of contents (TOC) is a box of headings placed at the top of an article, where each item is a link that jumps straight to that heading when clicked. For an article longer than one screen, a table of contents changes the reading experience from "scroll around looking" to "see the overview and pick what you want to read", instantly.
In reader psychology, a table of contents acts like a map. When people see that an article covers the topic they are looking for, they are confident they are in the right place and stay to read, instead of closing within a few seconds. This is why world-class quality sites, such as online encyclopedias and technical manuals, almost all use a table of contents on long content.
The problem is that Blogger has no built-in table of contents, and the old way to make one means inserting a long block of JavaScript into every post, which is fiddly and breaks easily. BlogKub solves this by embedding the table of contents system into the theme at the template level once, so every article gets an automatic table of contents without you ever touching code in the post.
How a table of contents helps SEO
A table of contents helps more than just the reader. It sends several positive signals to search engines:
- More time on page (dwell time): when people find the heading they want quickly, they stay longer and tend to read several sections, reducing bounce, which is an indirect quality signal.
- A chance at jump-to links in the results: Google often pulls anchor links from the table of contents to show as sub-links under a result, letting users jump straight to the section they want, adding space and click-through.
- Forces a clear heading structure: because the table of contents is built from H2/H3, to get a clean one you have to order your headings logically, which is exactly what Google uses to understand the outline, and helps AI summarize the content accurately.
- Supports AEO/GEO: a clear heading structure makes it easier for answer engines and AI Overviews to lift a heading into an answer for a user.
How to add a table of contents in BlogKub, step by step
- Open BlogKub and pick a template. Many templates install the TOC block from the start. Check the page structure for a "Table of Contents (TOC)" block already present.
- Add the TOC block (if you do not have one). Open the left library, category "Article & UX", and drag the "Table of Contents (TOC)" block in. The system places it in the correct spot (the top of the article) automatically.
- Configure the table of contents. Click the block to open its properties panel, then set: the TOC heading (such as "Contents" or "In this article"), the depth (H2 only, or H2 + H3), and whether to number each item.
- Export the XML and upload to Blogger. Click Export, then take the XML to blogger.com → Theme → three-dot menu → Backup/Restore → select the file.
- Write your article with H2/H3 headings. In the post editor, set your main headings as "Heading (Heading 2)" and sub-headings as "Subheading (Heading 3)". That is all it takes for the table of contents to be built and ordered for you every time you publish.
BlogKub's table of contents system is placed directly in the post's includable, so it always appears above the content no matter how you order your blocks, and it works only on article pages (keeping the homepage clean).
Settings options and what they mean
| Option | Meaning | Recommendation |
|---|---|---|
| TOC heading | The heading text of the box | Use a familiar word, such as "Contents" or "In this article" |
| Depth (maxDepth) | Show H2 only, or H2 + H3 | Short articles need only H2, long articles with many sub-headings use H2+H3 |
| Numbering | Add 1, 2, 3 before each item | Leave on for clarity of the content order |
How to write an article so the table of contents looks good
A good table of contents starts from a good outline. Follow these principles when writing a post:
- Use H2 for main headings and H3 for sub-headings only. Do not use bold text in place of a heading, because the table of contents and Google will not recognize it as a heading.
- Name headings meaningfully and with keywords. A good heading is one that, read in sequence in the table of contents, conveys the outline of the whole article.
- Do not make headings too short or vague. "Point 1" is useless. It should be "Step 1: pick a template", for instance.
- Keep the hierarchy correct. Do not jump from H2 to H4, skipping H3, because it distorts the table of contents and the document structure.
Common problems and how to fix them
The table of contents is empty or does not appear
The most common cause is that the article has no H2/H3 headings, because the table of contents is built from them. Open the post editor and change your heading text from "Normal" to "Heading (Heading 2)" or "Subheading (Heading 3)", then save and view the live page again.
The table of contents shows headings you do not want
Sometimes a template or another widget creates unrelated H2/H3. Check that you are not using the same heading level as a UI element, and set the table of contents depth to H2 only to keep it concise.
Clicking does not jump, or jumps past the heading
This usually happens when a sticky header covers the heading. BlogKub's system already reserves scroll spacing, but if you have raised the header height a lot, test and reduce the sticky height slightly.
Best practices
- Use a table of contents on articles longer than roughly 800 to 1,000 words, or with 3 or more headings. Very short articles do not need one.
- Place the table of contents at the top of the article (BlogKub does this automatically) so readers see it immediately before deciding to read on.
- Pair the table of contents with the anchor link feature so readers can copy a link straight to a heading and share it.
- Write headings as questions or sentences people actually search, which helps both the table of contents and your odds of appearing in AI Overviews.
The table of contents with AEO/GEO: getting AI to lift your headings into answers
In an age where more people ask Google AI Overviews, ChatGPT Search, and Perplexity, a clear heading structure becomes a real asset, because these AI systems "read" an article by relying on the heading hierarchy to understand what each section answers. When your article has well-named H2/H3 and a table of contents that reflects the outline, the odds that AI lifts one of your headings into an answer for a user, and cites your site, go up.
The trick is to write headings in the form people actually ask. For example, instead of "Installation", write "How to install, step by step", or instead of "Benefits", write "How does a table of contents help SEO". Question-form or how-to headings are a magnet for both a readable table of contents and being lifted into AI Overviews. Pair it with an AEO summary box at the top of the article, and your content is even more ready for modern search.
Comparison: automatic table of contents vs typing it yourself vs a plugin
Before, Blogger owners had only a few options for making a table of contents, and each had clear downsides. Understanding the difference shows why the automatic approach is the most worthwhile.
- Typing the table of contents yourself: full control over the format, but you type the links and anchors yourself on every article, and every time you edit a heading you have to come back and edit the table of contents too. It is time-consuming and error-prone, and the more articles you have, the bigger the burden.
- Pasting JavaScript per post: it does give an automatic table of contents, but you have to paste the script into every post, and if you forget or place it wrong, it breaks, and code scattered through the content is hard to manage over the long term.
- BlogKub's theme-level table of contents: set it once in the theme, and it works on every article forever, with no touching posts, no clutter code in the content, updating from your headings automatically, and always placed correctly. This is the easiest and most consistent approach.
Put simply, the automatic theme-level approach moves the burden from "every article" to "once when setting up the theme", which suits anyone serious about blogging long term with a large archive of articles.
Wrapping up
An automatic table of contents is a high-return improvement for the effort, because you install it once in the theme and it works on every article forever. It lifts the reader experience, reduces bounce, and opens the door to special space in the results. All you have to do is add the TOC block in BlogKub, set it to suit your content length, and write your articles with disciplined H2/H3 headings. With that, your Blogger site looks more professional at once.
Frequently asked questions (FAQ)
Is the table of contents in BlogKub generated automatically, or do I type it myself?
It is generated automatically from the H2 and H3 headings in your article. You do not type the list yourself. When you add or edit a heading, the table of contents updates immediately.
Does clicking the table of contents jump to the heading?
Yes. Each item is an anchor link, and clicking it scrolls smoothly to that heading. It also helps Google show sitelinks for your sub-headings in the results.
Can I show only H2 in the table of contents?
Yes. In the TOC block settings, choose a depth of H2 only, or H2 + H3, as you prefer, to make the table of contents concise or detailed to match the content.
How does a table of contents affect SEO?
A table of contents raises time on page, reduces bounce, and opens the door for Google to show 'jump to' links and heading sitelinks in the results. It also forces a clear heading structure, which is good for crawling.
Why is my table of contents empty?
Because the article has no H2/H3 headings yet. The table of contents is built from these headings. Set your post headings to 'Heading (H2)' or 'Subheading (H3)' in the Blogger editor and the table of contents will appear.
