Membuat Breadcrumb Dengan Markup Di Hugo

June 24, 2022

Apa itu Breadcrumbs

Breadcrumbs adalah elemen pada website yang memiliki fungsi sebagai navigasi halaman. Breadcrumbs bisa disebut sebagai navigasi sekunder dalam website, karena breadcrumbs dapat menunjukan urutan struktur halaman-halaman yang sudah dibuka oleh pengunjung website.

Breadcrumbs ini belum tentu bisa ditemukan pada setiap website, karena ada beberapa website yang tidak memiliki breadcrumbs. Padahal jika Anda tahu breadcrumbs ini memiliki banyak fungsi penting untuk website. Agar lebih jelasnya berikut kami berikan contoh penerapan breadcrumbs pada website dan blog.

Fungsi Breadcrumbs

Breadcrumbs memiliki fungsi sebagai alat navigasi pada website untuk memudahkan pengunjung setelah menu utama pada header website. Pengunjung tidak perlu membuka halaman dari awal, cukup dengan membuka struktur breadcrumbs sebelumnya saja.

Contohlah website memiliki struktur breadcrumbs Home > Teknologi > Cara Membuat Website, untuk kembali ke kategori Teknologi, Anda tidak perlu kembali ke Home website, cukup dengan mengklik breadcrumbs Teknologi. Nah saat sudah dibuka Anda akan masuk pada halaman sebelum Anda membuka artikel Cara Membuat Website.

Cara Membuat Breadcrumbs Structured Data

Breadcrumb ini harus dibuat secara JSON

Cari Element <head>

Copy kode di bawah ini lalu paste di antara Elemen <head disini </head>

{{- if and (eq .Type "blog") (.IsPage) }}
{{- $baseURL := "/" | absURL -}}
{{- $dot := . -}}
{{- $dot.Scratch.Set "path" "" -}}
{{- $dot.Scratch.Set "breadcrumb" slice -}}
{{- $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" -}}
{{- $.Scratch.Add "path" .Site.BaseURL -}}
{{- $.Scratch.Add "breadcrumb" (slice (dict "url" .Site.BaseURL "name" "home" "position" 1 )) -}}
{{- range $index, $element := split $url "/" }}
  {{- $dot.Scratch.Add "path" $element -}}
  {{- $.Scratch.Add "path" "/" -}}
  {{- if ne $element "" -}}
    {{- $.Scratch.Add "breadcrumb" (slice (dict "url" ($.Scratch.Get "path") "name" . "position" (add $index 2))) -}}
  {{ end -}}
{{ end -}}
<script type="application/ld+json">
  [{
  "@context": "https://schema.org",
  "name": "Breadcrumbs",
  "itemListElement": [{{ $list := $.Scratch.Get "breadcrumb" }}{{ $len := (len $list) }}{{ range $index, $element := $list }}{{ if ne .position 1 }},{{ end }}{
    "@type": "ListItem",
    "position": {{ .position }},
    "item": {
      {{- if ne (add $index 1) $len }}
      "@type": "WebPage",
      "@id": {{ .url }},
      "url": {{ .url }},
      "name": "{{ .name | humanize | title }}"
      {{ else -}}
      "@id": {{ .url }}
      {{ end -}}
      }
  }{{ end }}]

Cara membuat Breadcrumbs Partial

Breadcrumb ini harus dibuat secara partial.

Buat file partial untuk breadcrumb html
contoh /layout/partial/breadcrumb.html

Copy kode di bawah ini lalu paste ke breadcrumb.html

{{ $siteUrl := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
{{ $.Scratch.Add "sitePath" .Site.BaseURL }}
{{ $.Scratch.Add "siteBreadcrumbs" (slice (dict "url" .Site.BaseURL "name" "home" "position" 1 )) }}
{{ range $index, $element := split $siteUrl "/" }}
  {{ $.Scratch.Add "sitePath" $element }}
  {{ $.Scratch.Add "sitePath" "/" }}
  {{ if ne $element "" }}
    {{ $.Scratch.Add "siteBreadcrumbs" (slice (dict "url" ($.Scratch.Get "sitePath") "name" . "position" (add $index 2))) }}
  {{ end }}
{{ end }}
<nav aria-label="breadcrumbs" class="breadcrumbs">
  <ul class="breadcrumbs__list" role="list">
  {{- range $.Scratch.Get "siteBreadcrumbs" }}
    <li><a href="{{ .url }}">{{ humanize .name }}</a></li>
  {{ end -}}
  </ul>
</nav>