Structuurdata-markup toevoegen aan Hugo

Als de Hugo-thema geen Structured Data ondersteunt...

Inhoud

Google toont in zoekresultaten enkele verbeteringen zoals Filmgegevens, Vacatureaanbiedingen, Gegevens over Evenementen en Cursussen, die het haalt van de website’s Structured Data. Hier is - How to add Structured Data to the site using Hugo generator.

Hieronder is een voorbeeld van Recipe Structured data in Google zoekresultaten. Recipe Structured data in Google zoekresultaten

Hieronder staan de stappen om iets dergelijks toe te voegen aan je pagina. Je moet

  • De pagina front matter toevoegen
  • De site partical layout code toevoegen
  • Hugo website genereren, controleren en implementeren
  • Structured Data testen met google dev tools

De Recipe Structured Data wordt beschreven in https://developers.google.com/search/docs/appearance/structured-data/recipe .

Als voorbeeld laat ik zien hoe je de FAQ Structured Data toevoegt aan de webpagina.

Voeg pagina front matter toe

Open de markdowncode van je pagina en voeg deze code toe met FAQ Structured Data als je toml gebruikt in de front matter


[faq]
title = "Dit is de titel van de FAQ"
[[faq.section]]
question = "Wat doen we met de dronken zeeman?"
answer = "Shaven zijn buik met een roestige scheerapparaat"
+++

en deze code als je yaml gebruikt

faq:
  title: 'Dit is de titel van deze FAQ'
  section: [{question: 'Wat doen we met de dronken zeeman?', answer: 'Shaven zijn buik met een roestige scheerapparaat.'}]
---

Voeg site partical layout code toe

Voeg ergens in de partical layouts de struct-data.html toe:

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

en includeer het in de head sectie

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

Genereer, controleer en implementeer de Hugo website

Voer uit

hugo

en zoek vervolgens naar en open je net gegenereerde paginabestand in de public.

In de head sectie van de html pagina zou je iets moeten zien zoals

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "Wat doen we met de dronken zeeman?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Shaven zijn buik met een roestige scheerapparaat."
                      }
                  }
          ]
      }
    </script>

Leuk, niet?

Test de website met structuurdata

Gebruik de pagina van Google om je structuurdata te testen: https://developers.google.com/search/docs/appearance/structured-data

Ga naar Schema Validator -> Code snippet

plak onze snippet van hierboven, klik op Run Test en voilà:

Validated FAQ snipped screenshot

Gefeliciteerd, het werkt. Je kunt je website implementeren op bijvoorbeeld AWS S3 en controleren in Google Search Console of het jouw Structured Data ziet als een verbetering.