Добавление разметки структурированных данных в Hugo

Если тема Hugo не поддерживает структурированные данные...

Содержимое страницы

Google показывает в результатах поиска некоторые улучшения, такие как детали фильмов, объявления о вакансиях, информация об мероприятиях и курсах, которые он получает с сайта Структурированные данные. Вот как - Как добавить структурированные данные на сайт с использованием генератора Hugo.

Ниже приведён пример структурированных данных рецепта в результатах поиска Google. Структурированные данные рецепта в результатах поиска Google

Ниже приведены шаги для добавления чего-то подобного на вашу страницу. Нужно

  • Добавить front matter страницы
  • Добавить код разметки частей сайта
  • Сгенерировать, проверить и развернуть веб-сайт Hugo
  • Проверить структурированные данные с помощью инструментов разработчика Google

Структурированные данные рецепта описаны в https://developers.google.com/search/docs/appearance/structured-data/recipe .

В качестве примера я покажу, как добавить структурированные данные FAQ на веб-страницу.

Добавление front matter страницы

Откройте код вашей страницы в формате markdown и добавьте следующий код с FAQ структурированными данными, если вы используете TOML в front matter


[faq]
title = "Это заголовок FAQ"
[[faq.section]]
question = "Что мы сделаем с пьяным моряком?"
answer = "Пострижём его живот ржавым бритвом"
+++

и этот код, если вы используете YAML

faq:
  title: 'Это заголовок этого FAQ'
  section: [{question: 'Что мы сделаем с пьяным моряком?', answer: 'Пострижём его живот ржавым бритвом.'}]
---

Добавление кода разметки частей сайта

Добавьте в раздел partial layouts 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 }}

и включите его в раздел head

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

Сгенерируйте, проверьте и разверните веб-сайт Hugo

Запустите

hugo

затем найдите и откройте только что сгенерированную страницу в папке public.

В разделе head html-страницы вы должны увидеть что-то вроде

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "Что мы сделаем с пьяным моряком?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Пострижём его живот ржавым бритвом."
                      }
                  }
          ]
      }
    </script>

Хорошо, не так ли?

Проверьте веб-сайт с использованием структурированных данных

Используйте страницу тестирования структурированных данных Google: https://developers.google.com/search/docs/appearance/structured-data

Перейдите в Схема-валидатор -> Код-фрагмент

вставьте наш фрагмент из выше, нажмите Run Test и вот ла:

Скриншот проверенного фрагмента FAQ

Поздравляем, это работает. Вы можете развернуть свой веб-сайт, например, на AWS S3 и проверить в Google Search Console, если он видит ваш Структурированные данные как улучшение.

Полезные ссылки