How to Markup a Table of Contents with Schema.org SiteNavigationElement

To help Google find your table of contents (TOC) for SEO, you should use schema.org markup. However, Blogger has limitations that prevent us from using JSON-LD. In this case, adding microdata directly to your HTML is a great alternative. Here is the most effective way to list every item clearly and in the correct order for better search results.

HTML structure of the Table of Contents

<nav id="toc" class="contents" aria-labelledby="toc-title" itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
  <p id="toc-title" role="heading" aria-level="2" itemprop="name">Table of Contents</p>
    <ul itemprop="mainEntity" itemscope='itemscope' itemtype='https://schema.org/ItemList'>
      <li itemprop="itemListElement" itemscope='itemscope' itemtype='https://schema.org/ListItem'><a itemprop="item" itemscope='itemscope' itemtype='https://schema.org/WebPage' href="#1"><span itemprop="name">Category 1</span></a><meta itemprop="position" content="1"/>
        <ul itemprop="item" itemscope='itemscope' itemtype="https://schema.org/ItemList">
          <li itemprop="itemListElement" itemscope='itemscope' itemtype='https://schema.org/ListItem'><a itemprop="item" itemscope='itemscope' itemtype='https://schema.org/WebPage' href="#2"><span itemprop="name">Type A</span></a><meta itemprop="position" content="1"/></li>
          <li itemprop="itemListElement" itemscope='itemscope' itemtype='https://schema.org/ListItem'><a itemprop="item" itemscope='itemscope' itemtype='https://schema.org/WebPage' href="#3"><span itemprop="name">Type B</span></a><meta itemprop="position" content="2"/></li>
          <li itemprop="itemListElement" itemscope='itemscope' itemtype='https://schema.org/ListItem'><a itemprop="item" itemscope='itemscope' itemtype='https://schema.org/WebPage' href="#4"><span itemprop="name">Type C</span></a><meta itemprop="position" content="3"/></li>
          <li itemprop="itemListElement" itemscope='itemscope' itemtype='https://schema.org/ListItem'><a itemprop="item" itemscope='itemscope' itemtype='https://schema.org/WebPage' href="#5"><span itemprop="name">Type D</span></a><meta itemprop="position" content="4"/></li>
        </ul>
      </li>
      <li itemprop="itemListElement" itemscope='itemscope' itemtype='https://schema.org/ListItem'><a itemprop="item" itemscope='itemscope' itemtype='https://schema.org/WebPage' href="#12"><span itemprop="name">Category 2</span></a><meta itemprop="position" content="2"/>
        <ul itemprop="item" itemscope='itemscope' itemtype="https://schema.org/ItemList">
          <li itemprop="itemListElement" itemscope='itemscope' itemtype='https://schema.org/ListItem'><a itemprop="item" itemscope='itemscope' itemtype='https://schema.org/WebPage' href="#13"><span itemprop="name">Model A</span></a><meta itemprop="position" content="1"/></li>
          <li itemprop="itemListElement" itemscope='itemscope' itemtype='https://schema.org/ListItem'><a itemprop="item" itemscope='itemscope' itemtype='https://schema.org/WebPage' href="#14"><span itemprop="name">Model B</span></a><meta itemprop="position" content="2"/></li>
          <li itemprop="itemListElement" itemscope='itemscope' itemtype='https://schema.org/ListItem'><a itemprop="item" itemscope='itemscope' itemtype='https://schema.org/WebPage' href="#15"><span itemprop="name">Model C</span></a><meta itemprop="position" content="3"/></li>
        </ul>
      </li>
    </ul>
</nav>

You might be able to find HTML code for a table of contents, but in reality, many examples—while not necessarily producing errors—are structurally incomplete. Here is the HTML syntax for a table of contents that I created, which receives a perfect rating from the schema.org validator.

Instead of Rich Results, use the 'Schema Markup Validator.' If everything is written correctly, you’ll see a result like the image below. It’s a beautiful sight to see all the items listed perfectly in order.

The reason it doesn't show up in the Rich Results Test is that SiteNavigationElement is designed for helping search engines understand your site structure, not for changing how your snippet looks in Google search results. You don't necessarily need SiteNavigationElement because Google is smart enough to find the TOC on its own anyway.

"Then why do we use SiteNavigationElement?"

The reason we use SiteNavigationElement is to make things certain. Instead of letting search engines guess your content, you are directly telling the search engines exactly what is in your TOC using code. This ensures Google understands your structure perfectly.

So, even if it's not detected in the Rich Results Test, it's still a success as long as it shows up in the 'Schema Markup Validator' without any errors. If Schema Markup Validator can read it, your installation is complete.

To repeat, the reason SiteNavigationElement isn't detected isn't because of an error. The Google's Rich Results Test is only meant for checking visual enhancements in search results; The Google's Rich Results Test isn't a tool for validating all types of schema.