DDMSEO - Full Stack Developer based in London

Optimize your website SEO with X-RAY SEO Auditor

Published: 19th Dec 2017 | Words: 1,069 | Reading Time: 6 minutes

Categories / Tags:

SEO
Schema
HTML

How to structure Schema breadcrumbs

Over the last few years I have come across various ways of integrating breadcrumb Schema into web pages. Some work, some don’t, and it still amazes me to see websites with pages that don have proper Schema integration. The advantage to breadcrumb Schema is that it makes very long URL’s look a lot better in the SERP (search engines results page). Sites that are very deep can have very long URL’s. While it’s a good idea to have short URL’s, if you have a very deep folder structure a long URL can be unavoidable.

Schema breadcrumb

Below is a pretty solid way to integrate breadcrumb Schema into your webpage and also allows you to integrate other Schema into your webpage without causing conflict. A breadcrumb schema on a webpage can be looked up as a single schema element. You may wish to have other Schema elements like an article or a product on the page with your breadcrumb. In these situations you must wrap these different Schemas in one containing webpage Schema or wrapper so to speak. If you don’t only one Schema will be picked up and you may not get the SERP display you want.

<html itemscope itemtype="http://schema.org/WebPage"> // primary schema wrapper

<div id="breadcrumb"> // wrap your breadcrumbs in a div or similar

   <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="https://ddmseo.com" itemprop="url">
         <span itemprop="title">Home</span>
      </a>
   </span>
   // end first breadcrumb
   <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="https://ddmseo.com/seo" itemprop="url">
         <span itemprop="title">SEO</span>
      </a>
   </span>
   // end second breadcrumb
   <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="https://ddmseo.com/articles/meta-title" itemprop="url">
         <span itemprop="title">Meta Title</span>
      </a>
   </span>
   // end third breadcrumb
</div>

<article itemscope itemtype="http://schema.org/Article">
   // another schema here, an article for instance
</article>

</html>

Schema breadcrumb breakdown

The explanation of the breadcrumb elements is very simple. Above we have 3 separate breadcrumbs leading from my home page down another level to a category page and finally down another level to an article page. A separator is placed between each breadcrumb for visual purposes for the user of the page only. The / separator is actually outside of each breadcrumb Schema and will not be picked up by search engines as part of the Schema. Each breadcrumb element is clearly defined as a separate breadcrumb element through the use of a span tag with a separate itemtype. Within the outer span is a link tag (a) with the breadcrumb link within. Finally within this link tag is a span tag which has the title of the link. This title is what will show is the SERP for each breadcrumb.

Schema breadcrumb SERP preview

This is a rough representation of how the breadcrumb will look in the SERP.

ddmseo.com › SEO

If your breadcrumb is too long for the SERP elements will start to be cut off. The first and last breadcrumb elements will always show and anything in between will be truncated (…). The first breadcrumb element will always be your website homepage and it will be comprised of your domain URL. The last element will alwys be the breadcrumb before your page (one level up). If your website has a very long URL unfortunately you’re at a disadvantage as more space will be taken up initially by your website URL size. There is nothing you can do about this apart from optimising the length of your titles to keep them as short while as informative as possible. Try to keep your breadcrumb titles fairly short otherwise only a couple of breadcrumb elements may end up showing. Breadcrumb Schema is a great thing to use for SEO if for some reason your have URL’s that look terrible and unprofessional and you want to increase your CTR (click through rate) in the SERP.

Rate this article

Average: 0.00 out of 5 / Votes: 0

Comments

Please login or register to post comments

Login | Register