Structured Data Examples SiteNavigationElement

Examples SiteNavigationElement

 In Structured Data

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 and has a section in Search Console dedicated to this (). Having said that, this is the most complex field of .

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  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":"http://schema.org",
 "@type":"ItemList",
 "itemListElement":[
 {
 "@type":"ListItem",
 "position":1,
 "url":"http://example.com/desserts/apple-pie"
 },
 {
 "@type":"ListItem",
 "position":2,
 "url":"http://example.com/desserts/cherry-pie"
 },
 {
 "@type":"ListItem",
 "position":3,
 "url":"http://example.com/desserts/blueberry-pie"
 }
 ]
}
</script>

SiteNavigationElement

Currently used on 250,000 to 500,000 domains, what is the 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 itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 <li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 <li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 <li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 <li itemprop="name"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 <li itemprop="name"><a itemprop="url" 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 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 is very 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 itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 <li itemprop="name" role="menuitem"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 <li itemprop="name" role="menuitem"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 <li itemprop="name" role="menuitem"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 <li itemprop="name" role="menuitem"><a itemprop="url" href="https://www.example.com/" title="title of hyperlink">Menu Text</a></li>
 <li itemprop="name" role="menuitem"><a itemprop="url" 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 ) 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 ) (because there is nothing like it on planet earth) to prove this point go to:

and test this URL

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  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 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, it is wise to learn it if you are working in the field of Digital Marketing and website optimization, or marking up your own website.

At this stage, all this will mostly sound insignificant to even begin to use on your website, however, what do you think over 200 Google ranking factors are? Usability and on page SEO is the number one on that list (NOT backlinks as the guru’s suggest). At the end of the day, don’t neglect using Structured Data if you do not want your website to be left behind in Google Search results, and simply learn with RankYa because you’ll get better results from Google, I promise

Recommended Posts
Showing 11 comments
  • Himanshu
    Reply

    How to Apply this on WordPress Website? Please give us more information and if you Have any video on that send link. Thank You…

    • RankYa
      Reply

      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:

      • Work out how your website generates its menus
      • IF its using default WordPress Navigation Menu. Then, you need to modify wp_nav_menu
      • If its using a Plugin for Menu generation, then edit the plugin core files by finding out where is UL LI and A tags are generated and hard code the Schema Markup

      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
      ) );

  • Gabry
    Reply

    Good and useful, thanks a lot!

    I have a menu with ul/li but the sub-menus are simple with no so I had to shuffle a little bit to make it “right”

    <a class="nav-link" itemprop="url" href="” title=”Go to the Home Page” style=”color: orange;”>Home

    Products

    <a class="dropdown-item" href="ms-products/oil-in-water-monitor/” role=”menuitem” itemprop=”url” title=”Page with information on the oil in water monitor”>Oil in Water Monitor
    <a class="dropdown-item" href="ms-products/oil-in-water-monitor/” role=”menuitem” itemprop=”url” title=”Page with information on the hydrocarbonr monitor”>Hydrocarbon Monitor
    <a class="dropdown-item" href="ms-products/total-trihalomethane-monitor/” role=”menuitem” itemprop=”url” title=”Page with information on the THM monitor”>THM Monitor
    <a class="dropdown-item" href="ms-products/voc-in-gas-monitor/” role=”menuitem” itemprop=”url” title=”Page with information on the VOC in Gas Monitorr”>VOC in Gas Monitor
    <a class="dropdown-item" href="ms-products/ammonia-monitor/” role=”menuitem” itemprop=”url” title=”Page with information on the ammonia monitor”>Ammonia Monitor

    Applications

    <!–
    <a class="dropdown-item" href="ms-applications/wtw-pollution-protection/”>WTW Pollution Protection
    <a class="dropdown-item" href="ms-applications/detecting-oil-in-river-water/”>Detecting oil in River Water

    <a class="dropdown-item" href="ms-applications/thm-monitoring-in-drinking-water/”>THM Monitoring in Drinking Water
    <a class="dropdown-item" href="ms-applications/drains-and-effluent/”>Drains and effluent

    –>
    <a class="dropdown-item" href="ms-applications/ammonia-measurement-in-wastewater/” role=”menuitem” itemprop=”url” title=”Page with information on ammonia measurement in wastewater”>Ammonia measurement in wastewater

    <a class="nav-link" href="ms-casestudies/” itemprop=”url” title=”Case Studies about our monitors”> Case Studies

    Company

    <a class="dropdown-item" href="ms-company/” role=”menuitem” itemprop=”url” title=”Information on the company”>About Us
    <a class="dropdown-item" href="ms-company/capabilities.php” role=”menuitem” itemprop=”url” title=”Our capabilities”>Our capabilities
    <a class="dropdown-item" href="ms-company/service-and-support.php” role=”menuitem” itemprop=”url” title=”Information on the support and service we offer”>Service and Support

    <a class="nav-link" itemprop="url" href="ms-news/” title=”Latest News”>News

    Contacts

    <a class="dropdown-item" href="ms-contacts/” role=”menuitem” itemprop=”url” title=”Contact information”>Contact Us
    <a class="dropdown-item" href="ms-contacts/distributors.php” role=”menuitem” itemprop=”url” title=”Our distribution network”>Find a distributor

    • RankYa
      Reply

      I suggest you remove style: color: orange then add this to CSS

      a.nav-link{color: orange}

      better

  • Ketan
    Reply

    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 😊

    • RankYa
      Reply

      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)

  • Nisha
    Reply

    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.

    • RankYa
      Reply

      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?

  • Suresh Bhatt
    Reply

    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?

    • RankYa
      Reply

      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

  • Flexy
    Reply

    What Of Those Who Still Don’t Understand The Work Of This Schema??

Leave a Comment

0

Start typing and press Enter to search

Structured Data Tutorials by RankYaStructured Data Examples