Lägga till strukturerad datamarkering i Hugo

Om Hugo-temat inte stöder strukturerade data...

Sidinnehåll

Google visar i söksidorna förbättringar som filmdetaljer, jobbannonser, event- och kursinformation, som tas från webbplatsens Strukturerad Data. Här är - Hur man lägger till Strukturerad Data på webbplatsen med Hugo-generatorn.

Här nedan är ett exempel på recept för Strukturerad Data i Google-söksidorna. Recept för Strukturerad Data i Google-söksidorna

Nedan följer stegen för att lägga till något liknande på din sida. Du behöver

  • Lägga till sidfrontmaterie
  • Lägga till webbplatsdeltlayoutkod
  • Generera, kontrollera och distribuera Hugo-webbplatsen
  • Testa Strukturerad Data med Googles utvecklarverktyg

Recept för Strukturerad Data beskrivs på https://developers.google.com/search/docs/appearance/structured-data/recipe.

Som exempel visar jag hur man lägger till FAQ för Strukturerad Data på webbsidan.

Lägg till sidfrontmaterie

Öppna din sidmarkdownkod och lägg till denna kod med FAQ för Strukturerad Data om du använder toml i frontmaterien


[faq]
title = "Det här är titeln på FAQ:n"
[[faq.section]]
question = "Vad ska vi göra med den fulla sjömannen?"
answer = "Raka hans buk med en rostig rakhyvel"
+++

och denna kod om du använder yaml

faq:
  title: 'Det här är titeln på denna FAQ'
  section: [{question: 'Vad ska vi göra med den fulla sjömannen?', answer: 'Raka hans buk med en rostig rakhyvel.'}]
---

Lägg till webbplatsdeltlayoutkod

Lägg till någonstans i dellayouts 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 }}

och inkludera det i head-sektionen

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

Generera, kontrollera och distribuera Hugo-webbplatsen

Kör

hugo

sen hittar och öppnar din nygenererade sidafil i public.

I head-sektionen på HTML-sidan bör du se något som

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "Vad ska vi göra med den fulla sjömannen?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Raka hans buk med en rostig rakhyvel."
                      }
                  }
          ]
      }
    </script>

Bra, eller hur?

Testa webbplatsen med strukturerad data

Använd Googles Test your structured data page: https://developers.google.com/search/docs/appearance/structured-data

Gå till Schema Validator -> Code snippet

klistra in vårt snutt från ovan, klicka på Run Test och voila:

Validated FAQ snipped screenshot

Gratulerar, det fungerar. Du kan distribuera din webbplats till till exempel AWS S3 och kontrollera i Google Search Console om den ser din Strukturerad Data som en förbättring.

Användbara länkar