No table of contents = users bounce. Google loves TOC for featured snippets + "Jump to" links.
In this tutorial, you'll add auto table of contents to Blogger posts. Follow along and you'll boost SEO, user experience, and AdSense time on page in 2025.
Step 1: Why Blogger Posts Need Table of Contents 2025
TOC helps users + Google understand your long posts.
- SEO boost: Google shows "Jump to" links in search results from TOC
- Featured snippets: Posts with TOC win 80% more featured snippets
- Lower bounce rate: Users jump to section they want instead of leaving
- AdSense RPM: More scrolling = more ad views = higher earnings
Image: Google search result showing "Jump to" links from TOC
Step 2: Add Auto Table of Contents to Blogger Theme
This code auto-generates TOC from your H2 and H3 tags. Works on all posts.
- Blogger → Theme → Edit HTML → Ctrl+F → Search
<data:post.body/> - Paste this code ABOVE
<data:post.body/>:
<b:if cond='data:blog.pageType == "item"'>
<style>
.toc-box {
background: #f8f9fa; border: 1px solid #e0e0e0; padding: 20px;
border-radius: 8px; margin: 25px 0; font-size: 15px;
}
.toc-box h4 {margin: 0 0 12px 0; font-size: 18px;}
.toc-box ul {margin: 0; padding-left: 20px;}
.toc-box li {margin: 6px 0; line-height: 1.6;}
.toc-box a {text-decoration: none; color: #1a73e8;}
.toc-box a:hover {text-decoration: underline;}
.toc-h3 {margin-left: 15px; font-size: 14px;}
html {scroll-behavior: smooth;}
</style>
<div class='toc-box' id='toc'></div>
<script>
//<![CDATA[
function createTOC() {
var toc = document.getElementById("toc");
var headings = document.querySelectorAll(".post-body h2,.post-body h3");
if (headings.length < 2) { toc.style.display = "none"; return; }
var html = "<h4>Table of Contents</h4><ul>";
for (var i = 0; i < headings.length; i++) {
var id = "toc-" + i;
headings[i].id = id;
var text = headings[i].innerText;
var className = headings[i].tagName === "H3"? "toc-h3" : "";
html += '<li class="'+className+'"><a href="#' + id + '">' + text + '</a></li>';
}
html += "</ul>";
toc.innerHTML = html;
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", createTOC);
} else { createTOC(); }
//]]>
</script>
</b:if>
Step 3: Manual Table of Contents for Single Post
Want TOC on 1 post only? Use this method in post editor.
- Switch post to "HTML" view → Paste at top of post where you want TOC:
<div style="background:#f8f9fa;border:1px solid #e0e0e0;padding:20px;border-radius:8px;margin:20px 0;"> <h4>Table of Contents</h4> <ul> <li><a href="#step1">Step 1: First Section</a></li> <li><a href="#step2">Step 2: Second Section</a></li> <li><a href="#step3">Step 3: Third Section</a></li> </ul> </div>
- Then add IDs to your headings in the post:
<h2 id="step1">Step 1: First Section</h2> <h2 id="step2">Step 2: Second Section</h2> <h2 id="step3">Step 3: Third Section</h2>
Step 4: Table of Contents SEO Best Practices 2025
| Element | Do This | SEO Impact |
| Heading tags | Use H2 for main steps, H3 for sub-steps | Google reads hierarchy for snippets |
| Anchor text | Match TOC link text to H2 text exactly | Improves "Jump to" links in SERP |
| Placement | After intro paragraph, before Step 1 | Users see it immediately |
| Number of links | 4-8 links max | Too many = overwhelming |
Step 5: Test TOC + Fix Common Issues
- Test 1: Publish post → Click TOC links → Must smooth scroll to section
- Test 2: Mobile view → TOC must be readable, not cut off
- Test 3: Search Console → URL Inspection → See if Google picks "Jump to" links
- Fix: TOC not showing = You have less than 2 H2 tags. Add more headings
- Fix: Links broken = Heading has special chars. Use plain text in H2
Bad practice to avoid: Adding TOC to 300-word posts. Looks spammy. Only use for 800+ word guides.
Important: Google only shows "Jump to" links for posts ranking page 1. TOC won't help if content is thin. Use proper H2, H3 structure. For numbered steps like this series, TOC doubles time on page. Update old posts with TOC to boost rankings.
0 Comments