JSON-LD: How to Implement BreadcrumbList Using JSON-LD Example

BreadcrumbList

• Why Use JSON-LD?

A BreadcrumbList give you a trail of links who lead your users from your main domain to the page who landed on the searchpage. For instance lets you own www.example.com and have a page at www.example.com/news/puppets/brand-new-dog-discovered.html.

If you used BreadcrumbList on that last page, your SERP's would show up as www.example.com > News > Puppets right under the title of your page instead of just showing the full URL. Pretty neat, huh?

As of SEO, it dont provide you with any benefits other than letting the search engines understand your site structure better. Not to mention your page looks more professional in SERP's

• Why Use JSON-LD?

Minimal Code Example

<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "http://example.com",
"name": "Website Name"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "http://example.com/news",
"name": "News"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "http://example.com/news/puppets/",
"name": "Puppets"
}
},
{
"@type": "ListItem",
"position": 4,
"item": {
"@id": "http://example.com/news/puppets/awesome-new-puppet-discovered.html",
"name": "Awesome new puppet discovered!"
}
}]
}</script>

Minimal code breakedown

• Why Use JSON-LD?

That is the minimal one. Not even a single error and it works flawlessly. Tested it modified to my website and did a "fetch as google" in Webmaster Tools. After that did a Google search using site:jsonld-examples.com and it was already active just minutes after uploading.
Basicly you just add ListItem's and mark them with positions and use item {} with "@id" and name to mark what URL and name the breadcrumbs will get.
There are addons wich may suit your site better, like adding a picture in SERP's. More on that after the code below.

Advanced Code Example

<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@type": "WebSite",
"@id": "http://example.com",
"image": "http://example.com/images/tumbnail-website.png",
"name": "Website Name"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@type": "WebPage",
"@id": "http://example.com/news",
"image": "http://example.com/images/tumbnail-news.png",
"name": "News"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@type": "WebPage",
"@id": "http://example.com/news/puppets/",
"image": "http://example.com/images/tumbnail-puppets.png",
"name": "Puppets"
}
},
{
"@type": "ListItem",
"position": 4,
"item": {
"@type": "WebPage",
"@id": "http://example.com/news/puppets/awesome-new-puppet-discovered.html",
"image": "http://example.com/images/tumbnail-awesome-new-puppet-discovered.png",
"name": "Awesome new puppet discovered!"
}
}]
}</script>

Advanced code breakedown

The difference between the simple JSON-LD markup and this a bit more advanced one is "@type" and image. To be honest I doubt the "@type" will do anything or help you SEO vice at all. Notice the WebSite on domain and WebPage on everything else. Thats not a typo, thats how it is supposed to be.
The image on the other hand serve a specific purpose. Ever seen images in SERP's? Breadcrumbs is just one of the ways to get them. I have not found ANY perferred/best practice image size in ListItem, but if you Google and check the sizes used they are 130px wide and 100px in height.

Final words

BreadcrumbList is one extremely easy and one of the things you see being utilized the fastest. As mentioned before the SEO impact is minimal. But as it is so easy to set this up using JSON-LD, I dont see any reasons not to use it.

• Why Use JSON-LD?