How to Add Breadcrumbs to Your Website for Navigation and SEO

Breadcrumbs are the short trail of links usually shown near the top of a page, below the main menu, for example Home > Services > Web Hosting. They tell a visitor exactly where they are in your site's structure and let them jump back to a parent page in one click. On larger sites with several levels of categories or products, breadcrumbs cut down on how often visitors hit the back button or get lost.

Why Breadcrumbs Matter for SEO, Not Just Navigation

Breadcrumbs also carry an SEO benefit. When you mark them up correctly with structured data, Google can show the breadcrumb trail directly in search results instead of a plain URL, which makes your listing easier to scan and can improve click-through. They also reinforce your site's internal linking structure, helping search engines understand how your pages relate to each other.

Don't add a breadcrumb trail to your homepage itself. Breadcrumbs are for showing a visitor's path within the site, so they only make sense on inner pages, categories, and posts.

Adding Breadcrumbs to a WordPress Website

If your site runs WordPress, the easiest route is through an SEO plugin rather than custom code.

1. If you already use an SEO plugin such as Yoast SEO or Rank Math, go to its settings area and find the Breadcrumbs section (in Yoast this is under Yoast SEO > Settings > Breadcrumbs).
2. Toggle the breadcrumbs feature to Enabled and save your changes.
3. Most plugins will then show a short code snippet, something like a PHP function call. Open your theme's template file (commonly single.php or page.php, edited via Appearance > Theme File Editor) and paste that snippet just above the page title.
4. Many modern themes already include breadcrumb support built in. Check your theme's own customizer first, under a section often labeled Breadcrumbs or Layout, before editing theme files directly.

If editing theme files feels risky, a block-based theme may let you add a breadcrumb block directly in the Site Editor instead, with no code required.

Adding Breadcrumbs to a Custom-Coded Website

On a custom-built site, you add breadcrumbs as a small navigation element plus matching structured data so search engines recognize it as a breadcrumb trail, not just a row of links.

1. Build the visible trail as a simple ordered list wrapped in a nav element, with each step a link except the current page.
2. Add matching BreadcrumbList structured data in JSON-LD format in the page's head section so Google can read the trail as schema markup rather than guessing from the HTML.
3. Keep each breadcrumb label identical to the actual page title it links to, so visitors and search engines see a consistent path.

For more on how structured data works and how to add it correctly, see What Is Schema Markup (Structured Data) and How Do You Add It to Your Website?.

Checking That Breadcrumbs Are Working

1. View the page in your browser and confirm the trail shows the correct path for that page.
2. Use Google's Rich Results Test tool against the live page URL to confirm the BreadcrumbList markup is recognized without errors.
3. Keep in mind Google decides on its own whether to actually display the breadcrumb trail in search results. Valid markup makes it eligible, but doesn't guarantee it will always appear.