Memasang Breadcrumb Json-LD pada Template Hugo

JagoTekno – Memasang breadcrumb pada blog sangat berguna pada sisi SEO nya. Json LD merupakan format yang disarankan oleh google. Mari kita pasang di template hugo yang sudah dibuat.

Pertama buat sebuah partial bernama breadcrumbs.html

Kemudian paste kode berikut ini di dalamnya :

    <!-- Breadcrumbs for articles -->
    {{ $urlParts := sub (len (split .RelPermalink "/")) 2 }}
    
    <!-- Post pages -->
    {{ if eq $urlParts 3 }}
    <script type="application/ld+json">
    {
    	"@context": "http://schema.org",
    	"@type": "BreadcrumbList",
    	"itemListElement": [{
    		"@type": "ListItem",
    		"position": 1,
    		"name": "Site",
    		"item": "{{ .Site.BaseURL }}"
    	},{
    		"@type": "ListItem",
    		"position": 2,
    		"name": "{{ .CurrentSection.Parent.Title }}",
    		"item": "{{ .CurrentSection.Parent.Permalink }}"
    	},{
    		"@type": "ListItem",
    		"position": 3,
    		"name": "{{ .CurrentSection.Title }}",
    		"item": "{{ .CurrentSection.Permalink }}"
    	},{
    		"@type": "ListItem",
    		"position": 4,
    		"name": "{{ .Title }}",
    		"item": "{{ .Permalink }}"
    	}]
    }
    </script>
    <!-- Subsection pages -->
    {{ else if eq $urlParts 2 }}
    <script type="application/ld+json">
    {
    	"@context": "http://schema.org",
    	"@type": "BreadcrumbList",
    	"itemListElement": [{
    		"@type": "ListItem",
    		"position": 1,
    		"name": "Site",
    		"item": "{{ .Site.BaseURL }}"
    	},{
    		"@type": "ListItem",
    		"position": 2,
    		"name": "{{ .CurrentSection.Parent.Title }}",
    		"item": "{{ .CurrentSection.Parent.Permalink }}"
    	},{
    		"@type": "ListItem",
    		"position": 3,
    		"name": "{{ .Title }}",
    		"item": "{{ .Permalink }}"
    	}]
    }
    </script>
    <!-- Check for main section pages and meta pages (about, disclaimer) -->
    {{ else if eq $urlParts 1 }}
    <script type="application/ld+json">
    {
    	"@context": "http://schema.org",
    	"@type": "BreadcrumbList",
    	"itemListElement": [{
    		"@type": "ListItem",
    		"position": 1,
    		"name": "Site",
    		"item": "{{ .Site.BaseURL }}"
    	},{
    		"@type": "ListItem",
    		"position": 2,
    		"name": "{{ .Title }}",
    		"item": "{{ .Permalink }}"
    	}]
    }
    </script>
    {{ end }}

      <!-- End of Breadcrumb -->

Kemudian edit file baseof.html untuk memanggil kode partial breadcrumb yang telah dibuat. Letakan di dalam body.

<body>
	{{ partial "breadcrumbs.html" . }}
</body>

Jika masih di develop di localhost, ubah baris baseURL pada file config.toml dengan menambahkan http, menjadi seperti ini :

baseURL = "http://localhost:1313/"

Sekarang silahkan test template hugo anda pada Google Rich Result Test

Sehingga hasilnya menjadi seperti ini :

Sekian, semoga bermanfaat.

Tinggalkan komentar