Dodawanie oznaczeń danych strukturalnych do Hugo

Jeśli motyw Hugo nie obsługuje Strukturalnych Danych...

Page content

Google pokazuje w wynikach wyszukiwania pewne wzmocnienia, takie jak szczegóły filmów, oferty pracy, informacje o wydarzeniach i kursach, które pobiera z witryny Strukturalnych danych. Oto - Jak dodać Strukturalne dane do witryny za pomocą generatora Hugo.

Poniżej znajduje się przykład danych strukturalnych przepisu w wynikach wyszukiwania Google. Dane strukturalne przepisu w wynikach wyszukiwania Google

Poniżej znajduje się procedura dodania czegoś podobnego do swojej strony. Musisz:

  • Dodaj metadane strony
  • Dodaj kod układu części witryny
  • Wygeneruj, sprawdź i wdroż witrynę Hugo
  • Przetestuj dane strukturalne za pomocą narzędzi deweloperskich Google

Dane strukturalne przepisu są opisane w https://developers.google.com/search/docs/appearance/structured-data/recipe .

Jako przykład pokazuję, jak dodać dane strukturalne FAQ do strony internetowej.

Dodaj metadane strony

Otwórz kod markdown strony i dodaj poniższy kod z danymi strukturalnymi FAQ, jeśli korzystasz z toml w metadanych


[faq]
title = "To jest tytuł FAQ"
[[faq.section]]
question = "Co zrobimy z pijanym marynarzem?"
answer = "Zgolimy mu brzuch ręcznikiem z rdzy"
+++

i ten kod, jeśli korzystasz z yaml

faq:
  title: 'To jest tytuł tego FAQ'
  section: [{question: 'Co zrobimy z pijanym marynarzem?', answer: 'Zgolimy mu brzuch ręcznikiem z rdzy.'}]
---

Dodaj kod układu części witryny

Dodaj gdzieś do części układów 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 }}

i dołącz go do sekcji head

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

Wygeneruj, sprawdź i wdroż witrynę Hugo

Uruchom

hugo

następnie znajdź i otwórz nowo wygenerowaną stronę w folderze public.

W sekcji head strony html powinien się znaleźć coś takiego jak

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "Co zrobimy z pijanym marynarzem?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Zgolimy mu brzuch ręcznikiem z rdzy."
                      }
                  }
          ]
      }
    </script>

Świetnie, nie sądzisz?

Przetestuj witrynę z danymi strukturalnymi

Użyj strony testowania danych strukturalnych Google: https://developers.google.com/search/docs/appearance/structured-data

Przejdź do Walidatora schematu -> fragment kodu

wklej nasz fragment z powyżej, kliknij Uruchom test i voilà:

Zrzut ekranu zweryfikowanego fragmentu FAQ

Gratulacje, działa! Możesz wdrożyć swoją witrynę np. do AWS S3 i sprawdzić w Google Search Console, czy widzi Twoje Strukturalne dane jako wzmocnienie.

Przydatne linki