Enhance your SERPs with Breadcrumb Markup

Just because your website ranks in Google, doesn’t guarantee you’ll get any traffic. One way you can help: stand-out from the other pages in the search results.

The first way to do this is write unique and attractive title tags and meta descriptions. These are your opportunity to convince someone to click your listing- as opposed to the others.

There are other ways to stand-out, too. For instance, you can install end encode breadcrumbs on your website.

Can Your Website Handle Breadcrumbs?

For your website to have breadcrumbs, you’ll need a semantic structure. That means you’ll need to organize your website into a hierarchy. For example:

• http://mywebsite.com/parent/child.html
• http://mywebsite.com/parent/another-child.html
• http://mywebsite.com/second-parent/child.html
• http://mywebsite.com/second-parent/yet-another.html

but not

• http://badexample.net/one-page.html
• http://badexample.net/another-page.html
• http://badexample.net/third-page.html

The first sets of pages each have something in common- a parent page. Under each parent page is a child page. This makes it easy to setup (and automate) breadcrumbs. When each page is not organized into similar types, you might be able to use breadcrumbs- but it’s more difficult.

You can see how I’ve done this, on this site, too. For instance, this blog post has a breadcrumb. You can see it right under the post’s title. As you can tell, this post is a daughter of the parent page, “blog”, which is a daughter of the homepage.

I’ve also done this on my service-specific pages. For instance, if you visit the SEO Audit page you’ll see that it’s a daughter of several pages. The homepage is the parent of services which is the parent of SEO which is the parent of the SEO audit page.

Personal Theory: I believe Google likes websites with a hierarchical structure. I believe Google uses this structure to determine the purpose and intent of each page. If you want to re-organize your website into a parent-child hierarchy, be sure to 301 redirect all your old URLs to the new ones.

How to Install Breadcrumbs

The easiest way to install breadcrumbs is to use your CMS. Your breadcrumbs should be rendered by your server, and not the browser. That means JavaScript cannot generate your breadcrumbs- if you want to see the benefits of breadcrumbs.

In my case I’ve used the Yoast SEO plugin to help generate the breadcrumbs. All I needed to do was add a little code to my theme.

If you are not using a CMS- or your CMS doesn’t support breadcrumbs- you can enter them manually. The best way is to use an Unordered List (<ul>) that appears horizontally, using CSS. Do this by setting each item (<li>) in the list to display: inline. Each item in your list should reflect the hierarchical path to reach the item in question. So, if we return to our example, it should read:

<ul>
<li style=”display:inline;”><a href=”http://mywebsite.com/”>Home</a></li>
<li style=”display:inline;”><a href=”http://mywebsite.com/parent/”>Parent></a></li>
<li style=”display:inline;”><a href=”http://mywebsite.com/parent/child.html”>Child</a></li>
</ul>

This assumes http://mywebsite.com/parent/ is a page that actually exists.

Of course, rather than embed your CSS in your HTML, it would be even better to add a class to your CSS file.

How to Encode Breadcrumbs

The code above will give you breadcrumbs but that’s not enough to appear in the search results. In fact, even if your CMS adds breadcrumbs to a page, you might have some more work to do. You’ll need to use Schema markup. This tells Google what HTML elements mean.

There are a couple ways to do this. I’m going to use the Microdata method- as opposed to RDFa (which the Yoast Plugin uses).

1. Tell Google that each item is a breadcrumb by linking to the breadcrumb itemtype with an itemscope. Just add itemscope itemtype=”http://data-vocabulary.org/Breadcrumb” to each <li>
2. Tell Google which HTML element within the breadcrumb itemscope is the URL. Declare the url itemprop. For each link to a page, add itemprop=”url”.
3. Tell Google which HTML element with the breadcrumb itemscope is the  title. Declare the title itemprop. In our example, you’ll need to add an extra <span> to surround the anchor text’s link and set give the span the itemprop=”title”.

This is what it will look like when you’re done.

<ul>
<li style=”display:inline;” itemscope=”” itemtype=”http://data-vocabulary.org/Breadcrumb”><a href=”http://mywebsite.com/” itemprop=”url”>Home</li>
<li style=”display:inline;” itemscope=”” itemtype=”http://data-vocabulary.org/Breadcrumb”><a href=”http://mywebsite.com/parent/” itemprop=”url”>Parent</li>
<li style=”display:inline;” itemscope=”” itemtype=”http://data-vocabulary.org/Breadcrumb”><a href=”http://mywebsite.com/parent/child.html” itemprop=”url”>Child</li>
</ul>

Test this by using the Google Structured Data Testing Tool.  You can copy your HTML into this tool for a test. You can also test the page when it’s live, on the web. Heck, test this page to see the breadcrumbs.

Bonus: Include Your Website’s Name

If you want to take your breadcrumbs a step further, you can tell Google the name of your website. In this case rather than use your URL in the breadcrumb, Google will use the name of the website. This is especially useful if your website doesn’t match your name or if your URL is very long.

To help you do this, I’ve created a Google Spreadsheet to help. Just follow the directions on the second tab of the spreadsheet and put the JSON code onto every page of your website.

Bonus: More than Showing Up in the SERPs

Breadcrumbs can do more than give you a better SERP listing. When you use breadcrumbs you are generating internal links.

Internal link building is one of the most overlooked SEO tactics. Most SEOs know that orphaned pages (pages without links) don’t do well on Google. They also know that the more links from other websites, the better a page performs, too. They sometimes overlook the importance of internal links from within your website. Breadcrumbs can help with this.

Have you seen a benefit from installing breadcrumbs on your site? Having trouble following my directions? Leave your comments and questions, below.