How to Enable SEO Breadcrumbs on Your Website

One of the best little beneficial changes you can make to your website, for the sake of user navigation and for Google ranking, is to implement breadcrumbs. And no, I’m not talking about eating a toasted sandwich over your server.

What Are Breadcrumbs?

Breadcrumbs are a technological innovation inspired by an ancient fairy tale. Remember the tale of Hansel and Gretel, where the children leave a trail of bread crumbs in the woods to mark their trail, so they can follow it home? That’s the concept, adapted for a digital age.

The difference is, when you’re putting breadcrumbs on a website, you don’t have to worry about stray ducks and squirrels and witches eating or hiding or moving the breadcrumbs. That always was a bit of an odd choice, to use food to mark your path. It seems like the most fragile possible way to rely on to get home, but that’s just me. Maybe back then forest animals didn’t like bread?

In any case, on a website, it’s just the concept of “finding your way home” that matters, not the fact that they used a degradable foodstuff. Breadcrumbs are most prominent on web forums, though they appear on websites of all sorts. For example, when you browse to a specific thread on a forum board, you might see something like this up at the top:

Forum Board Name > Board Section > Subforum Name > Thread Name

That’s a string of breadcrumbs. Each one of those entries is a link to what it shows itself to be. If you’re in a thread and want to go back to the subforum to see other threads on the same topic, you can click the subforum name. If you want to go all the way back to the board index, you can click the forum board name link.

Delicious.com used breadcrumbs that have Xs in them, which you can click to remove that section of the crumbs and take you back to the one-step-back section. For a blog, you might have a date-based system of crumbs, like:

Site Name > Blog > Year > Month> Day > Title of Post

Breadcrumbs are typically only used for content that is organized in a hierarchy. When content is all in a pool, you can’t organize them with categories. Ten blog posts wouldn’t have breadcrumbs leading from one to the next, and you wouldn’t use breadcrumbs to trace the path a user took to get where they are; their browser back button does that just fine. In other words, only use breadcrumbs for multi-level sites that have a logical flow from page to subpage to sub-subpage and onwards.

There are different types of breadcrumbs based on different types of hierarchy. They can all go as deep as necessary, though often stretching beyond 4-5 tiers can be detrimental to organization.

• Location-based breadcrumbs track the level of content. At the lowest level you have actual blog posts, a tier up is the category, a tier up from that is the broad topic, and the top tier is the site as a whole. This is often used for blogs and for web forums.
• Attribute-based breadcrumbs track attributes and categories for items, and are often used in e-commerce sites. For example, with cars, you might have Site Name > Cars and Trucks > Sedans > Buicks > Buick Regals > Specific Years.

There are also the rare path-based dynamic breadcrumbs, but these very rarely add anything to the user experience and, because they’re dynamic, can cause issues with link monitoring from Google.

Breadcrumbs are great for internal site linking and to help Google follow your site structure. When combined with a sitemap, they make certain Google has everything indexed. When you make category pages that include all of your blog posts within that category, it make it easy for users to browse as well. Plus, they’re an easy way for users to stay on your site rather than bounce, and they take up virtually no screen space; just a single line above the post and below the navigation.

It’s possible to fail with implementing breadcrumbs properly, though with the tools I’ll mention below, you shouldn’t have that issue. The number one problem people have is putting breadcrumbs in a location that mixes them in with navigation, which makes them lose their value. Some sites also skip primary navigation menus in favor of breadcrumbs, but breadcrumbs themselves are not a great navigation system. They are an aid for returning to previous pages, not for total site organization.

You can see examples, best practices, and tips about using breadcrumbs in general by heading over to this link. Thankfully, you don’t need to worry about coding breadcrumbs yourself; the tools below will help you do so.

Did I mention that in rich snippets, Google will sometimes show breadcrumbs if you have them implemented? They need to be short, and they need to use Schema.org markup, but if both criteria are met, you can see them appear in Google.

Breadcrumbs Using Yoast

This first method assumes you’re using WordPress as the basis for your blog. If you’re using some other CMS, you will have to find an equivalent for implementing breadcrumbs. If you’re using a custom site design, you should instead talk to your web developer about implementing breadcrumbs. They can probably do it fairly easily, though it may require some tweaking of your site design to fit them in.

Before we begin, make sure you do not have another general SEO plugin installed on your WordPress site. If you have one like the All-In-One SEO Pack, you will have conflicts installing this one.

The Yoast SEO plugin is perhaps one of the best plugins out there, and I would honestly recommend that you go get the premium version from their website. If you don’t want to pay for it – it’s $69 for a license – that’s fine. You can implement breadcrumbs with the basic version, which you can find here.

Download and follow the instructions to install the Yoast SEO plugin on your WordPress site. This will give you a lot of additional SEO features, up to and including analytics, breadcrumbs, categorization, and a lot more. It’s crazy how many little optimizations are included.

Next, go to your WordPress dashboard. In it you will find a new sidebar menu labeled SEO. Hover over it and click the advanced submenu. This will take you to a settings screen with a bunch of stuff Yoast allows you to configure. The first tab is the one we’re interested in, labeled “breadcrumbs.” Click it and click the “enable breadcrumbs” checkbox. This will give you access to a bunch of settings about how to format them. You can specify if you want the >, the >>, the /, or a different custom separator between breadcrumbs. You can also set the text that displays for your homepage crumb, which is always displayed. Customize this to your liking. Don’t worry much about the taxonomies section, it shouldn’t be an issue unless you use a lot of strange configurations for post types.

Next, you will need to actually implement the breadcrumbs code in your theme. Yoast is great, but it’s not smart enough to automatically insert itself into every theme made for WordPress. At the bottom of the breadcrumbs setting page you will see some PHP code to insert breadcrumbs manually.

You will want to copy this code and set it aside. Please note that if Yoast has changed their breadcrumb code since the last time I looked, you will need to copy their specific version of the code, not this code above.

Now, decide where on your theme you want the breadcrumbs to be displayed. Typically this will be above the content of a post, but below the navigation at the top of your site. Other custom locations will require slightly different steps, so only follow this positioning guide if you want them below the header.

You will need to go into your WordPress dashboard and click Appearance – Editor. You can also use FTP to access your server directly, and navigate to wp-content/themes/your theme. In either case, find and open header.php. This will be full of code that, if you’re not a coder, you might not understand. That’s fine. Just make sure you don’t delete anything or change anything.

You might want to use a code viewer like Firefox’s Firebug to examine the code on your live site, to find what elements surround the area you want to put your breadcrumbs. In the header area, you will typically find a subheading section of some sort. Putting your breadcrumbs code in after this section, before the </div> for it, will put them where you want.

Note: Always make a backup of any file you change before you upload a live version. If you accidentally break something, you will then be able to restore it easily, without resorting to a rollback and possible data loss.

Once you have found where you want to put the breadcrumbs, save the file and upload it if you didn’t edit it on your live server. Sorry I can’t give you any more specific placement instructions; it will vary from theme to theme. Talk to your web developer or ask the people who made your theme where the best placement would be. You can also see some examples of breadcrumbs in the header, footer, and a sidebar widget here.

Once you have that code saved and make sure it works on your site, you’re done. All you have left to do is play with those formatting options from before, if for some reason the defaults don’t work for you.

Yoast Breadcrumb Alternatives

What if you don’t want to or can’t use Yoast, for one reason or another? Thankfully, there are some other options available to you.

Breadcrumb NavXT – this plugin is specifically made just to be breadcrumbs, not to be part of a huge SEO pack. This means it will work with whatever SEO pack you happen to have installed, if it’s not Yoast. It’s free, of course, and it’s actively updated as recently as three weeks prior to the publication of this post. It has a very high rating, too; 4.6 out of 5 stars, with over 400,000 active installations. It works with Schema.org breadcrumbList and breadcrumb generation codes, and it gives you a lot of customization options. Honestly, the main reason this isn’t primarily suggested over Yoast is that Yoast has a bunch of additional features, all of which are super useful.

Really Simple Breadcrumb – this plugin is another one made just for breadcrumbs on WordPress sites, but I consider it a lower tier. It doesn’t have very many configuration options; in fact, the only way to customize it is to write custom CSS for the .breadcrumb class. This isn’t very convenient if you’re not a coder, unfortunately. Additionally, while the breadcrumbs plugin has a full 5 star rating, it’s only because it only has 9 reviews, out of 10,000 active installs, and it hasn’t been updated in over two years. Ordinarily, if this plugin had any greater effect, I wouldn’t even recommend something this old. Still, if all you want is the absolute minimum in terms of code and complexity, this will serve. Assuming it still works with the most recent versions of WordPress, of course.

SEO Breadcrumb – this plugin is another that hasn’t been updated in over two years, and as such is possibly not the best idea to install. Obviously, use it with caution if you suspect there might be an issue with implementation. That said, often it’s not an issue with such simple PHP code; there aren’t any loopholes to worry about. This one supports HTML5 microdata and can be used to display styles, as well as other formatting. You can see examples of the code it outputs on the plugin page to give it a look before installing it.

Unyson – this plugin converts the normal function of WordPress into a more drag and drop customization engine for a website. It essentially lets you customize the look and feel of your site like a premium theme without having to actually pay for a premium theme. Among the many features it includes is a breadcrumbs module, which allows you to place them automatically wherever you would like. Bonus points that, as of this writing, the plugin was updated within the last 12 hours. Of course, this is only valuable if you’re developing a new site or layout; it’s not great for established sites looking to just add one little feature.

Add Meta Tags – this plugin is a meta data optimization plugin that happens to have a breadcrumbs trail generator attached. It’s useful for basic hierarchical post types, but if you have anything customized with post types it might not work properly. At least it’s kept up to date and supported. Ask the devs if you can’t get it to work properly.

Any of the hundred other breadcrumb plugins. Breadcrumbs, it seems, are pretty easy to make. There are a dozen different breadcrumb plugins that aren’t even high profile enough to customize their plugin directory entry, and have under 100 active installs and 0 reviews. It’s up to you if you don’t like any of the above options to implement one yourself.