SiteNavigationElement Schema – How to Implement [2023]

  • Summary 

To associate name and other elements with the URL, it appears best to use ItemList in the schema markup, below is an example of SiteNavigationElement schema:

script type="application/ld+json">
{"@context":"http://schema.org",
"@type":"ItemList",
"itemListElement":
[
{
@type: "SiteNavigationElement",
name: MMA Equipment",
url:"https://www.blackbeltwhitehat.com/mma"
},
{
"@type": "SiteNavigationElement",
"name": "Cricket Equipment",
"url": "https://www.blackbeltwhitehat.com/cricket"
},
{
@type: "SiteNavigationElement",
name: "Tennis Equipment",
url:"https://www.blackbeltwhitehat.com/tennis"
},
{
@type: "SiteNavigationElement",
name: "Golf Equipment",
url:"https://www.blackbeltwhitehat.com//golf"
},
{
@type: "SiteNavigationElement",
name: "Rugby Equipment",
url:"https://www.blackbeltwhitehat.com/"
},
{
@type: "SiteNavigationElement",
name: "Gym Equipment",
url:"https://www.blackbeltwhitehat.com//gym-equipment"
}
]
}}
</script>
  • Put the SChema in the <head> or <body> tags.
  • Just replace the name and the URL if you want to use the code above.

SiteNavigationSChema 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 number of links to crawl or at least acknowledged 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 I’ve 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”

},

{

“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=”https://schema.org/SiteNavigationElement”&gt;

 <li itemprop=”name”><a href=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 <li itemprop=”name”><a href=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 <li itemprop=”name”><a href=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 <li itemprop=”name”><a href=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 <li itemprop=”name”><a href=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 <li itemprop=”name”><a href=”https://www.example.com/&#8221; 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&#8221; role=”menu”>

 <li itemprop=”name” role=”menuitem”><a href=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 <li itemprop=”name” role=”menuitem”><a href=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 <li itemprop=”name” role=”menuitem”><a href=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 <li itemprop=”name” role=”menuitem”><a href=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 <li itemprop=”name” role=”menuitem”><a href=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 <li itemprop=”name” role=”menuitem”><a hre


f=”https://www.example.com/&#8221; title=”title of hyperlink”>Menu Text</a></li>

 </ul>

 </nav>

https://searchengineland.com

https://rankya.com

Example from earlier

seems simplest format to use, perhaps worth adding “description” too

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s