Añadir marcado de datos estructurados a Hugo

Si el tema de Hugo no admite Datos Estructurados...

Índice

Google está mostrando en los resultados de búsqueda algunas mejoras, como detalles de películas, ofertas de empleo, información de eventos y cursos, que obtiene de los datos estructurados de los sitios web: Datos Estructurados. Aquí está - Cómo agregar datos estructurados al sitio usando el generador Hugo.

A continuación, se muestra un ejemplo de datos estructurados de recetas en los resultados de búsqueda de Google. Datos estructurados de recetas en los resultados de búsqueda de Google

A continuación, se detallan los pasos para agregar algo similar a tu página. Debes:

  • Agregar el front matter de la página
  • Agregar el código de diseño de la parte del sitio
  • Generar, verificar y desplegar el sitio web de Hugo
  • Probar los datos estructurados con las herramientas de desarrollo de Google

Los datos estructurados de recetas se describen en https://developers.google.com/search/docs/appearance/structured-data/recipe .

Como ejemplo, mostraré cómo agregar los datos estructurados de preguntas frecuentes a la página web.

Agregar el front matter de la página

Abre el código markdown de tu página y agrega este código con datos estructurados de FAQ si estás usando toml en el front matter


[faq]
title = "Este es el título de la FAQ"
[[faq.section]]
question = "¿Qué haremos con el marinero ebrio?"
answer = "Afeitar su vientre con un afeitador oxidado"
+++

y este código si estás usando yaml

faq:
  title: 'Este es el título de esta FAQ'
  section: [{question: '¿Qué haremos con el marinero ebrio?', answer: 'Afeitar su vientre con un afeitador oxidado.'}]
---

Agregar el código de diseño de la parte del sitio

Agrega en algún lugar a las plantillas parciales el 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 }}

y inclúyelo en la sección head

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

Generar, verificar y desplegar el sitio web de Hugo

Ejecuta

hugo

luego busca y abre tu página generada recientemente en el directorio public.

En la sección head del archivo html de la página deberías ver algo como

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "¿Qué haremos con el marinero ebrio?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Afeitar su vientre con un afeitador oxidado."
                      }
                  }
          ]
      }
    </script>

¿No es genial?

Probar el sitio web con datos estructurados

Usa la página de prueba de datos estructurados de Google: https://developers.google.com/search/docs/appearance/structured-data

Ve a Validador de Esquema -> Fragmento de código

pasta nuestro fragmento de arriba, haz clic en Ejecutar prueba y ¡voilà:

Captura de pantalla del fragmento de FAQ validado

Felicidades, está funcionando. Puedes desplegar tu sitio web, por ejemplo, en AWS S3 y verificar en Google Search Console si ve tus Datos Estructurados como una mejora.

Enlaces útiles