In this post we will learn how to add breadcrumb navigation in blog posts. That breadcrumb navigation will be Google supported. It means your breadcrumb navigation will be visible in Google search results. We will learn adding breadcrumb navigation in WordPress and Blogger both.
What is Breadcrumb Navigation?
Breadcrumb Navigation is a navigation system which display site path. In other words breadcrumb navigation show some “jump to” options where you can jump from current page to its category page or main page. When we add breadcrumb navigation in blog posts it shows that the post belongs to which category and which is site’s main or index page.
Contents we will cover in this post.
We will see here how breadcrumb navigation works and display.
You can see in the image. The post is “Biggest List of Do Follow Blog Directories” where I have given a biggest list of Do Follow Blog Directories. The do follow blog directories is a SEO term. So I put this post in SEO category. That is why the breadcrumb navigation is showing Home page then SEO Category then post name (post breadcrumb).
So now we know that the breadcrumb navigation show root directory of website and particular category decided by us then the post tile.
Note: Only primary category will display in Breadcrumb.
You can see in the image how breadcrumb navigation display in Google search results. Breadcrumb Navigation is a schema property or you can say a structured data type which is readable by Google. When ever Google fetch and render a website. It read all structured data types and try to display them in Google search results as rich snippet. All structured data types are not visible but they make it easy to understand your website. Two main structured data types that I love are Breadcrumb Navigation and Ratings.
I only use Yoast SEO plugin to add Breadcrumb Navigation in WordPress. That is easy and takes just few steps to setup breadcrumb navigation in WordPress posts. There are many other plugins and themes which provide breadcrumb navigation but the best and Google supported breadcrumb navigation are provided by Yoast SEO plugin.
- Go to Theme.
- Click Edit HTML.
- Search this code.
<b:includable id='post' var='post'>
by pressing Ctrl+F.
- Replace the above code with the following code.
<b:includable id='post' var='post'> <b:if cond='data:blog.pageType == "item"'> <div itemscope='' itemtype='http://data-
vocabulary.org/Breadcrumb'> <div class='jekeshBreadCrumbs'> <a expr:href='data:blog. homepageUrl' itemprop='url' title='Home'> <span itemprop='title'>Home</span></ a>» <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <span typeof='v:breadcrumb'> <a expr:href='data:label.url' itemprop='url' title='Categories' property='v:title' rel='v:url'> <span itemprop='title'><data:label. name/></span> </a> </span> <b:if cond='data:label.isLast != "true"'>| </b:if> </b:loop> </b:if> » <a expr:href='data:post.url' itemprop='url' title='Post Title'> <span itemprop='title'> <data:post.title/> </span> </a> </div> </div> </b:if>
Breadcrumb Navigation is added in Blogger now.
Now reload your blogger blog and open any post. You will see breadcrumb navigation.
Then go to Google’s Structured Data Testing Tool and check. is your breadcrumb navigation working fine or not.
Now go to Google Webmaster Tools and fetch and render your blog for crawling new structured data (breadcrumb navigation) from your blog.
Learn more about breadcrumb navigation at:
More from jekesh kumar oad: