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 is to stand out from the other pages in the search results.

The first way to do this is to write unique and attractive title tags and meta descriptions. These are your opportunities to convince someone to click your listing instead of the others.

There are other ways to stand out, too. For instance, you can install end-encoded 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 have something in common- a parent page. Under each parent page is a child page. This makes it easy to set up (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 and SEO, which is the parent of the SEO audit page.

Personal Theory: Google likes websites with a hierarchical structure. Google uses this structure to determine the purpose and intent of each page. If you want to reorganize 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 server should render your breadcrumbs, 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 of ways to do this. I will use the Microdata method instead of RDFa (which the Yoast Plugin uses).

1. Tell Google 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 must add an extra <span> to surround the anchor text’s link and 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>

You can test this by using the Google Rich Results Testing Tool. You can copy your HTML into this tool and test it. You can also test the page when it’s live on the web.

Bonus: More than Showing Up in the SERPs

Breadcrumbs can do more than improve your SERP listing. They also generate internal links.

Internal link building is one of the most overlooked SEO tactics. Most SEOs know 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. They sometimes overlook the importance of internal links from within your website. Breadcrumbs can help with this.