How to Add Schema.org Markup on Site Navigation?

Learn How to add Schema.org Markup On your Website Navigation system

2
data:blog.title
seo friendly blog navigation

We know that Schema.org Markup is language which makes web language easy to understand by search robot. So tailoring all parts of our sites with Schema.org Markup will help to make our site search engine friendly. I have already share couple of tutorial for applying Schema.org Markup on your Blog. And today I will show you how to add Schema.org Markup on a site’s navigation system.

This is really confusing about directly sharing site navigation with Schema.org Markup, because you may be using different template with different coding. So you have to understand the basic rules of applying Schema.org Markup on navigation. Once you understand then you can add Schema.org Markup on any navigation system.


lease look at the below example of a navigation. This is a generic example of navigation. But in your Blog the script might be different.

<nav id='topnav'>
<ul class='bs-menu' id='topmenunav'>
<li><a href='Category/Label URL'  title='Navigation Alt Title'><span>WordPress</span></a></li>
<li><a href='Category/Label URL'  title='Navigation Alt Title'><span>Blogger</span></a></li>
</ul>
</nav>

Now look at the below script and find what differences you can see? I have added schema.org markup in this navigation just by adding few attributes. This is very easy to add.  

<nav id='topnav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul class='bs-menu' id='topmenunav'>
<li><a href='Category/Label URL' itemprop='url'  title='Navigation Alt Title'><span itemprop='name'>WordPress</span></a></li>
<li><a href='Category/Label URL' itemprop='url'  title='Navigation Alt Title'><span itemprop='name'> Blogger </span></a></li>
</ul>
</nav>

Adding Site Navigation Element on your Blog Menu

For making compatible navigation with schema.org markup first we have to add Site Navigation Element. In the above navigation script default code is <nav id='topnav'> and I have converted with below schema.org markup. But navigation script is same.
<nav id='topnav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>

Adding URL Property on existing navigation URL.

After adding site navigation element we have to add URL property which is help to apply markup on each URL of Label or Category. Now again look at the below part. Here is the URL part. For smooth navigation we add Label or categories or any page’s URL in navigation system. And for adding schema.org markup attribute you have to denote it by itemprop attribute.
  • Without Schema.org Markup <a href='Category/Label URL' title='Navigation Alt Title'>
  • With Schema.org Markup <a href='Category/Label URL' itemprop='url'  title='Navigation Alt Title'>
For adding small description about your Blog Label/Category I have added title='Navigation Alt Title' but this is not mandatory to add. You can either use it or not for schema.org but this is good for search engine.

Adding Name Property on existing navigation URL.

Name property generally used for item’s name. Now it’s time to make changes on Navigation item’s title. Suppose you are wanted to display Blogger label or category on your site. So the script might be like below which is without any schema.org markup
<span>Blogger</span>
But search engine won’t understand what Blogger is? So I have added a name property of schema.org markup as a result now it will give information to search robot that this is your Blog Label or Category name (The name of item).  
<span itemprop='name'> Blogger </span>
You have to change all of your Navigation’s items one by one. If you have 2 navigation menu like my site then also add the same schema.org markup on second navigation menu.

I hope you have understood the tutorial and able to add schemar.org markup on your site’s navigation. If you face any trouble then feel free to write me.
How to Add Schema.org Markup on Site Navigation?
4 Stars stars - "How to Add Schema.org Markup on Site Navigation? " We know that Schema.org Markup is language which makes web language easy to understand by sea...

Post a Comment

vai, amar bdgraphicdesigner.com site tite alexa rank astece na keno? alexa te site add koreci tao kaj hosce na. lekha thake "No data available". ekta solution din pls.

New site ekto somoy ney. Minimum 2-4 weeks lage rank show korte. R Alexa temon kono factor na. Search engine a kono effect nai. Ata Amazon er product. currently Google kono Rank kore na, tai Alexa ekto top a, but Actually site er kono value ba traffic increase kore na.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *