Strukturierter Daten-Markup mit Hugo verwenden
Wenn das Hugo-Thema keine strukturierten Daten unterstützt...
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.
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à:
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.
Nützliche Links
- Hugo Cheat Sheet
- Markdown Cheatsheet- Bildverarbeitung im Mainroad Hugo Theme: Bildverarbeitung im Mainroad Theme
- Hugo-Website auf AWS S3 bereitstellen
- Mulled Wine Rezept
- Ein Lied über andere großartige Dinge, die man mit dem betrunkenen Seemann tun könnte: https://en.wikipedia.org/wiki/Drunken_Sailor
- Google-Formular auf Hugo-Website einfügen
- Bildverarbeitung im Mainroad Hugo Theme: Bildverarbeitung im Mainroad Theme
- Beliebteste Themes für Hugo
- Gitea Actions verwenden, um eine Hugo-Website auf AWS S3 zu bereitstellen
- Wie man Vorschaubilder in den Ordner der Page Bundle für Hugo-Websites mit dem Mainroad Theme speichert
