Cómo optimizar tu web con resultados enriquecidos

Introducción

Seguramente ya has trabajado en la semántica web de tu contenido para evitar errores y que contenga páginas fáciles de leer e indexar para los buscadores. Pero podemos ir más allá y optimizar cómo se muestran los resultados de nuestras páginas en los buscadores.

Ya que no hay una única forma de maquetar una página web y hay una infinidad de posibilidades de hacer un mismo contenido, esto radica en que la semántica de un sitio web puede variar mucho respecto a otra con la misma temática, por cuestiones de maquetación y organización del contenido.

Esto hace necesario el que se busque una manera unificada de indicar qué tipo de contenido mostramos en nuestras páginas y cómo está organizado, así como su jerarquía dentro de nuestro sitio web.

Esquemas de datos

A través de los esquemas (https://schema.org/) podemos organizar y clasificar nuestro contenido y definir para cada una de nuestras páginas cuál es el esquema que más le conviene según su contenido.

Esto es importante porque hay diferentes tipos de sitios web: Sitios de venta de productos, blogs, sitios para dar opiniones, foros, etc. Clasificar correctamente nuestras páginas puede ayudarnos a que nuestro sitio web tenga una mayor relevancia en los resultados asociados a su contenido.

Una vez que clasificamos nuestras páginas podemos añadir la información de los atributos del esquema asociado. Hay varios formatos pero en este caso vamos a trabajar con json/ld porque es un formato fácilmente adaptable y versátil que podemos desacoplar del código HTML de nuestras páginas.

Jerarquía del sitio web

Es importante que tengamos clara la jerarquía de nuestras páginas, ya que seguramente tengamos una página principal de la que dependan otras muchas páginas. Además es posible que estas páginas secundarias tengan a su vez otras páginas en un nivel inferior y no tienen por qué pertenecer al mismo tipo de esquema.

Página principal

Ya que todas las demás páginas son dependientes de la principal podemos definir que nuestra página principal utilizará el esquema WebSite (https://schema.org/WebSite) y según su definición la mayoría de páginas principales podrían encajar en este esquema:

A WebSite is a set of related web pages and other items typically served from a single web domain and accessible via URLs.

Para ello vamos a crear un objeto con formato JSON que incluya los atributos de este esquema:

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "@id": "https://example.com",
  "name": "My Website"
}

Es sencillo pero veamos que son estos atributos:

• @context: Indica el contexto general de los esquemas que vamos a utilizar en toda la estructura de datos, por lo que será una url que apunte a la página web que contiene todos los esquemas.
• @type: Nos indica la especificación del esquema, la cual podemos representar con el nombre del esquema que vamos a utilizar.
• @id: Este será el identificador de nuestra estructura de datos, la url principal de nuestro sitio web.
• name: El nombre que le damos a nuestro esquema. En este caso puede ser el nombre de nuestro sitio web por ser la página principal, pero cada esquema debe tener el suyo para identificarlo entre otros esquemas del mismo tipo.

Páginas secundarias

Supongamos ahora que tenemos otras páginas secundarias, de las que dependen otras sub páginas, así como una página de contacto, un blog, secciones del blog, una página de productos, etc.

Podemos definir un esquema diferente para cada una según se adapte a nuestro contenido. Por ejemplo si tuviéramos una página secundaria que hablara de diferentes tipos de animales y esta a su vez tendría otras páginas para cada tipo de animal, también podríamos utilizar el esquema WebSite.

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "@id": "https://example.com/animals",
  "name": "My Website - Animals",
  "isPartOf": {
    "@id": "https://example.com"
  }
}

Pero si por ejemplo esta página fuera un blog sobre animales con diferentes artículos que tratan sobre el mundo animal podríamos elegir el esquema Blog(https://schema.org/Blog) para definir la página principal del blog de la que dependen los artículos.

{
  "@context": "https://schema.org",
  "@type": "Blog",
  "@id": "https://example.com/animals-blog/",
  "name": "Amazing Blog about animals",
  "isPartOf": {
    "@id": "https://example.com"
  }
}

En ambos casos tenemos un nuevo atributo @isPartOf que nos indica que pertenecen a la página principal y cuyo valor debe ser el mismo que el atributo @id del esquema de la página principal.

Estos son los atributos básicos pero pueden añadirse todos los indicados en la especificación del esquema.

Páginas de artículos de blog

Si tenemos artículos asociados a nuestro blog, cada una de estas páginas puede utilizar el esquema BlogPosting(https://schema.org/BlogPosting), mediante el que podemos aportar datos útiles del artículo como su fecha de creación. contenido, tema dentro del blog, indicar la autoría, etc.

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "@id": "https://example.com/animals-blog/lions",
  "name": "Animal blog - Lions",
  "headline": "Lions",
  "isPartOf": {
    "@id": "https://example.com/animals-blog/"
  },
  "articleSection": "Science",
  "datePublished": "2022-01-01",
  "dateCreated": "2022-01-01",
  "image": "https://example.com/images/example.jpg",
  "backstory": "Your post summary",
  "creator": "Creator name",
  "author": {
    "@type": "Person",
    "url": "https://example.com/about",
    "name": "Author name"
  }
}

En este caso el atributo @isPartOf haría referencia a la página padre, el blog, por lo que la url debe referenciar a la ubicación de la página principal del Blog. Esto se aplica a cualquier subpágina, de forma que poco a poco se va creando la jerarquía de todo el sitio web.

El atributo author puede identificar a la persona que escribió el artículo. Puede ser también un listado de objetos en caso que existan varias personas que hayan creado el artículo, mientras que el atributo url de cada autor puede ser un link a una página que trate del autor, una red social u otro sitio web.

Otros tipos de páginas

Existe una gran variedad de esquemas por lo que siempre deberías buscar el que más se adapte a al contenido de tu página, pero aquí tienes algunos de los más comunes y útiles:

• Página de contacto: https://schema.org/ContactPage
• Página de preguntas frecuentes: https://schema.org/FAQPage
• Página de un producto: https://schema.org/Product
• Página de tu organización: https://schema.org/Organization

Breadcrumbs

También es posible que quieras tener en tus páginas una guía sobre esta jerarquía que has definido, lo que puede ayudar a usuarios y buscadores a entender en qué punto de tu sitio web se encuentran al acceder a una página con varios niveles de profundidad.

Tengo otro artículo sobre cómo crear un componente y su esquema de datos con Vue que puede interesarte:

Integrando los esquemas en la web

Ahora que ya sabemos cómo crear nuestros esquemas sólo falta añadirlos a nuestras páginas. Para ello simplemente vamos a añadir un script con cada uno de los esquemas que tenga nuestra página. Por ejemplo para la página principal añadiríamos el siguiente script:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "@id": "https://example.com",
  "name": "My Website"
}
</script>

De esta forma los buscadores y validadores de esquema sabrán que hemos definido nuestro esquema y podrán verificar que los datos son correctos.

Si sumamos los tres ejemplos nos quedaría una importación de scripts de la siguiente forma para la página de un artículo:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "@id": "https://example.com",
  "name": "My Website"
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Blog",
  "@id": "https://example.com/animals-blog/",
  "name": "Amazing Blog about animals",
  "isPartOf": {
    "@id": "https://example.com"
  }
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "@id": "https://example.com/animals-blog/lions",
  "name": "Animal blog - Lions",
  "headline": "Lions",
  "isPartOf": {
    "@id": "https://example.com/animals-blog/"
  },
  "articleSection": "Science",
  "datePublished": "2022-01-01",
  "dateCreated": "2022-01-01",
  "image": "https://example.com/images/example.jpg",
  "backstory": "Your post summary",
  "creator": "Creator name",
  "author": {
    "@type": "Person",
    "url": "https://example.com/about",
    "name": "Author name"
  }
}
</script>

Validando los esquemas

Existe una extensión para el navegador Google Chrome que me gusta por su sencillez y permite validar en tiempo real los esquemas añadidos a tus páginas, esta se llama JSON LD Tester y podemos encontrarla en el catálogo de extensiones o a través de este enlace: https://chrome.google.com/webstore/detail/json-ld-tester/aohmciehgjboidolkmoaofcbnejmokan

Una vez instalada aparecerá un icono en la parte superior derecha del navegador que al pulsarlo mostrará un pop-up con los datos de los esquemas que hemos añadido. Por ejemplo para este artículo muestra los siguientes datos:

Si queremos ver en detalle cada uno de los esquemas podemos pulsa en el botón "Test this", lo que nos llevará a las herramientas online de validación de esquemas:

• Validador de Google para resultados enriquecidos: (https://search.google.com/test/rich-results) Que nos permite validar una página a través de su url o un fragmento de código que podemos insertar manualmente.
• Validador de Schema.org: (https://validator.schema.org/) Que también nos permite validar por url o fragmento de código.

Para terminar

Con toda esta información ya puedes añadir toda la información a tus páginas para ayudar a mejorar los resultados enriquecidos en los buscadores.

No obstante hay muchos tipos de páginas y esquemas por lo que te recomiendo que le eches un ojo a la documentación de esquemas de https://schema.org/ para encontrar los que mejor se adapten a tu contenido.