How to Add Table of Contents in Blogger Posts

 Table of Contents = clickable links to each section. Users jump to what they need = 40% lower bounce rate.

In this tutorial, you'll add automatic TOC to Blogger posts. Follow along and you'll improve SEO + user experience in 2025.

Step 1: Why Add Table of Contents in Blogger

TOC helps readers + Google. Win-win for SEO.

1. User benefit: Long posts 1500+ words = users skip to section they want
2. SEO benefit: Google shows "Jump to" links in search results = higher CTR
3. Bounce rate: Users stay longer when they can navigate easily

Image: Google search showing "Jump to" links from TOC

Step 2: Add Auto TOC Code to Blogger Theme

This code scans all H2 and H3 tags and builds TOC automatically.

1. Theme → Edit HTML → Ctrl+F → Search <data:post.body/>
2. Paste this code ABOVE <data:post.body/>:

<b:if cond='data:blog.pageType == "item"'>
<div id='toc-wrapper' style='display:none;'>
<div class='toc-title'>Table of Contents</div>
<div id='toc-list'></div>
</div>

<script>
//<![CDATA[
function mbtTOC() {
var toc = document.getElementById('toc-list');
var headings = document.querySelectorAll('.post-body h2, .post-body h3');
if (headings.length > 2) {
document.getElementById('toc-wrapper').style.display = 'block';
var tocHTML = '<ol>';
headings.forEach(function(heading, index) {
var id = 'toc-' + index;
heading.id = id;
if (heading.tagName === 'H2') {
tocHTML += '<li><a href="#' + id + '">' + heading.innerText + '</a></li>';
} else {
tocHTML += '<li class="toc-h3"><a href="#' + id + '">' + heading.innerText + '</a></li>';
}
});
tocHTML += '</ol>';
toc.innerHTML = tocHTML;
}
}
document.addEventListener('DOMContentLoaded', mbtTOC);
//]]>
</script>
</b:if>

Step 3: Add TOC CSS for Styling

1. Still in Edit HTML → Ctrl+F → Search ]]></b:skin>
2. Paste this code ABOVE that line:

#toc-wrapper {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 15px;
margin: 20px 0;
border-radius: 5px;
}
.toc-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
#toc-list ol {
padding-left: 20px;
margin: 0;
}
#toc-list li {
margin: 8px 0;
line-height: 1.6;
}
#toc-list a {
color: #1a73e8;
text-decoration: none;
}
#toc-list a:hover {
text-decoration: underline;
}
#toc-list .toc-h3 {
margin-left: 20px;
font-size: 14px;
}

3. Click "Save theme"

Step 4: How TOC Works in Posts

Rule	What Happens
3+ H2 or H3 tags	TOC shows automatically
Less than 3 headings	TOC hidden. No clutter on short posts
Click TOC link	Jumps to that section + smooth scroll
H3 tags	Indented under H2 in TOC

Image: TOC showing above post with clickable links

Step 5: Manual TOC for Specific Posts Only

Don't want auto TOC on all posts? Use manual method.

1. Posts → Edit → Switch to "HTML" view
2. After first paragraph, paste this:

<div class="manual-toc">
<strong>Table of Contents</strong>
<ol>
<li><a href="#step1">Step 1: Check Bounce Rate</a></li>
<li><a href="#step2">Step 2: Fix Speed Issues</a></li>
<li><a href="#step3">Step 3: Add Internal Links</a></li>
</ol>
</div>

3. Add id="step1" to your H2 tag: <h2 id="step1">Step 1: Check Bounce Rate</h2>

Bad practice to avoid: Adding TOC to 300-word posts. Looks spammy. Only use for 1000+ word tutorials.

Important: TOC doesn't guarantee "Jump to" links in Google. Google shows them only if post ranks top 5 + users click TOC often. Use descriptive H2 text. "Step 1" is bad. "Step 1: Check Bounce Rate in GA4" is good.