Ajouter des balises de données structurées à Hugo

Si le thème Hugo ne prend pas en charge les Données Structurées...

Sommaire

Google affiche dans les résultats de recherche certaines améliorations comme les détails des films, les offres d’emploi, les informations sur les événements et les cours, qu’il extrait des données structurées des sites web :

Données structurées.

Voici comment :

Ajouter des données structurées au site à l’aide du générateur Hugo.

Voici un exemple de données structurées pour une recette dans les résultats de recherche de Google. Données structurées pour une recette dans les résultats de recherche de Google

Voici les étapes pour ajouter quelque chose de similaire à votre page. Il faut :

  • Ajouter le front matter de la page
  • Ajouter le code de mise en page partielle du site
  • Générer, vérifier et déployer le site Hugo
  • Tester les données structurées avec les outils de développement de Google

Les données structurées pour une recette sont décrites ici : https://developers.google.com/search/docs/appearance/structured-data/recipe .

En exemple, je vais montrer comment ajouter les données structurées FAQ à la page web.

Ajouter le front matter de la page

Ouvrez le code markdown de votre page et ajoutez ce code avec les données structurées FAQ si vous utilisez le format TOML dans le front matter


[faq]
title = "Ceci est le titre de la FAQ"
[[faq.section]]
question = "Que ferons-nous du marin ivre ?"
answer = "Raser son ventre avec un rasoir rouillé"
+++

et ce code si vous utilisez le format YAML

faq:
  title: 'Ceci est le titre de cette FAQ'
  section: [{question: 'Que ferons-nous du marin ivre ?', answer: 'Raser son ventre avec un rasoir rouillé.'}]
---

Ajouter le code de mise en page partielle du site

Ajoutez quelque part dans les mises en page partielles le fichier 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 }}

et incluez-le dans la section head

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

Générer, vérifier et déployer le site Hugo

Exécutez

hugo

puis trouvez et ouvrez votre page générée fraîchement dans le dossier public.

Dans la section head de la page html, vous devriez voir quelque chose comme

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "Que ferons-nous du marin ivre ?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Raser son ventre avec un rasoir rouillé."
                      }
                  }
          ]
      }
    </script>

C’est bien, n’est-ce pas ?

Tester le site web avec les données structurées

Utilisez la page de test des données structurées de Google : https://developers.google.com/search/docs/appearance/structured-data

Allez dans le validateur de schéma -> Extrait de code

collez notre extrait ci-dessus, cliquez sur Run Test et voilà :

Capture d’écran de l’extrait FAQ validé

Félicitations, c’est fonctionnel. Vous pouvez déployer votre site web, par exemple sur AWS S3, et vérifier dans Google Search Console si il détecte vos Données structurées en tant qu’amélioration.

Liens utiles