Cara Membuat Breadcrumb SEO: Panduan Implementasi

Breadcrumb adalah navigasi sekunder yang menunjukkan
posisi halaman dalam hierarki website.

Contoh:
Home > Category > Subcategory > Product

User bisa navigate balik dengan mudah.

1. Google menampilkan di SERP
2. Membantu crawling dan indexing
3. Menunjukkan site structure
4. Mengurangi bounce rate
5. Meningkatkan UX

1. Hierarchy-based:
   Home > Electronics > Phones > iPhone

2. Attribute-based:
   Home > Phones > Brand: Apple > Screen: 6.1"

3. History-based:
   Home > Page viewed before > Current page
   (Least useful for SEO)

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/category/">Category</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">Current Page</li>
  </ol>
</nav>

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 0.5rem;
  color: #6c757d;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.breadcrumb-item a {
  color: #007bff;
  text-decoration: none;
}

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://example.com/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Category",
        "item": "https://example.com/category/"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Current Page",
        "item": "https://example.com/category/current-page/"
      }
    ]
  }
</script>

Required properties:
- @type: BreadcrumbList
- itemListElement: Array of ListItems
  - position: Number (1, 2, 3...)
  - name: Display text
  - item: Full URL (except last item)

Last item:
- Can omit "item" property
- Represents current page

Test schema:
https://search.google.com/test/rich-results

Enter URL → Check for errors.
Validate before publishing.

// Check if theme supports breadcrumb
if (function_exists('yoast_breadcrumb')) {
    yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}

// In theme template file
<?php
if (function_exists('yoast_breadcrumb')) {
    yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}
?>

// Enable in:
// Yoast SEO → Search Appearance → Breadcrumbs

// Enable breadcrumb
<?php
if (function_exists('rank_math_the_breadcrumbs')) {
    rank_math_the_breadcrumbs();
}
?>

// Configure in:
// Rank Math → General Settings → Breadcrumbs

function custom_breadcrumb() {
    $separator = ' > ';
    $home_title = 'Home';

    echo '<nav aria-label="Breadcrumb">';
    echo '<ol class="breadcrumb">';

    // Home
    echo '<li class="breadcrumb-item">';
    echo '<a href="' . home_url() . '">' . $home_title . '</a>';
    echo '</li>';

    if (is_category() || is_single()) {
        // Category
        $category = get_the_category();
        if ($category) {
            echo '<li class="breadcrumb-item">';
            echo '<a href="' . get_category_link($category[0]->term_id) . '">';
            echo $category[0]->name;
            echo '</a></li>';
        }
    }

    if (is_single()) {
        // Post title
        echo '<li class="breadcrumb-item active">';
        echo get_the_title();
        echo '</li>';
    }

    echo '</ol></nav>';
}

<!-- layouts/partials/breadcrumb.html -->
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="{{ "/" | relURL }}">Home</a>
    </li>
    {{ range .Ancestors.Reverse }}
      <li class="breadcrumb-item">
        <a href="{{ .Permalink }}">{{ .Title }}</a>
      </li>
    {{ end }}
    <li class="breadcrumb-item active" aria-current="page">
      {{ .Title }}
    </li>
  </ol>
</nav>

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="{{ "/" | relURL }}">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    {{ $position := 2 }}
    {{ range .Ancestors.Reverse }}
      <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="{{ .Permalink }}">
          <span itemprop="name">{{ .Title }}</span>
        </a>
        <meta itemprop="position" content="{{ $position }}" />
      </li>
      {{ $position = add $position 1 }}
    {{ end }}
    <li class="breadcrumb-item active" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">{{ .Title }}</span>
      <meta itemprop="position" content="{{ $position }}" />
    </li>
  </ol>
</nav>

✓ Start with home
✓ Match URL structure
✓ Make all items clickable (except current)
✓ Use short, descriptive names
✓ Add schema markup
✓ Consistent across site
✓ Place at top of content

✗ Make breadcrumb too long
✗ Use breadcrumb for pagination
✗ Duplicate in footer
✗ Hide on mobile
✗ Use current page as link
✗ Include "You are here" text

/* Mobile breadcrumb */
@media (max-width: 768px) {
  .breadcrumb {
    font-size: 0.875rem;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Optional: Show only last 2 items */
  .breadcrumb-item:not(:nth-last-child(-n + 2)) {
    display: none;
  }
}

/* Arrow */
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
}

/* Slash */
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
}

/* Chevron icon */
.breadcrumb-item + .breadcrumb-item::before {
  content: url("chevron.svg");
}

Google replaces URL in SERP with breadcrumb:

Without breadcrumb:
https://example.com/category/product-name

With breadcrumb:
example.com › Category › Product Name

More readable for users.

Google may show breadcrumb if:
- Proper schema markup
- Clear site structure
- Consistent navigation
- Not guaranteed

Mobile may differ from desktop.

Structure:
☐ Starts with home
☐ Reflects URL hierarchy
☐ All items except last are links
☐ Aria-label for accessibility

Schema:
☐ JSON-LD BreadcrumbList
☐ Proper position numbers
☐ Full URLs in item property
☐ Validated without errors

Design:
☐ Clear visual separator
☐ Visible text contrast
☐ Works on mobile
☐ Consistent placement

Testing:
☐ Rich Results Test
☐ Check in GSC
☐ Test all page types
☐ Verify navigation works