Cara Membuat Breadcrumb SEO: Panduan Implementasi

Breadcrumb navigation membantu user dan search engine memahami struktur website Anda. Implementasi yang benar memberikan SEO benefit dan better UX.

Apa itu Breadcrumb?

Definisi

Breadcrumb adalah navigasi sekunder yang menunjukkan
posisi halaman dalam hierarki website.
Contoh:
Home > Category > Subcategory > Product
User bisa navigate balik dengan mudah.

Manfaat SEO

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

Jenis Breadcrumb

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

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


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

HTML Structure

Basic HTML

<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>

CSS Styling

.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;
}

Schema Markup

JSON-LD BreadcrumbList

<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>

Schema Requirements

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

Validation

Test schema:
https://search.google.com/test/rich-results
Enter URL → Check for errors.
Validate before publishing.

WordPress Implementation

Theme Support

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

Yoast SEO

// In theme template file
<?php
if (function_exists('yoast_breadcrumb')) {
    yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}
?>
// Enable in:
// Yoast SEO → Search Appearance → Breadcrumbs

Rank Math

// Enable breadcrumb
<?php
if (function_exists('rank_math_the_breadcrumbs')) {
    rank_math_the_breadcrumbs();
}
?>
// Configure in:
// Rank Math → General Settings → Breadcrumbs

Custom Function

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>';
}
Hugo Implementation
Partial Template
<!-- 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>
With Schema
<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>
Best Practices
Do’s
✓ 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
Don’ts
✗ 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 Considerations
/* 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;
}
}
Separator Options
/* 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");
}
SERP Display
How Google Shows Breadcrumbs
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.
Requirements for Display
Google may show breadcrumb if:
- Proper schema markup
- Clear site structure
- Consistent navigation
- Not guaranteed
Mobile may differ from desktop.
Breadcrumb Checklist
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
Kesimpulan
Breadcrumb adalah navigasi sederhana tapi powerful untuk SEO. Implementasi dengan HTML semantik dan schema markup untuk benefit maksimal di SERP.