Cómo obtener resultados enriquecidos con codificado JSON-LD a través de Google Tag Manager
¿Quieres que los usuarios vean tu contenido de forma destacada en los resultados de búsqueda? ¿Quieres que Google entienda a la perfección lo que estás escribiendo? La mejor manera de conseguir un buen posicionamiento en la SERP es facilitándole el trabajo al buscador estrella.
Todo aquel contenido estructurado que tenga que ver con lo que el usuario está buscando, tendrá la posibilidad de aparecer en las primeras posiciones. Eso sí, ten en cuenta que, si tu web aparece de forma enriquecida, no aparecerá de nuevo de forma orgánica en el top 10 de los resultados.
Si quieres que tu producto, post, evento, etc. aparezca en la posición #0, aquí te enseño cómo hacerlo. Para conseguirlo, lo único que vas a necesitar es una cuenta de Google Tag Manager conectada a tu web. ¡Vamos a por ello!
Contenido del artículo
Cómo estructurar datos con codificado JSON-LD en base a Schema.org
Para explicarte de forma práctica todo el proceso, vamos a coger como ejemplo los datos estructurados de las entradas del blog. El objetivo es crear una etiqueta automatizada, por lo que, con una sola etiqueta en GTM, podremos sacar los datos estructurados de todos los post.
Para ello, antes de nada, tenemos que tener en cuenta cuál es la estructura de Schema.org necesaria para generar una etiqueta. Esta estructura con codificado JSON-LD la vamos a extraer de la página de Merkle. Una vez dentro, elegiremos el tipo de Schema que queremos generar, en este caso «Article-BlogPosting». Al elegir esta opción se nos abrirán más casillas.
Si solo fuéramos a crear una estructura para un post concreto rellenaríamos las casillas de la izquierda, copiaríamos el código y lo llevaríamos a GTM. Como no queremos hacer esto cada vez que escribamos un post, únicamente cogeremos el código de la derecha.
En el código nos van a aparecer ciertas casillas que hay que rellenar, en el caso de estructurar el post de un blog serán las siguientes:
- El título del post.
- La imagen principal.
- El nombre del autor.
- El nombre de la organización que lo publica (puede coincidir con el autor).
- El logotipo y su tamaño.
- La fecha de la publicación.
Estas serán la variables JavaScript que necesitaremos crear en GTM para insertar al final en la etiqueta.
Cómo generar variables JavaScript en Google Tag Manager
Para poder generar variables personalizadas en JavaScript, primero tenemos que saber cuál es la función para obtener los diferentes datos. Me explico, para que la etiqueta sirva para cualquier post, tenemos que indicar a Google el camino a seguir para encontrar el título del post, la imagen, etc.
No te asustes, ya que con tres funciones JS vamos a poder extraer esas «coordenadas»:
- » .getElementByTagName(«prueba») «: coge todos elementos que tengan cierto tag, devolviendo una colección, por ejemplo los títulos (h1, h2, etc.). Para indicar que queremos entrar en el primero, añadiremos [0] en la función, si queremos el segundo tag añadiremos [1] y así consecutivamente.
- » .getElementByClassName(«prueba») «: coge todos los elementos por su clase, devolviendo una colección. En este caso también, para indicar en cuál queremos entrar añadiremos [0] en la función.
- » .querySelector(«.prueba») «: devuelve el primer elemento que coincide con el selector CSS que le hayas pasado.
Cómo obtener las funciones JavaScript
Para extraer los datos y probar que la ruta es correcta, vamos a uno de los post, hacemos clic derecho «Inspeccionar» y vamos a la pestaña «Console». Para hacer la prueba, buscaremos el título del post, lo que viene a ser el H1.
Una vez lleguemos a la pestaña «Console», escribiremos el siguiente código: document.getElementsByTagName(«h1»)[0].textContent . Lo lógico es que en una página haya solo un H1, por lo que siempre le indicaremos que coja el «0». Le añadiremos la función «.textContent» para obtener el texto limpio y no el código.
Cómo crear una variable JavaScript personalizada en Google Tag Manager
Para crear la variable, copiamos la función que hemos probado en «Console», abriremos GTM, iremos a «Variables» > «Variables definidas por el usuario» y haremos clic en el botón «Nueva». En «Tipo de variable» seleccionamos «JavaScript personalizada» y en el campo que se abre añadiremos el código. Para que GTM entienda la función añádele «fuction (){ return» al inicio y «; }» al final.
Ponle un título identificable, por ejemplo «H1 de la página» y dale a guardar. Recuerda comprobar que la variable es correcta con la «Vista previa» de GTM.
Activamos la vista previa de GTM y vamos a cualquier página de la web. Se nos abrirá una ventana en la parte inferior, seleccionamos «Window Loaded» y clicamos en la pestaña «Variables». Nos saldrá un listado de variables y, entre ellas tendrá que aparecer la que acabamos de crear.
Para crear el resto de variables, aquí te dejo el código que yo he utilizado. Compruébalas en «Console» antes de crear la variable en GTM y, una vez creadas, verifícalas con la «Vista previa» de GTM.
El título del post:
function(){ return document.getElementsByTagName(«h1»)[0].textContent; }
La imagen principal:
function(){ return document.querySelector(«.prueba»).getAttribute(«src»); }
El nombre del autor:
function(){ return document.getElementsByClassName(«prueba»)[0].textContent; }
La fecha de la publicación:
function(){ return document.getElementsByClassName(«prueba)[0].innerText; }
Cómo crear un activador de página vista en Google Tag Manager
Una vez tenemos la variables necesarias, tendremos que crear un activador para que lance la etiqueta que vayamos a crear. Para ello, iremos a GTM, a la pestaña «Activadores» y haremos clic en «Nuevo».
Como solo queremos que la etiqueta se active cuando se abran las páginas de post, seleccionaremos «Página vista» como tipo de activador. Tendremos dos opciones, que se active en «Todas las páginas vistas» o en «Algunas páginas vistas», seleccionaremos esta última opción.
Tras seleccionarla, aparecerá la opción de añadir un condicionante. Como lo que queremos es que salte en las páginas de las entradas, tendremos que buscar el condicionante que las agrupa. En mi caso es la palabra blog en la url, verifica que sea tu caso también, sino tendrás que buscar otro condicionante.
En la siguiente imagen puedes ver cómo debería quedar el activador. Recuerda ponerle un nombre reconocible para que te sea fácil de encontrarlo cuando creemos la etiqueta.
Cómo crear una etiqueta con datos estructurados en Google Tag Manager
Ya tenemos las variables, el activador y el código JSON-LD creados, solo queda crear la etiqueta que agrupe todo esto. Para ello, vamos a GTM, a la pestaña «Etiquetas» y hacemos clic en el botón «Nueva».
Seleccionamos «HTML personalizado» como tipo de etiqueta. Una vez seleccionado se nos abrirá el campo donde pegaremos el código JSON-LD generado en Merkle. Por último, rellenaremos los campos que han quedado vacíos con las variables que hemos creado y seleccionaremos el activador para las páginas de post.
Con esto ya tendrías los datos estructurados para las páginas de post. Recuerda guardar la etiqueta, comprobar que salta correctamente en la vista previa de GTM y enviar para publicar el contenedor con los cambios. Si no envías el contenedor, los cambios no quedarán registrados en el código de la web y no servirá de nada.
