Aggiungere la marcatura di dati strutturati a Hugo

Se il tema Hugo non supporta i dati strutturati...

Indice

Google sta mostrando nei risultati di ricerca alcune migliorie come dettagli dei film, annunci di lavoro, informazioni sugli eventi e corsi, che preleva dai siti web Structured Data. Ecco come - Come aggiungere Structured Data al sito utilizzando il generatore Hugo.

Di seguito è un esempio di dati strutturati per la ricetta nei risultati di ricerca di Google. Dati strutturati per la ricetta nei risultati di ricerca di Google

Ecco i passaggi per aggiungere qualcosa di simile alla tua pagina. Devi

  • Aggiungere il front matter della pagina
  • Aggiungere il codice del layout parziale del sito
  • Generare, verificare e deployare il sito Hugo
  • Testare i dati strutturati con gli strumenti di sviluppo di Google

I dati strutturati per la ricetta sono descritti in https://developers.google.com/search/docs/appearance/structured-data/recipe .

Come esempio, mostro come aggiungere i dati strutturati per le FAQ alla pagina web.

Aggiungi il front matter della pagina

Apri il codice markdown della tua pagina e aggiungi il seguente codice con i dati strutturati per le FAQ se stai utilizzando il TOML nel front matter


[faq]
title = "Questo è il titolo delle FAQ"
[[faq.section]]
question = "Cosa faremo al marinaio ubriaco?"
answer = "Taglieremo il suo addome con un rasoio arrugginito"
+++

e questo codice se stai utilizzando YAML

faq:
  title: 'Questo è il titolo di questa FAQ'
  section: [{question: 'Cosa faremo al marinaio ubriaco?', answer: 'Taglieremo il suo addome con un rasoio arrugginito.'}]
---

Aggiungi il codice del layout parziale del sito

Aggiungi il seguente codice a un layout parziale chiamato 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 }}

e includilo nella sezione head

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

Genera, verifica e deploya il sito Hugo

Esegui

hugo

poi trova e apri il file della pagina appena generata in public.

Nella sezione head dell’html della pagina dovresti vedere qualcosa come

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "Cosa faremo al marinaio ubriaco?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Taglieremo il suo addome con un rasoio arrugginito."
                      }
                  }
          ]
      }
    </script>

Bello, non è vero?

Testa il sito con i dati strutturati

Utilizza la pagina di test dei dati strutturati di Google: https://developers.google.com/search/docs/appearance/structured-data

Vai al Validator Schema -> Codice snippet

incolla il frammento da sopra, fai clic su Run Test e voilà:

Schermata del frammento FAQ verificato

Complimenti, funziona. Puoi deployare il tuo sito sul, ad esempio, AWS S3 e verificare nel Google Search Console se vede i tuoi Structured Data come un miglioramento.