What is the correct use of schema.org SiteNavigationElement?

Question

In SEO terms...

Is it best to put the scheme on the parent containing all the links?

<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</nav>

...or should each link be considered as it's own element?

<nav>
    <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
        <a itemprop="url" href="#">
            <span itemprop="name">Link 1</span>
        </a>
    </span>
    <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
        <a itemprop="url" href="#">
            <span itemprop="name">Link 2</span>
        </a>
    </span>
    <span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
        <a itemprop="url" href="#">
            <span itemprop="name">Link 3</span>
        </a>
    </span>
</nav>

score 25 · Answer 1 · answered Mar 02 '14 at 21:40

25

If SiteNavigationElement is meant for the whole navigation (i.e., a navigation link list), your first example is correct.

If SiteNavigationElement is meant for a single navigation entry (i.e., a link in the navigation link list), your second example is correct.

I think Schema.org doesn’t unambiguously define which variant is meant, as they only say:

A navigation element of the page.

However, the parent type WebPageElement is defined as:

A web page element, like a table or an image

Also, all the other child types (like Table or WPFooter) seem to be used for the whole thing, and not specific parts of the thing.

So this seems to suggest that the whole navigation should be marked up, and not each single link:

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
  <li><a href="/link-1">Link 1</a></li> <!-- don’t use the 'url' or 'name' property here! -->
  <li><a href="/link-2">Link 2</a></li>
</ul>
</nav>

In this case, all the properties belong to the whole navigation, so that means the url property would specify a URL for this navigation (and not the URLs of the links in this navigation!).

answered Mar 02 '14 at 21:40

unor

92,415
26
211
360

3

So According your answer this Microdata just introduce menu to serach engine...Not structure of menu! – user3307827 Mar 10 '14 at 22:42
@chharvey: Yes. It [might make sense in non-HTML contexts or special cases](http://stackoverflow.com/a/27867175/1591669), but for a typical Web page, I wouldn’t use `WebPageElement` and its sub-types like `SiteNavigationElement`. – unor Feb 14 '16 at 13:26
If there is a body tag with microdata: `` Do i have to add `itemprop` to navigation? and if yes ,then what would be the value of `itemprop` in navigation? – alex Oct 20 '16 at 13:13
@alex: If you want to provide a `SiteNavigationElement` item, you could use the `hasPart` property: `WebPage hasPart SiteNavigationElement`. But unless you have a specific reason, I would recommend not to provide `SiteNavigationElement` at all. – unor Oct 20 '16 at 21:11
why you dont recommend? whats wrong with using `SiteNavigationElement`? – alex Oct 21 '16 at 03:09
2

@alex: It’s usually not useful. See the link in my comment above. Or [this answer](http://stackoverflow.com/a/35391904/1591669), or [this one](http://wordpress.stackexchange.com/a/218014/34147). I also created [an issue](https://github.com/schemaorg/schemaorg/issues/1251) for Schema.org. – unor Oct 21 '16 at 14:18

score 14 · Answer 2 · answered Sep 28 '15 at 13:30

14

According to Search Engine Land, it's supposed to look like this:

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
    <li itemprop="name">
        <a itemprop="url" href="#">Link 1</a>
    </li>
    <li itemprop="name">
        <a itemprop="url" href="#">Link 2</a>
    </li>
    <li itemprop="name">
        <a itemprop="url" href="#">Travel Resources</a>
    </li>
</ul>

answered Sep 28 '15 at 13:30

John R Perry

3,916
2
38
62

2

2 downvotes with no explanation of what is incorrect about this answer? – John R Perry Dec 01 '15 at 07:33
I didn't down vote but I did find `name` and `url` ambiguous. Does this represent what the actual value should be or simply a place holder showing the viewer where related information is supposed to appear. – Chef_Code Jun 15 '16 at 17:18
1

`url` identifies the URL and `name` identifies the name (i.e. Link 2). So no, they aren't placeholders. – John R Perry Jun 15 '16 at 23:11
1

The problem is that `url` and `name` are singleton properties of `SiteNavigationElement`. This markup has three of each which makes them ambiguous. Which single `name` and `url` should search engines should use? – David Harkness Sep 27 '17 at 19:01
1

This is the structure that Google Structured data tools recognizes and accepts. – IXN Oct 26 '17 at 10:54
The `name` may be inferred from the body of the `a` so there's no need to specifically mark it up. Additionally, it's not required to use `li` in navigation though it may have some benefits to the accessibility API. Also `nav` element should be used for the wrapper. – vhs Jan 13 '19 at 20:19
Whether it can be inferred is irrelevant; look at Google's breadcrumb markup: https://developers.google.com/search/docs/data-types/breadcrumb. You're right, you're not required to use `li` but it's by no means a bad practice. And yes, it most certainly can be wrapped in a `nav`; feel free to edit. Did you seriously downvote based on those opinions? – John R Perry Jan 21 '19 at 22:37

score 11 · Answer 3 · answered Jan 22 '14 at 12:45

11

First answer is correct but I'd mix both for (HTML5-)semantic:

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    <ul>
        <li>
            <a itemprop="url" href="http://example.com/">
                <span itemprop="name">Link 1</span>
            </a>
        </li>
    </ul>
</nav>

answered Jan 22 '14 at 12:45

Stephan Weinhold

1,623
1
28
37

4

Doing this results in a list of URLs and names, all in same group without any relation between a single URL and a name. I think there should be some way to indicate that each list element is a single entity which has one URL and a name. – Oiva Eskola Mar 12 '15 at 11:21
2

Generally you're right, of course. But as we are talking about a navigation I am assuming that the links all sort of belong together, don't they? – Stephan Weinhold Mar 25 '15 at 13:49

davidcondrey · Answer 4 · 2015-07-01T20:14:37.923

5

<nav role="navigation">

    <ul role="menubar" aria-activedescendant="">

        <li role="presentation" itemscope itemtype="https://schema.org/SiteNavigationElement">
            <a href="" role="menuitem" tabindex="-1" itemprop="url">
                <span itemprop="name">Link 1</span>
            </a>
        </li>   

    </ul>

</nav>

edited Jul 01 '15 at 20:14

answered Nov 13 '14 at 00:31

davidcondrey

34,416
17
114
136

No doubt! That's it. – ThomasB Apr 02 '20 at 18:06

score 2 · Answer 5 · answered Aug 29 '16 at 11:40

schema.org/SiteNavigationElement extends WebPageElement and can be used to mark-up links, which would often make good contextual links. You can use this schema for your page menu.

<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
    <li>
        <a href="https://yoursite.com/" title="Link to Home" itemprop="url">
            <span itemprop="name">Home</span>
        </a>
    </li>
    <li>
        <a href="https://yoursite.com/sample-page" title="Link to sample page" itemprop="url">
            <span itemprop="name">sample page</span>
        </a>
    </li>
</ul>

score 2 · Answer 6 · answered Dec 18 '18 at 15:37

OP's original question contained a good example of code. none of the answers do though ...

It seems everyone threw in a somewhat random answer ... You can test your schema microdata code using the following official google tool search.google.com/structured-data/testing-tool.

If you run the proposed answers in this tool you will notice that none give you the expected result: a list of SiteNavigationElement with a name & url

Some might argue that a whole menu might be considered a "navigation element" but I think it makes more sense for this denomination to designate a single navigation link. Plus if we use the SiteNavigationElement as a marker for the whole menu we have no way of associating names with URLs in the html.

To achieve this, you need to have each link be encapsulated by an itemscope property and they all need to have their own name and url itemprop (these are singleton as mentioned by @David Harkness, so they have to appear only once per itemprop)

<nav>
    <ul>
        <li  itemscope itemtype="http://schema.org/SiteNavigationElement">
            <a itemprop="url" href="http://example.com/link-1">
                <span itemprop="name">Link 1</span>
            </a>
        </li>
        <li  itemscope itemtype="http://schema.org/SiteNavigationElement">
            <a itemprop="url" href="http://example.com/link-2">
                <span itemprop="name">Link 2</span>
            </a>
        </li>
    </ul>
</nav>

The code above will yeld two different navigation elements, each with a name and an URL.

Note: the itemprop="url" attribute uses the anchor's href attribute as value

Try that on yandex and see if you get something like [this](https://github.com/schemaorg/schemaorg/issues/1912#issuecomment-429827337). — vhs, Jan 13 '19 at 19:52
I get a different result, but it still makes sense. I can't find any info as to what tools use the Yandex schema.org reader engine. I assume that the one Google provides is the obvious choice but maybe focusing on the Yandex one would make more sense for some reason? Any advice on that? — Mathieu VIALES, Jan 14 '19 at 09:53
My best advice would be to chose the method with the most common usage until specs are revised to be made unambiguous (or deprecated). To me it makes the most sense to name site navigations given the navigation `a` bodies already contain text nodes to name the nav links. I did try and look for a Baidu tool but I'm not proficient in Chinese. I feel like ARIA will play a _role_ in all of this in the future. — vhs, Jan 14 '19 at 10:05
Upvoted, you didn't deserve a downvote for that response as you are correct, individuals should use the structured data testing tool. I use the itemprop="url" and itemprop="name" on icalculator (see source code on left hand menu for example, https://www.icalculator.info/ This was the correct way for validation on supports links to relevant pages under search results in google and bing (implement, they test on search engines after 4-6 weeks, changes are notable). — Pete - iCalculator, Nov 11 '19 at 16:03

vhs · Answer 7 · 2019-04-25T08:14:25.220

Consider the following code snippet adapted from the page source of habd.as:

<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
  <meta itemprop="name" content="Main Menu">
  <a itemprop="url" class="active" href="/">habd.as</a>
  <a itemprop="url" href="/code/">Code</a>
  <a itemprop="url" href="/post/">Posts</a>
  <a itemprop="url" href="/site/">Sites</a>
  <a itemprop="url" href="/talk/">Talks</a>
</nav>
<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
  <meta itemprop="name" content="Utility Menu">
  <a itemprop="url" href="/about/">About</a>
  <a itemprop="url" href="/contact/">Contact</a>
</nav>

When there are multiple navigations as shown above, use of SiteNavigationElement to group navigation items affords the use of name such that the grouping itself may be labeled. Labels for individual items within the groups can be obtained using the content of the links themselves.

Therefore, your first example is more correct despite assertions to the contrary.

score 0 · Answer 8 · answered Mar 06 '19 at 04:33

I think the most elegent solution would be to use the hasPart property.

<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
  <a itemprop="hasPart" href="/link1.html">Link 1</a>
  <a itemprop="hasPart" href="/link2.html">Link 2</a>
  <a itemprop="hasPart" href="/link3.html">Link 3</a>
</nav>

Using Google's Structure Data Testing Tool informs that these links are part of the SiteNavigationElement and that Google should follow the links to those items:

score 0 · Answer 9 · answered Feb 27 '20 at 11:52

Having considered all the above, I came to the following conclusion:

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
  <ul>
   <li itemprop="hasPart">
     <a href="/" itemprop="url"><span itemprop="name">Home</span></a>
   </li>
</nav>

Thus, each <li> is part of the SiteNavigationElement that has the url and name. I think this is the best option.

But do search engines need such redundant markup? They already know that href in <a href=""> is the url, and inside the tag <a>name</a> is the name. What do you think about it?

score 0 · Answer 10 · answered Jul 23 '20 at 18:56

Here's a quote from a post at Google support site, saying:

We are contemplating to implement Site Navigation Schema https://schema.org/SiteNavigationElement

Will google respect it and display sitelinks if the schema is there or it will do it own thing anyway? I sthere a point at all?

This type of top-level does not currently support Google. In fact, this type does not even have a scope definition. It is unclear whether this type affects a group, for example, a navigation menu, or only one link.

This confirms my experience with their rich results test: only breadcrumbs are recognized. Yandex validates my microdata just fine. So SiteNavigationElement on your page seems to be as useless as it is valid.

What is the correct use of schema.org SiteNavigationElement?

10 Answers10

Linked