How to Add Table of Contents (TOC) to Blogger Posts Automatically (2025 Method)
![]() |
How to Add Table of Contents (TOC) to Blogger Posts Automatically (2025 Method) |
Improve your Blogger posts with an automatic Table of Contents (TOC). This 2025 guide shows you how to add clickable headings to improve SEO and user experience.
Why Add a Table of Contents (TOC) to Blogger?
A Table of Contents helps readers:
Navigate long blog posts easily
Jump to specific sections instantly
Stay longer on your blog (lower bounce rate)
Helps Google crawl your headings for SEO rich snippets
How to Add Table of Contents Automatically in Blogger
We’ll use a small JavaScript + CSS snippet to automatically create a clickable TOC based on your headings (like <h2>
, <h3>
, etc).
Step 1: Go to Theme → Edit HTML
- In your Blogger dashboard, go to Theme → ▼ → Edit HTML
- Search for
</head>
and paste this TOC CSS style above it:
<style>
#toc {
background: #f8f8f8;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 20px;
}
#toc h2 {
font-size: 16px;
margin-bottom: 10px;
}
#toc ul {
list-style-type: decimal;
padding-left: 20px;
}
#toc ul li {
margin-bottom: 6px;
}
</style>
Step 2: Add TOC JavaScript Before </body>
Search for </body>
and paste this code above it:
<script>
document.addEventListener("DOMContentLoaded", function() {
var content = document.querySelector('.post-body');
if (!content) return;
var headers = content.querySelectorAll("h2, h3");
if (headers.length === 0) return;
var toc = document.createElement("div");
toc.id = "toc";
toc.innerHTML = "<h2>Table of Contents</h2><ul></ul>";
headers.forEach(function(header, index) {
var id = "toc-" + index;
header.id = id;
var li = document.createElement("li");
var link = document.createElement("a");
link.href = "#" + id;
link.textContent = header.textContent;
li.appendChild(link);
toc.querySelector("ul").appendChild(li);
});
content.insertBefore(toc, content.firstChild);
});
</script>
Step 3: Write Posts Using <h2>
and <h3>
Headings
Use proper headings in your blog post like this:
<h2>Introduction</h2>
<h2>Step 1: Open Blogger</h2>
<h2>Step 2: Edit HTML</h2>
<h3>Why It Works</h3>
The TOC will automatically pick up those headings and create a clickable list.
Benefits of TOC for SEO
Feature | SEO Benefit |
---|---|
✅ Internal anchors | Google indexes jump links for snippets |
✅ Better structure | Helps bots understand your content flow |
✅ Enhanced UX | Reduces bounce rate, boosts dwell time |
Common Mistakes to Avoid
Mistake | Solution |
---|---|
❌ Not using headings | ✅ Always use <h2> , <h3> tags |
❌ Placing script in wrong spot | ✅ Put before </body> only |
❌ Missing TOC styles | ✅ Add CSS before </head> |
Final Summary
Adding a Table of Contents to Blogger:
- Improves navigation
- Boosts SEO
- Makes your blog look more professional
It’s especially useful for tutorials, guides, and long-form content.
Leave Comments
Post a Comment