Adding Structured Data to our website should be on your to-do list moving forward in Google domination world. Why? Because Google supports and prominently displays Structured Data for various data types. In fact, Google encourages website owners to use Structured Data and has a section in Search Console dedicated to this (Rich result status reports). Having said that, this is the most complex field of search engine optimization.
For Example: You Can Mark Up Your Content With Items
When you use structured data to mark up content, you help Google better understand its context for display in Search, and you achieve better distribution of your content to users from Search.
Above quote should be good enough to tell you “you just have to use Structured Data” or else your website will be left behind in Google search results of the tomorrows (especially when mobile first index is coming soon). In fact, all the recent changes Google has made to its products such as Google AdWords, Google Analytics, YouTube and Search Console is geared towards mobile including Structured Data it supports.
Good example of this is Carousel which displays your rich results in a sequential list or gallery in search results (geared towards mobile that is).
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"ItemList",
"itemListElement":[
{
"@type":"ListItem",
"position":1,
"url":"https://example.com/desserts/apple-pie"
},
{
"@type":"ListItem",
"position":2,
"url":"https://example.com/desserts/cherry-pie"
},
{
"@type":"ListItem",
"position":3,
"url":"https://example.com/desserts/blueberry-pie"
}
]
}
</script>
SiteNavigationElement
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="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 href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
</ul>
</nav>
Now what do you see? You see a ul element (which is unordered list) and because your menu links are within <ul> that it is more logical to markup <ul> which contains your menuitem in form of <li> and as you can see that is much better and semantically perfected by RankYa (remember that name when you hear the term Structured Data) (because there is nothing like it on planet earth) to prove this point go to:
Google Rich Results Testing Tool and test this URL
https://www.rankya.com/structured-data/google-structured-data-with-examples/
Why? Because all the so called WordPress or Google experts are telling you to use Schema Markup Plugins, but using plugins your markup will not validate AND your website will be like a car with only the front wheels attached. That’s wouldn’t and shouldn’t be good enough for your website. Instead, begin learning through Google Structured Data Examples by RankYa
Most WordPress Theme Developers get this wrong, because if you are using WordPress and have a Theme that adds schema markup, then double check the footer of your web page and role="contentinfo" IS NOT the right markup for that webPageElement WPFooter for almost all WordPress Themes (unless footer element is parent of the <body element> (therefore, its almost certainly with a role of complementary (unless its parent is the <body element>
<footer id="colophon" class="site-footer" role="complementary" itemscope itemtype="https://schema.org/WPFooter">
Because HTML5 Sectioning Elements tell us, footer contentinfo should be used when in context of the body element. And, the footer element is not a contentinfo landmark when it is a descendant of the following HTML5 sectioning elements: article, aside, main, nav, section as is the case for most WordPress Themes.
Once again, Structured Data is the most complex part of search engine optimization, its the holy grail of the future of Google SEO. There are many plugins which assist you to use schema markup. It is wise to learn it if you are working in the field of Digital Marketing and website optimization, or if you manage your own website.
At this stage, all this may seem insignificant to even begin to use on your website, however, accessibility and usability on a web page is critical for Google rankings. That is why its in your website’s best interest to start using Structured Data.
Ok. But how to do it using JSON and if the menu has a structure with several levels?
That would be very complex and will depend on the content management system. Best example I can provide is to recommend looking at the Menu Structure of RankYa.com website itself. Because it has submenu that is marked-up with Schema.
SiteNavigationElement is used just once on HTML ul element.
To code that so it echoes JSON-LD, I would presume a WordPress shortcode may be possible (but it would be highly complex even for me). Surely that is for WordPress example, thus, your question depends on the Content Management Sytem and how your menu structure is currently adding Schema Markup.
Note: best practice would actually be to use HTML5 nav and also schema.org Microdata instead of JSON-LD for menus.
After i read this blog i also would like to implement site navigation schema in our website
Hey hi,
Have you seen the case of navigation come under sitselinks?
That’s a good place to test this out.
I came across some sites where for the primary keyword they have the navigation elements shows as sitselinks.
The microdata you provide should be a good start in testing out the schema markup for sitselinks in SERP.
Thanks
Suresh
Adding Structured Data will always improve Google understanding the website. In terms of Sitelinks, marking up SiteNavigationElement makes sense for ALL sitewide menu links. However, do keep in mind that the way you create the structure of the website is as important for Google to show Sitelinks in its results. This is to do with how you categorize content (if using WordPress, this is easily done) and also the Permalinks (as in URL structure of the entire website) helps Google to show Sitelinks.
I’ve touched base with this in the Freely Available SEO Course (the importance of site structure). Basically, SEO is much more than keywords and backlinks 🙂 learn more with RankYa
I tried to use this on my site, created via Wix, but it seems to put a list of text (the pages I’ve listed) in the top left corner. Is there something I should do different since I’m using Wix? I’ve removed it for now, but if you wish to see it, let me know and I’ll put it back, temporarily.
I haven’t worked on WiX CMS for a while so I am not sure how you would add Structured Data on WiX site. But from what you say, I would ignore it because it seems WiX site is causing issues. Why not switch to self hosted WordPress? Much better in every sense of the word Schema Markup and Search Engine optimization for Google
What Of Those Who Still Don’t Understand The Work Of This Schema??
Very Informative article, just wanted to ask whether we should include all the menu options available in the navigation menu bar or we should mention only the important links in the navigation menu.
For Ex – We have a navigational menu bar on the website, having menuoptions as
1. Home
2. Best Sellers
3. Top Collections
4. Track My Order
Should we mention all the 4 options in the schema file or we should go with the important ones only, also, should we also include the Home option as well?
Hello Suresh, the answer for your SiteNavigationElement related Structured Data question is = ALL the navigational menu links should be marked up for navigational menu structure of a website. At minimum the main top menu which almost all websites have, if you can, then, other menu structures which represent a Website’s Navigation Element should be marked up using Schema.org Microdata vocabulary. Other places which are also ideal to include Schema Markup for this purpose is HTML sitemap. Check this HTML Sitemap for RankYa website to see an example of using SiteNavigationElement
The information provided is helpful. I have added the code through GTM but unable to verify the same. Is there any issue with page view triggers as I have added code for homepage page view.
Hello Nisha, I don’t think you can use SiteNavigationElement within GTM (although you can use LocalBusiness per page view). What CMS are you using?
Thanks for this article, i was searching the whole Internet for this information and i found it here. Its very informative and helpful for me ?
Its great to hear Ketan, because SiteNavigationElement is a great schema markup to use on any website (and almost all websites will have Menu links)
Good and useful, thanks a lot!
I have a menu with ul/li but the sub-menus are simple with no itemprop so I had to shuffle a little bit to make it “right”
I suggest you remove style: color: orange then add this to CSS
a.nav-link{color: orange}
better
How to Apply this on WordPress Website? Please give us more information and if you Have any video on that send link. Thank You…
I wish I could, but that would be very cumbersome to show examples for SiteNavigationElement for WordPress. Why? Because nearly all WordPress sites are built different (some use plugins for menus such as Megamenu). But to enlighten you as to how you can include SiteNavigationElement on your WordPress website. Here’s what you need to do:
If using default WP menu, here’s the filter that would do that
add_filter( 'wp_nav_menu_args')Then you need to extend Walker_Nav_Menu and modify your current WordPress menu (this is your Theme) and call it through your Theme’s new walker (below is my own for reference only.
$primarywalker = new RankYa_Menu_Walker();wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'walker' => $primarywalker
) );