How to add breadcrumbs to a website

Before you start

• A site with a genuine hierarchy
• Access to the page templates

The steps

1. 1

   Step 1: Confirm there is a hierarchy to show

   Breadcrumbs describe position. On a flat site with no levels they add clutter and no information.

2. 2

   Step 2: Render a visible trail

   A nav element with aria-label="Breadcrumb" containing an ordered list, above the page heading.

3. 3

   Step 3: Mark the current page

   The last item is not a link, and carries aria-current="page".

4. 4

   Step 4: Use real labels

   The words a visitor would recognise, not internal taxonomy names.

5. 5

   Step 5: Add BreadcrumbList markup

   With position, name and item for each level, matching the visible trail exactly.

6. 6

   Step 6: Generate both from one source

   So the markup cannot drift from the display when a template changes.

7. 7

   Step 7: Validate

   Rich Results Test, then check the built HTML rather than the template.

What they earn you

Google replaces the URL in search results with the breadcrumb trail, which reads better than a path full of slugs. They also give a visitor arriving from search an immediate sense of where they are, which reduces the bounce that follows disorientation.

The violation to avoid

Markup describing a hierarchy the page does not display. Emitting a three-level BreadcrumbList on a page showing no breadcrumbs is a structured-data mismatch, and it is easy to commit when the markup is generated separately from the template.

Where they go on the page

Above the h1, in the reading order, so a screen reader user meets the trail before the heading rather than after it. Keep them out of the main navigation landmark — a separate nav element with its own aria-label lets assistive technology list them as a distinct navigation region, which is what they are.

The background behind this

Schema markup that does something, and the kind that risks a penalty covers the reasoning in about 3 minutes — free, ungated, written from client work.

Who wrote this

Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada, Ireland and Pakistan. These procedures are the ones I run on client work, written down rather than invented — including the ones where the honest answer is that the fix is not available on your current hosting.