- Summary
Seems like a good idea for most websites to use this schema.
It is in schema format so directly informs Google of page locations and what they’re about.
You can put it separately from the main navigation markup, in either the <head> or the <body> when using the recommended JSON format. Which effectively gives Googlebot an additional numer of links to crawl or at least acknowledgez with some additional data describing what the links are about.
There are some old posts saying Navigation Schema is not approved by Google, but it now appears to be on the list of approved schema – screenshotted below “SiteNavigationElement”:
https://schema.org/docs/full.html
From what I’ve read and from the example Ive been sent during my ‘research’, it appears you can have the schema code, completely separate to the main HTML navigation code – so effectively adds an additional incidence of HTML links (which is good).
Implementing Navigation Schema
If using JSON – put the schema code in <head> or <body> of HTML page
The schema can be placed on all of the site’s pages.
Google documentation about Schema generally:
SiteNavigation Schema
This schema helps search engines to get a better and prompt understanding of the site structure and navigation elements along with improving the website’s click-through rate
SiteNavigation Schema Template:
<script type=”application/ld+json”>{
“@context”:”http://schema.org”,
“@type”:”ItemList”,
“itemListElement”:[
{
“name”: “Navigation Element 1“,
“description”: “Navigation Element 1 Description“,
“url”:”https://example.com”
},
{
“@type”: “SiteNavigationElement”,
“position”: 2,
“name”: “Navigation Element 2 (About us)“,
“description”: “Navigation Element 2 Description“,
“url”:”https://example.com/xyz”
},
{
“@type”: “SiteNavigationElement”,
“position”: 3,
“name”: “Navigation Element 3 (Products)“,
“description”: “Navigation Element 3 Description“,
“url”:”https://example.com/abc”
},
{
“@type”: “SiteNavigationElement”,
“position”: 4,
“name”: “Navigation Element 4 (contact us)“,
“description”: “Navigation Element 4 Description“,
“url”:”https://example.com/pqr”
}
]
}
</script>
The SiteNavigationElement markup can help increase search engines’ understanding of your site structure and navigation and can be used to influence organic sitelinks:
-
- Organic sitelinks: (influenced by navigation schema):
Example using Microdata includes “href links”:
Site Navigation Schema Markup For your website
Currently used on 250,000 to 500,000 domains, what is the SiteNavigationElement markup? This schema markup basically represents the navigation element of the page.
HTML Example
<nav class=”firstNav”>
<ul itemscope itemtype=”">">" rel="nofollow">https://schema.org/SiteNavigationElement”>
<li itemprop=”name”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
<li itemprop=”name”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
<li itemprop=”name”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
<li itemprop=”name”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
<li itemprop=”name”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
<li itemprop=”name”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
</ul>
</nav>
Some web developers, digital agencies and SEO gurus (SEO nemos) suggest that you should use SiteNavigationElement on the nav element, in fact, there are many WordPress Theme developers who add this markup to the nav element of HTML. Let’s say that’s fair because everyone seems to be an SEO expert in today’s freelancer, upwork and fiver world.
All this sounds logical doesn’t it? However, upon closer inspection of HTML5, then you will realize that your Web Page Elements can have attributes which can also have role attribute like this:
Menu: offers a list of choices to the user.
menuitem: a link in a menu. This is an option in a group of choices contained in a menu.
role=”menu”
role=”menuitem”
And since accessibility is very important for Google Search Engine (including rankings) and since making your pages more meaningful can only be a good thing.
Then, our example can become even more meaningful like this:
<nav class=”firstNav”>
<ul itemscope itemtype=”https://schema.org/SiteNavigationElement” role=”menu”>
<li itemprop=”name” role=”menuitem”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
<li itemprop=”name” role=”menuitem”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
<li itemprop=”name” role=”menuitem”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
<li itemprop=”name” role=”menuitem”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
<li itemprop=”name” role=”menuitem”><a href=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
<li itemprop=”name” role=”menuitem”><a hre
f=”https://www.example.com/” title=”title of hyperlink”>Menu Text</a></li>
</ul>
</nav>
https://searchengineland.com
Example from earlier
seems simplest format to use, perhaps worth adding “description” too