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

1. In your Blogger dashboard, go to Theme → ▼ → Edit HTML
2. 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.

Related Posts:

Previous article

Next Post

Next article

Previous Post

Suleiman Inuwa

https://www.androidpols.com.ng/

I am a professional website developer and also an SEO expert.