How UX breadcrumbs and SEO improve on your website

Surely you have heard of breadcrumbs in digital marketing. These elements improve the user experience (UX) on your website and are also key to improving SEO. In this guide, we'll explain what they are, how they work, and how to implement them correctly.

What are breadcrumbs and what are they for?

A breadcrumb is a navigational element that shows the path that the user has followed within the structure of a website.

They are usually displayed at the top of the page and indicate the hierarchy of the content. For example:

From a user experience (UX) perspective, the goal of breadcrumbs is to make it easier to navigate within the website. They allow users to know where they are on the site and easily return to higher sections without needing to use the browser's back button (a button that if you think about it doesn't exist on many of the devices we use today).

However, from a SEO point of view, breadcrumbs also have a very important function. They help search engines understand the structure of the website, identify the relationship between different pages, and improve content crawling and indexing.

In addition, when properly implemented with structured data, Google can display breadcrumbs directly to search results, which improves visibility and can increase CTR. To have Google display your breadcrumbs in the snippet, and not in the modified URL, use the corresponding schema markup.

How to Implement Breadcrumbs

Implementing Schema Markup

In order to maximize SEO benefits, add structured data with schema.org for breadcrumbs. This helps Google identify and display the route correctly to search results. You can use JSON-LD to ensure that Google correctly understands your website's hierarchy. 

Make each part a link

Breadcrumbs should not only be indicative, but also clickable, except for the last element (the flat where we are). This link should be traceable, href of a lifetime, no weird stuff with JS. This allows users to go back to any previous section without getting lost along the way, and to Google's bot.

Make them visually clear

Use clear separators such as the ">" symbol to separate the different levels of the hierarchy and thus improve the readability of the breadcrumbs. Our general recommendation is that the colloquiums where they have always been, for a matter of usability and customs, top left. In the mobile topic  there is more debate and sometimes it can be counterproductive to put it there, you can look for other options. Now: keep in mind that if you place Ariadne's thread on PC but hide it on mobile, in the eyes of Google this link does not exist. Don't do it.

Where to place breadcrumbs?

Breadcrumbs should be in a visible place, usually at the top of the page, for easy navigation. On service pages, service category, product sheets, or blog posts, they can be used to improve accessibility. Also, if you're using a responsive design, make sure breadcrumbs are accessible on both desktop and mobile devices.