Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the correct use of schema.org SiteNavigationElement?

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>
like image 200
Giel Berkers Avatar asked Sep 19 '12 08:09

Giel Berkers


People also ask

What is the use of schema org?

Schema.org is simply a site where we document the schemas that several major search engines will support. Schema.org is a collaboration between Google, Microsoft, Yahoo! and Yandex - large search engines who will use this marked-up data from web pages. Other sites - not necessarily search engines - might later join.

What is SiteNavigationElement?

The SiteNavigationElement markup can help increase search engines' understanding of your site structure and navigation and can be used to influence organic sitelinks. Example (using microdata) Resource Page: SiteNavigationElement (on Schema.org)

How do you use Itemprop?

To label properties of an item, use the itemprop attribute. For example, to identify the director of a movie, add itemprop="director" to the element enclosing the director's name. (There's a full list of all the properties you can associate with a movie at https://schema.org/Movie.)

What is website schema?

Website Schemas are essentially words or tags in a “shared vocabulary” that can be used by your on-line marketing company (like us!) to talk to search engines like Google & Bing to provide refined searches.


7 Answers

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!).

like image 182
unor Avatar answered Sep 25 '22 23:09

unor


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>
like image 44
John R Perry Avatar answered Sep 24 '22 23:09

John R Perry


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>
like image 23
Stephan Weinhold Avatar answered Sep 26 '22 23:09

Stephan Weinhold


<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>
like image 23
davidcondrey Avatar answered Sep 26 '22 23:09

davidcondrey


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>

like image 36
ashrafnezhad Avatar answered Sep 24 '22 23:09

ashrafnezhad


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.

like image 43
vhs Avatar answered Sep 23 '22 23:09

vhs


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

like image 42
Mathieu VIALES Avatar answered Sep 24 '22 23:09

Mathieu VIALES