How to Add a Table of Contents to Blogger Posts

A table of contents in Blogger gives readers a quick overview of a long article and lets them jump directly to the section they want to read.

You can create a Blogger table of contents manually using HTML anchor links or generate one automatically with a small amount of JavaScript.

This guide explains how to add a table of contents to Blogger posts using both methods, including heading IDs, smooth scrolling, mobile-friendly styling and common TOC mistakes to avoid.

How to add a table of contents to Blogger posts with anchor links

What Is a Table of Contents?

A table of contents, often shortened to TOC, is a list of links to important sections within the same article.

For example:

Table of Contents

1. What Is Blogger SEO?
2. Configure Search Settings
3. Submit Your Sitemap
4. Check Indexing
5. Frequently Asked Questions

When a visitor clicks one of these links, the browser jumps directly to the corresponding heading on the page.

When Should You Add a TOC to Blogger?

A table of contents is particularly useful for:

Long tutorials
Step-by-step guides
Documentation
Comparison articles
Articles with many H2 and H3 sections

A short article containing only two or three sections usually does not need one.

The goal is to improve navigation, not add another element to every post automatically.

Use Proper Headings Before Creating the TOC

Your article should first have a logical heading structure.

For example:

H1 → Article title

H2 → Main section
H2 → Main section
  H3 → Subsection
  H3 → Subsection
H2 → Main section

In Blogger's post editor, highlight the section title and choose the appropriate heading style from the paragraph formatting menu.

Avoid using bold paragraphs instead of real headings simply because they look similar.

Method 1: Add a Manual Table of Contents in Blogger

The manual method is simple, lightweight and requires no JavaScript.

It works by giving each heading a unique HTML id and linking to that ID using:

href="#section-name"

This is a good option when you only need a table of contents on selected articles.

Step 1: Add IDs to Your Blogger Headings

Open the article and switch to:

HTML view

Find your headings.

They may look like:

<h2>Blogger SEO Settings</h2>

Add a unique ID:

<h2 id="blogger-seo-settings">Blogger SEO Settings</h2>

For another section:

<h2 id="submit-sitemap">Submit Your Blogger Sitemap</h2>

Each ID on the page should be unique.

Step 2: Create the Table of Contents Links

Add the TOC near the beginning of the article, usually after the introduction.

For example:

<div class="post-toc">
  <div class="toc-title">Table of Contents</div>
  <ol>
    <li><a href="#blogger-seo-settings">Blogger SEO Settings</a></li>
    <li><a href="#submit-sitemap">Submit Your Blogger Sitemap</a></li>
    <li><a href="#check-indexing">Check Google Indexing</a></li>
  </ol>
</div>

When a visitor clicks:

#submit-sitemap

the browser jumps to:

id="submit-sitemap"

Step 3: Style the Blogger Table of Contents

You can add basic CSS to your Blogger theme:

.post-toc{
  padding:20px;
  margin:25px 0;
  border:1px solid #ddd;
  border-radius:8px;
}

.post-toc .toc-title{
  font-weight:700;
  margin-bottom:12px;
}

.post-toc ol{
  margin:0;
  padding-left:22px;
}

.post-toc li{
  margin:7px 0;
}

.post-toc a{
  text-decoration:none;
}

.post-toc a:hover{
  text-decoration:underline;
}

Adjust the styling to match your Blogger template rather than introducing a completely different design.

Add Smooth Scrolling to TOC Links

You can optionally make jumps between sections smoother with CSS:

html{
  scroll-behavior:smooth;
}

If your Blogger site has a sticky header, the heading may become hidden underneath it after a TOC link is clicked.

You can provide extra scroll space:

.post-body h2[id],
.post-body h3[id]{
  scroll-margin-top:90px;
}

Adjust 90px to match the approximate height of your sticky header.

Method 2: Create an Automatic Blogger Table of Contents

If you publish many detailed tutorials, manually maintaining every TOC can become repetitive.

An automatic TOC can scan the H2 and H3 headings inside a Blogger post and generate the links for you.

A good setup is to:

Add a small TOC placeholder only to posts that need one.
Add the JavaScript once to your Blogger template.
Let the script generate links from the article headings.

Step 1: Add the Automatic TOC Placeholder

In the Blogger post's HTML view, add:

<div class="post-toc" id="toc">
  <div class="toc-title">Table of Contents</div>
  <ol class="toc-list"></ol>
</div>

Place it after your introduction or wherever you want the table of contents to appear.

Step 2: Add the Automatic TOC JavaScript

Back up your Blogger theme before modifying template code.

Then go to:

Blogger → Theme → Edit HTML

Add the following script near the end of the theme before </body>:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var post = document.querySelector('.post-body');
  var toc = document.querySelector('#toc .toc-list');
  var tocBox = document.getElementById('toc');

  if (!post || !toc || !tocBox) return;

  var headings = post.querySelectorAll('h2, h3');

  if (headings.length < 2) {
    tocBox.style.display = 'none';
    return;
  }

  headings.forEach(function (heading, index) {
    if (!heading.id) {
      heading.id = 'section-' + (index + 1);
    }

    var item = document.createElement('li');
    var link = document.createElement('a');

    if (heading.tagName === 'H3') {
      item.className = 'toc-sub';
    }

    link.href = '#' + heading.id;
    link.textContent = heading.textContent.trim();

    item.appendChild(link);
    toc.appendChild(item);
  });
});
</script>

The script runs only when it finds the #toc placeholder, so posts without a TOC placeholder remain unaffected.

Step 3: Style the Automatic TOC

You can use the earlier TOC CSS and add:

.post-toc .toc-sub{
  margin-left:18px;
}

This visually separates H3 subsections from the main H2 sections.

Manual vs Automatic Blogger TOC

Method	Advantages	Best For
Manual TOC	No JavaScript and complete control	Occasional long articles
Automatic TOC	Less repetitive work	Sites publishing many long tutorials

For a small number of posts, I recommend the manual method because it is simple and predictable.

For a tutorial website publishing many detailed guides, an automatic TOC can save considerable editing time.

Don't Add Every Heading to the TOC

A useful table of contents should highlight the structure of the article rather than list every small text element.

Normally, use:

H2 → Main sections
H3 → Important subsections

Avoid filling the TOC with H4, H5 and minor headings unless the article genuinely requires that level of navigation.

Keep TOC Anchor IDs Simple

For manual anchor links, use short and readable IDs.

Good:

id="blogger-seo"
id="submit-sitemap"
id="common-errors"

Avoid unnecessary IDs such as:

id="best-blogger-seo-tips-guide-complete-2026-section-one"

The ID only needs to uniquely identify the section on that page.

Check TOC Links After Editing Headings

If you use a manual table of contents and later change a heading ID, update its TOC link as well.

For example, these must match:

href="#page-speed"

id="page-speed"

If they do not match, clicking the TOC link will not jump to the correct section.

An automatic TOC reduces this maintenance because its links are generated from the current headings.

Make the TOC Mobile Friendly

The table of contents should fit comfortably on smaller screens.

Avoid:

Fixed desktop widths
Very large padding
Tiny link text
Links positioned too close together
Horizontal overflow

Test several long TOC entries on a smartphone before using the design throughout your website.

For other responsive improvements, see our Blogger mobile responsive guide.

Will a Table of Contents Improve Blogger SEO?

A table of contents should primarily be added for navigation and usability rather than as an SEO trick.

It can make a long article easier to explore and creates clear links to individual sections.

However, adding a TOC does not automatically make an article rank higher.

The article still needs useful content, good headings, internal links, correct indexing and a clear search purpose.

Can a TOC Slow Down Blogger?

A manual HTML table of contents adds very little overhead.

A small automatic TOC script can also be lightweight, but there is no reason to install a large JavaScript library just to generate anchor links.

Keep the implementation simple.

For broader performance improvements, see our Blogger page speed optimization guide.

Back Up Before Adding an Automatic TOC

The manual method changes only the article HTML, but a site-wide automatic TOC usually requires adding JavaScript or CSS to your theme.

Before editing:

Blogger → Theme → Edit HTML

download a backup of your current theme.

If you are unfamiliar with template code, see our Blogger HTML and CSS editing guide.

Blogger Table of Contents Checklist

Use proper H2 and H3 headings.
Add a TOC only when the article is long enough to benefit from one.
Use unique IDs for manual anchor links.
Make sure every TOC link matches its heading ID.
Keep anchor IDs short and descriptive.
Use smooth scrolling only when it improves usability.
Add scroll margin when a sticky header covers headings.
Keep the TOC mobile responsive.
Avoid unnecessarily large TOC JavaScript libraries.
Back up the Blogger theme before adding site-wide code.

Questions About Blogger Table of Contents

How do I add a table of contents in Blogger?

Add unique IDs to the article headings and create links pointing to those IDs. You can do this manually or use JavaScript to generate the TOC automatically from H2 and H3 headings.

Can Blogger automatically create a table of contents?

You can add a lightweight custom JavaScript solution that scans the post headings and generates TOC links automatically. The standard Blogger editor does not require this for normal posts, so use it only when it benefits your longer articles.

Which headings should I include in a Blogger TOC?

H2 headings are usually sufficient for the main sections. Include important H3 subsections when the article is detailed enough to benefit from them.

Does a table of contents help Blogger SEO?

A TOC can improve navigation and make long content easier to use, but it does not automatically improve rankings. Content quality and overall SEO remain more important.

Why are my TOC links not working?

Check that the value after the # in each link exactly matches the ID on its target heading and that no two headings use the same ID.

Should every Blogger post have a table of contents?

No. Use a TOC mainly for long or highly structured posts. Adding one to a short article can create unnecessary clutter.

Final Recommendation

For occasional long Blogger articles, use a manual table of contents with normal anchor links. It is lightweight, predictable and does not require JavaScript.

If your website publishes many long tutorials, consider adding a small automatic TOC script to the template and placing the TOC placeholder only in articles that need it.

Whichever method you choose, keep the heading structure logical and the table of contents simple.

The purpose of a Blogger TOC is to help readers reach useful sections faster—not to make the article look more complicated.