Adicionando markup de dados estruturados ao Hugo

Se o tema Hugo não suportar Dados Estruturados...

Conteúdo da página

Google está mostrando em resultados de busca algumas melhorias, como detalhes de filmes, anúncios de empregos, informações de eventos e cursos, que ele obtém do site’s Structured Data. Aqui está - Como adicionar Structured Data ao site usando o gerador Hugo.

Abaixo está um exemplo de dados estruturados de receita em resultados de busca do Google. Dados estruturados de receita em resultados de busca do Google

Abaixo estão as etapas para adicionar algo semelhante à sua página. É necessário:

  • Adicionar o front matter da página
  • Adicionar o código de layout da parte do site
  • Gerar, verificar e implantar o site Hugo
  • Testar os Dados Estruturados com as ferramentas de desenvolvimento do Google

Os Dados Estruturados de Receita são descritos em https://developers.google.com/search/docs/appearance/structured-data/recipe .

Como exemplo, estou mostrando como adicionar os Dados Estruturados de Perguntas Frequentes à página da web.

Adicionar o front matter da página

Abra o código markdown da sua página e adicione este código com os Dados Estruturados de Perguntas Frequentes se estiver usando toml no front matter


[faq]
title = "Este é o título das Perguntas Frequentes"
[[faq.section]]
question = "O que faremos com o marinheiro bêbado?"
answer = "Raspar o seu estômago com uma lâmina enferrujada"
+++

e este código se estiver usando yaml

faq:
  title: 'Este é o título desta Pergunta Frequentes'
  section: [{question: 'O que faremos com o marinheiro bêbado?', answer: 'Raspar o seu estômago com uma lâmina enferrujada.'}]
---

Adicionar o código de layout da parte do site

Adicione em algum lugar aos layouts parciais o 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 inclua-o na seção head

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

Gerar, verificar e implantar o site Hugo

Execute

hugo

em seguida, localize e abra sua página recém-gerada no public.

Na seção head do arquivo html, você deve ver algo como

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "O que faremos com o marinheiro bêbado?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Raspar o seu estômago com uma lâmina enferrujada."
                      }
                  }
          ]
      }
    </script>

Legal, não é?

Testar o site com dados estruturados

Use a página de Teste de Dados Estruturados do Google: https://developers.google.com/search/docs/appearance/structured-data

Vá para o Validador de Esquema -> Snippet de Código

cole nosso snippet acima, clique em Run Test e voilà:

Captura de tela do snippet de Perguntas Frequentes validado

Parabéns, está funcionando. Você pode implantar seu site em, por exemplo, AWS S3 e verificar no Google Search Console se ele vê seus Structured Data como uma melhoria.