Strukturierter Daten-Markup mit Hugo verwenden

Wenn das Hugo-Thema keine strukturierten Daten unterstützt...

Inhaltsverzeichnis

Google zeigt in den Suchergebnissen einige Verbesserungen wie Filmdetails, Stellenanzeigen, Veranstaltungs- und Kursinformationen an, die er aus der Strukturierungsdaten der Website bezieht. Hier ist - Wie man Strukturierungsdaten mit dem Hugo-Generator zur Website hinzufügt.

Hier ist ein Beispiel für Strukturierungsdaten eines Rezepts in den Google-Suchergebnissen. Strukturierungsdaten eines Rezepts in den Google-Suchergebnissen

Unten sind die Schritte, um etwas Ähnliches auf Ihre Seite hinzuzufügen. Sie müssen:

  • Die Frontmatter der Seite hinzufügen
  • Den Code für das Layout der Site-Partikel hinzufügen
  • Den Hugo-Website-Generator ausführen, prüfen und bereitstellen
  • Die Strukturierungsdaten mit den Google-Entwicklertools testen

Die Strukturierungsdaten für Rezepte sind im Folgenden beschrieben: https://developers.google.com/search/docs/appearance/structured-data/recipe .

Als Beispiel zeige ich, wie man die FAQ-Strukturierungsdaten auf die Webseite hinzufügt.

Frontmatter der Seite hinzufügen

Öffnen Sie den Markdown-Code Ihrer Seite und fügen Sie diesen Code mit FAQ-Strukturierungsdaten hinzu, wenn Sie TOML in der Frontmatter verwenden


[faq]
title = "Dies ist der Titel der FAQ"
[[faq.section]]
question = "Was werden wir mit dem betrunkenen Seemann tun?"
answer = "Wir werden seinen Bauch mit einem rostigen Rasierer schneiden"
+++

und diesen Code, wenn Sie YAML verwenden

faq:
  title: 'Dies ist der Titel dieser FAQ'
  section: [{question: 'Was werden wir mit dem betrunkenen Seemann tun?', answer: 'Wir werden seinen Bauch mit einem rostigen Rasierer schneiden.'}]
---

Code für das Layout der Site-Partikel hinzufügen

Fügen Sie irgendwo in die Partikel-Layouts den struct-data.html hinzu:

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

und fügen Sie es in den head-Abschnitt ein

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

Erstellen, prüfen und bereitstellen der Hugo-Website

Führen Sie aus

hugo

dann suchen Sie und öffnen Sie Ihre frisch generierte Seite im Ordner public.

Im head-Abschnitt der HTML-Datei sollten Sie etwas wie folgt sehen

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "Was werden wir mit dem betrunkenen Seemann tun?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Wir werden seinen Bauch mit einem rostigen Rasierer schneiden."
                      }
                  }
          ]
      }
    </script>

Schön, oder?

Die Website mit Strukturierungsdaten testen

Verwenden Sie die Testseite für Strukturierungsdaten von Google: https://developers.google.com/search/docs/appearance/structured-data

Gehen Sie zu Schema Validator -> Code snippet

fügen Sie unseren Snippet aus oben ein, klicken Sie auf Run Test und voilà:

Validierter FAQ-Snippet-Screenshot

Glückwunsch, es funktioniert. Sie können Ihre Website beispielsweise auf AWS S3 bereitstellen und in Google Search Console prüfen, ob sie Ihre Strukturierungsdaten als Verbesserung erkennt.