Use of SiteNavigationElement and BreadcrumbList together

Question

I am working on my following SEO-friendly navigation:

<nav itemprop="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <ul id="hornavmenu" class="nav navbar-nav">
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >
            <a href="index.html" class="fa-home active" itemprop="item"><span itemprop="name">Start</span></a>
        </li>
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >
            <a href="about.html" class="fa-group " itemprop="item"><span itemprop="name">About</span></a>
        </li>
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >
            <a href="contact.html" class="fa-comment " itemprop="item"><span itemprop="name">Contact</span></a>
        </li>
    </ul>
</nav>

So the problem is, that in Google Search the Breadcrumblist looks like this:
URL -> Start -> About -> Contact

Of course that's wrong, but what is wrong in the code? Additionally, I would like to add:

<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
    …
</nav>

…but where do I add the BreadcrumbList and how do I merge these two?

You are using `BreadcrumbList` for something that is not a breadcrumb list, and wonder why Google displays it as breadcrumb list? -- Why do you use `BreadcrumbList`? — unor, Oct 12 '17 at 17:06
Yes thats wat I thought. So I shoudl change BreadcrumbList with SiteNavigationElement — kellerprogger, Oct 13 '17 at 16:17

score 2 · Answer 1 · answered Oct 12 '17 at 19:48

Google doesn't encourage the inclusion of a ‘home’ link in the breadcrumb list, as shown on Google's Breadcrumbs page where all examples omit a home point. Breadcrumbs are not for primary navigation and you should have a sufficient link to root elsewhere.

In my experience with using BreadcrumbList, Google does omit the ‘home’ link from breadcrumbs in the SERPs when the link points to the domain. In this case, you're using ‘index.html’ which could be a different page to ‘example.com’.

SiteNavigationElement is used to indicate the primary navigation for the site. As mentioned breadcrumbs are not this. Use SiteNavigationElement for your actual navigation. For more details, see What is the correct use of schema.org SiteNavigationElement?.

unor · Answer 2 · 2017-10-13T16:54:26.823

The BreadcrumbList type is for breadcrumbs. Don’t use it for something else.

In your case, it seems to be a navigation menu. The SiteNavigationElement type can be used for these. It could look like:

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
  <ul>
    <li><a href="index.html">Start</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

As you can see, it’s for the whole navigation, not for single navigation links. So don’t use name or url for the links.

If you want to provide structured data about each linked page, you could use ItemList together with SiteNavigationElement. This would be similar to your BreadcrumbList example.

NB: I recommend not to use SiteNavigationElement at all, unless you have a specific use case or consumer in mind (in which case you should follow their documentation).

Use of SiteNavigationElement and BreadcrumbList together

2 Answers2