Implementar los datos estructurados o Rich Snippet en Tag Manager merece la pena porque te permite elevar tu web a un nivel superior en términos de SEO, sin necesitar un programador. En este post te explico en 4 pasos cómo hacerlo sin conocimientos previos. ¡Ojo! Hay otros artículos que hablan de algo parecido en la web, pero sólo te valen para datos estructurados estáticos, que se activan en una sola página, o que se activan en varias páginas sin que su contenido se adapte al contenido de la página. Si te interesa una implementación profesional, con datos estructurados dinámicos que vayan sirviendo por ejemplo cada Title y Meta Description de cada una de tus páginas, sigue leyendo.
- Cómo crear datos estructurados en Json-ld
- Qué es Google Tag Manager
- Cómo identificar y crear las variables en un Dato estructurado en Json-ld
- Cómo crear la etiqueta en Tag Manager
- Cómo crear el activador de nuestro código en Tag Manager
- Prueba de la implementación del Dato estructurado
Cómo crear datos estructurados en Json-ld
En primer lugar vamos a crear nuestros Datos estructurados en formato Json-ld. Para nuestro ejemplo vamos a utilizar el Dato estructurado de Organization que es uno de los más populares para empresas de todo tipo. Para crearlo podemos usar herramientas como JSON-LD Schema Generator For SEO. Una vez elegido el Dato estructurado de Organization se abre un formulario con varios campos a rellenar. Mientras lo hacemos a nuestra derecha se va creando el código en Json-ld.
Una vez completada esta operación, es aconsejable ir a la herramienta de prueba de datos estructurados de Google y averiguar que nuestro código sea correcto haciendo un copiar y pegar en la pestaña “Fragmento de código”. Hay que tener en cuenta que los Datos estructurados de Schema.org son muchos y se pueden usar propiedades de uno dentro de otro, siempre nos vamos a encontrar con más datos de los que necesitamos, pero si nos surgen errores está bien ir a averiguar directamente allí cómo implementar correctamente, en nuestro caso iremos a https://schema.org/Organization.
Qué es Google Tag Manager
Tag Manager es la herramienta de Google que te permite gestionar tus etiquetas o tags. Las etiquetas son trozos de código que se añaden al código de nuestro sitio cuando se cumplen las condiciones presentes en los activadores. Así mientras en pasado solíamos añadir nuestra etiqueta de Google Analytics directamente a nuestro código, hoy añadimos a nuestro código un contenedor de etiquetas de Tag Manager y allí dentro ponemos nuestra etiqueta de Analytics y muchas otras. Esto te permite desplazar la gestión de todos tus códigos de seguimiento y muchas más funciones avanzadas de tu sitio a una herramienta externa a tu sitio, que además te ofrece un ambiente de prueba antes de implementar los cambios. Simplificando al máximo el funcionamiento de Tag Manager podemos decir que para implementar Datos estructurados necesitamos:
- Un contenedor de Tag Manager en nuestro código y una cuenta para gestionarlo
- Crear las variables para que el código de nuestro Dato estructurado vaya variando según la página donde se lanza
- Crear una etiqueta que contenga el código de nuestro Dato estructurado
- Crear uno o más activadores que son los criterios según los cuales nuestra etiqueta se tiene que lanzar (todas las páginas o una selección de ellas)
Llegados a este punto suponemos que ya tenemos un contenedor activo en nuestro sitio y ya hemos creado el código del Dato estructurado en Json-ld.
Cómo identificar y crear las variables en un Dato estructurado en Json-ld
Una vez creado un Dato estructurado en Json-ld podemos ponerlo en un contenedor y activarlo con un disparador. Esto funciona fenomenal si lo hacemos para una sola página de nuestro sitio, pero, si queremos hacerlo para muchas o todas las páginas hay que añadir variables que permitan a los activadores dispararse en páginas distintas sirviendo datos distintos. Vamos a subrayar las variables de nuestro Json-ld, o sea las líneas de código que irán variando según las páginas donde se disparen:
En nuestro caso las variables van a ser:
- Name que corresponde al Meta Title de nuestra página
- URL que corresponde a la URL de nuestra página
- Description que corresponde a la Meta Description de nuestra página
Variable Meta Title
Para “name” vamos por ejemplo a crear la variable Meta Title. Elegimos el tipo de variable:
Seleccionamos el método de extracción “Selector de CSS ”. Escribimos el elemento del código de nuestra página que queremos seleccionar, en este caso, para extraer el título de la página, podemos obtener el valor de la etiqueta <title> sin especificar un nombre de atributo:
Ahora podemos guardar esta variable con nombre “Meta Title”.
Variable Page URL
Para “URL”, que corresponde a la URL de nuestra página, podemos usar una de las variables presentes en Tag Manager:
Guardamos como “Page URL”.
Variable Meta Description
Para “description”, que corresponde a la Meta Description de nuestra página, vamos a usar el extractor del CSS para obtener su contenido. En el código del ejemplo tenemos: <meta name="description" content= "Dale a tu negocio el empujón que necesita gracias al boca a boca digital que generan las reseñas y opiniones positivas en Google Maps y Trip Advisor."/>
Su selector será: meta[name="description"]
Su atributo será: content
Guardamos con el nombre “Meta Description”:
Cómo crear la etiqueta en Tag Manager
Vamos ahora a transformar nuestro archivo Json-ld estático en un JS capaz de sustituir nuestros “name”, “url” y “description” según la página servida. Vamos a cambiar el contenido estático de nuestros “name”, “url” y “description” con el código que activa cada una de las variables que hemos creado: "name": "{{Meta Title}}", "url": "{{Page URL}}", "description": "{{Meta Description}}",
Vamos a crear nuestra etiqueta en HTML personalizado como “Schema Organization”. Vamos a pegar en ella el siguiente código:
Guardamos con el nombre “Schema Organization”.
Cómo crear el activador de nuestro código en Tag Manager
Crear activadores en Tag Manager es sencillo, en general. En nuestro caso vamos a usar uno predefinido ya que queremos que nuestro Dato estructurado se active en todas las páginas que se visualicen por nuestros usuarios.
Y guardamos. Si sólo queremos que nuestros activadores se activen en algunas páginas, podemos usar las expresiones regulares (RegEx) para definir los criterios.
Prueba de la implementación del Dato estructurado
Antes de lanzar los cambios, Tag Manager nos permite testear en un ambiente de prueba que las etiquetas se lancen en las páginas correctas y visualizar lo que contienen. Si vemos que está todo correcto podemos publicar los cambios en Tag Manager y volver a la herramienta de test de datos estructurados de Google para ver en la pestaña «Obtener la URL» si nuestro Dato estructurado funciona correctamente.
Llegados a este punto lo más probable es que la herramienta no detecte nuestro recién implementado Dato estructurado, esto es debido al hecho que antes de que esto pase, Google tiene que volver a rastrear e indexar nuestro sitio. Para acelerar este proceso es posible ir a Google Search Console versión antigua, seleccionar “Rastreo”, luego “Explorar como Google” y presionar “Obtener y procesar” para la versión de vuestro sitio indexada por Google, que en este momento debería ser la Móvil. Una vez hecho esto Google se tomará unos minutos para procesar la petición y entonces aparecerá un pulsante de “Solicitar indexación”. En general en 24h Google lleva al cabo la tarea y entonces podemos volver a la herramienta de test de datos estructurados para ver cómo Google lee nuestro Dato estructurado de Organization. Aún así no existen garantías de que Google muestre nuestro Dato estructurado, existen varias razones por las que Google puede decidir no mostrarlo, a parte los errores de implementación, puede ser que no vea que vaya a aportar valor al usuario.
Si algo no está claro escríbeme.