Menambahkan markup data terstruktur ke Hugo

Jika tema Hugo tidak mendukung Data Terstruktur...

Konten Halaman

Google menampilkan beberapa peningkatan dalam hasil pencarian seperti detail film, lowongan kerja, informasi acara, dan kursus, yang diambil dari Structured Data situs web. Berikut ini - Cara menambahkan Structured Data ke situs menggunakan generator Hugo.

Berikut adalah contoh data terstruktur resep dalam hasil pencarian Google. Data terstruktur resep dalam hasil pencarian Google

Berikut adalah langkah-langkah untuk menambahkan sesuatu seperti ini ke halaman Anda. Anda perlu

  • Menambahkan front matter halaman
  • Menambahkan kode tata letak partikel situs
  • Menghasilkan, memeriksa, dan mendeploy situs Hugo
  • Menguji data terstruktur dengan alat pengembang Google

Data terstruktur resep dijelaskan di https://developers.google.com/search/docs/appearance/structured-data/recipe .

Sebagai contoh, saya menunjukkan cara menambahkan data terstruktur FAQ ke halaman web.

Tambahkan front matter halaman

Buka kode markdown halaman Anda dan tambahkan kode berikut dengan data terstruktur FAQ jika Anda menggunakan toml dalam front matter


[faq]
title = "Ini adalah judul FAQ"
[[faq.section]]
question = "Apa yang akan kita lakukan pada pelaut mabuk?"
answer = "Menggunting perutnya dengan pisau karat"
+++

dan kode berikut jika Anda menggunakan yaml

faq:
  title: 'Ini adalah judul FAQ ini'
  section: [{question: 'Apa yang akan kita lakukan pada pelaut mabuk?', answer: 'Menggunting perutnya dengan pisau karat.'}]
---

Tambahkan kode tata letak partikel situs

Tambahkan ke bagian mana pun dari tata letak partikel struct-data.html:

{{- if eq .Kind "page" }}
  {{- if $.Page.Params.faq.title -}}
    {{ `<script type="application/ld+json">` | safeHTML }}
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
          {{ with $.Page.Params.faq }}
              {{ $len := len .section }}
              {{ range $index, $element := .section }}
                  {{ $jsonAnswer := .answer | markdownify | jsonify }}
                  {{ $jsonAnswer := replace $jsonAnswer "\\u003c" "<"}}
                  {{ $jsonAnswer := replace $jsonAnswer "\\u003e" ">"}}
                  {
                      "@type": "Question",
                      "name": "{{ .question | markdownify }}",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": {{ $jsonAnswer | safeHTML }}
                      }
                  }
                  {{ if not (eq (add $index 1) $len) }},{{ end }}
              {{ end }}
          {{ end }}
          ]
      }
    {{ `</script>` | safeHTML }}
  {{- end }}
{{- end }}

dan sertakan ke dalam bagian head

	{{- partial "struct-data.html" . -}}
</head>

Menghasilkan, memeriksa, dan mendeploy situs Hugo

Jalankan

hugo

kemudian cari dan buka halaman yang baru saja dihasilkan di folder public.

Di bagian head dari halaman html Anda harus melihat sesuatu seperti

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "Apa yang akan kita lakukan pada pelaut mabuk?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Menggunting perutnya dengan pisau karat."
                      }
                  }
          ]
      }
    </script>

Bagus, bukan?

Uji situs web dengan data terstruktur

Gunakan halaman Uji Data Terstruktur Google: https://developers.google.com/search/docs/appearance/structured-data

Pergi ke Validator Skema -> Snippet Kode

salin snippet dari atas, klik Run Test dan voilà:

Tangkapan layar snippet FAQ yang divalidasi

Selamat, itu berhasil. Anda dapat mendeploy situs web Anda ke misalnya AWS S3 dan memeriksa di Google Search Console apakah ia melihat Structured Data sebagai peningkatan.

Tautan yang berguna