Comprehensive guide to adding Breadcrumb Schema integration

Seo

How to add Schema integration to a website’s breadcrumbs

Breadcrumbs help visitors see the hierarchy and origination of pages and to guide them through the website. It is a great way for visitors to be able to go back to a specific option. Breadcrumbs typically look like this –

Adidas Original Breadcrumbs

Schema helps make these breadcrumbs easier for search engine crawlers to understand that they are there and in what order. Often, websites with schema will also have a different look in the search engine results page.

Adidas SERP without breadcrumb schema

Above is a landing page without schema integration.

Scott Rees Whiplash SERP with Schema

Above is a landing page with schema integration.

How to add it into the HTML

Schema in general is hard coded into the HTML so that it appears on every page. The code is nestled into the breadcrumb code and is invisible to everyone, below is a guide on how it is done. It is heavily advised to check Schema.org on the principles of the protocol first as schema should not be attempted by novices as it can be a lot of wasted hours figuring it out.

 Breadcrumb 1

This sets that the following is a division entitled breadcrumbs. The item is a breadcrumb the url is the following and the title for the breadcrumb is the following.

< span class=”divider breadcrumb-arrow” >//< /span > < This is a graphic “//”

This is purely a graphic.

 BREADCRUMB 2

This is exactly the same as the first breadcrumb except the opening div class (which it doesn’t need) and obviously the URL and the title correspond to the second breadcrumb.

< span class=”divider breadcrumb-arrow” >//< /span > <- This is a graphic “//”

Again, this is just a graphic.

 Breadcrumb 3

This is exactly the same as the second breadcrumb except the opening div class (which it doesn’t need) and obviously the URL and the title correspond to the third breadcrumb. It also ends by closing all the open divisions. Also note the class=”current” this is to tell the crawlers that this is current page (the page the visitor is actually on).

Closing

Breadcrumb schema is a seriously simple piece of code to add to your website. Schema may seem confusing at first but once you understand how it works you realise how easy it is.

Advertisements

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 )

Google+ photo

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

Connecting to %s