Examples SiteNavigationElement

SiteNavigationElement Structured Data Example

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

Author: RankYa

RankYa: Online Entrepreneur, Qualified Web Developer, Google AdWords and Google Analytics Certified Professional. Specialist in: SEO, Website Optimization, WordPress, Structured Data, JSON-LD, Microdata, Microformats, RDF, Schema.org Vocabulary, HTML5, Advanced Image Optimization, Google Search Console, Google Webmaster Guidelines, Social Media Marketing, Facebook marketing and YouTube video ranking.

Thank you for sharing this blog post. Description: 'Structured Data Examples SiteNavigationElement is provided by RankYa, let's move beyond using Data Highlighter because Data Highlighter is for amateurs'