Adicionando marcação de dados estruturados ao Hugo

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

Conteúdo da página

O Google está exibindo nos resultados de pesquisa alguns aprimoramentos, como detalhes de filmes, vagas de emprego, informações sobre eventos e cursos, que são obtidos dos dados estruturados do site. Aqui está - Como adicionar Dados Estruturados ao site usando o gerador Hugo.

Abaixo, segue um exemplo de dados estruturados de Receita nos resultados de pesquisa do Google. Dados estruturados de Receita nos resultados de pesquisa do Google

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

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

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

Como exemplo, mostrarei como adicionar os Dados Estruturados de FAQ à página web.

Adicionar front matter da página

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


[faq]
title = "Este é o título do FAQ"
[[faq.section]]
question = "O que faremos com o marinheiro bêbado?"
answer = "Rapar a barriga dele com uma navalha enferrujada"
+++

e este código se estiver usando yaml:

faq:
  title: 'Este é o título deste FAQ'
  section: [{question: 'O que faremos com o marinheiro bêbado?', answer: 'Rapar a barriga dele com uma navalha enferrujada.'}]
---

Adicionar código de layout parcial do site

Adicione em algum lugar nos layouts parciais o arquivo 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 o arquivo de página recém-gerado no diretório public.

Na seção head da página 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": "Rapar a barriga dele com uma navalha 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á até o Schema Validator -> Código (Code snippet), cole nosso snippet acima, clique em Run Test e eis o resultado:

Captura de tela do snippet de FAQ validado

Parabéns, está funcionando. Você pode implantar seu site, por exemplo, no AWS S3 e verificar no Google Search Console se ele detecta seus Dados Estruturados como um aprimoramento.