Breadcrumbs

Breadcrumbs are a navigation path that shows users where they are on a website and how to navigate back to previous levels. Breadcrumbs improve both user experience (UX) and SEO by making it easier for users and search engines to understand the structure of the website.

Breadcrumb example

Home > Categories > SEO > Breadcrumbs

In HTML, breadcrumbs often appear like this:

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="https://clickin.dk/">Hjem</a></li>
    <li><a href="https://clickin.dk/seo/">SEO</a></li>
    <li>Breadcrumbs</li>
  </ol>
</nav>

Why are breadcrumbs important?

1. Improved user experience (UX)

• Provides a quick overview of the page’s location
• Reduces click distance and makes navigation more intuitive
• Helps users return to previous levels without using the browser’s “Back” button

2. SEO Benefits

• Google uses breadcrumbs in search results, making links more clickable
• Helps search engines understand the website better
• Reduces bounce rate by offering alternative navigation options

3. Less reliance on main navigation

• Especially useful for e-commerce websites and large websites with many categories

Types of breadcrumbs

1. Hierarchical (location-based)

• Shows the page’s location in the website structure
• Eksempel: Home > Clothing > Mens clothing > Shirts

2. Path-based

• Shows the user’s specific navigation through the website
• Eksempel: Home > Offer page > Product page > Blog > Contact

3. Dynamic (attribute-based)

• Often used on e-commerce websites with filtering
• Example Home> Laptops > Apple > MacBook Pro

Best Practices for breadcrumbs

• Keep them simple and intuitive: use logical categories and avoid long paths
• Use structured data (Schema Markup): Implement schema.org for better SEO
• GøMake them clickable: Every breadcrumb (except the current page) should be a link
• Place them at the top of the page: Typically just below the navigation menu

Example of structured data (Schema Markup)

To optimize breadcrumbs for SEO, you can use JSON-LD:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Hjem",
      "item": "https://clickin.dk/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO",
      "item": "https://clickin.dk/seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Breadcrumbs"
    }
  ]
}

Breadcrumbs are an important part of a website, both for usability and your SEO strategy. They help users navigate easily, reduce bounce rates, and improve Google indexing.