Utilizar la administración de etiquetas de Google Tag manager permite desde analizar el tráfico hasta optimizar nuestras campañas de Marketing.
Poco a poco Google está pasando a entender de forma semántica la web, de esta forma, también ya estamos viendo cambios en Google keyword planner, en donde los plurales y singulares son vistos como la misma palabra, al igual que los errores ortográficos.
Aunque para poder entender cómo una máquina logra hacer todo esto (inteligencia artificial + machine learning + algoritmos) se necesita mucho conocimiento técnico y años de estudios.
Nosotros los marketeros, empresarios, emprendedores o dueños de negocios, solo tenemos que esforzarnos en entender cómo afecta todo esto a la visibilidad de nuestras marcas en los resultados de búsqueda (afortunadamente).
Ya sea porque quieres aumentar el tráfico o porque quieres que tu marca sea vista por términos como “la mejor empresa del mundo”, hay que tener claro que, si queremos ser vistos en internet y tener un chance de realizar ventas por medio de medios digitales, tenemos que estar en muy buenos términos con Google.
Y para lograr esto, podemos hacer dos cosas muy sencillas, una es desarrollar el sitio web utilizando HTML 5, que tiene etiquetas semánticas y la otra, es utilizar el marcado de datos estructurados, el cual se hace, en la mayoría de los casos, con el vocabulario provisto en Schema.org.
La primera recomendación no debería ser mucho problema, es por eso que me dedicaré en explicarles cómo ustedes mismos pueden hacer el marcado de datos estructurados (no hay que molestar más a nuestros amigos de IT) con una herramienta gratuita y muy fácil de utilizar: Google Tag Manager.
Marcado de datos para un blog or artículo con Google Tag Manager
Paso 1
Lo primero que tienes que hacer es entrar a schema.org y buscar el tipo de marcado que se adecúe a tu contenido, de esta forma si es un artículo solo tenemos que entrar y ver los posibles marcados, hacemos lo mismo si es una receta o cualquier tipo de contenido.
La otra opción es un poco más sencilla y es escribir en nuestro querido Google lo siguiente: schema + {{insertar tipo de página}}, dándonos como resultado esto si buscásemos por el marcado de datos para artículos.
Paso 2
Después de elegir todas las propiedades que vamos a marcar en nuestras páginas, siendo distintas dependiendo del tipo de página dentro del sitio, ya que el marcado de las páginas de productos, tendría que ser distinto a las noticias, recetas, eventos, etc.
Vamos a acceder a Google Tag Manager para crear las variables que vamos a utilizar y que son necesarias si queremos que este marcado sea dinámico.
Hacemos clic en la pestaña de "Variables" y las creamos de la siguiente forma:
-
Variable del título
Si la variable hace parte del DOM, podremos seleccionarlas y extraerlas de una manera muy sencilla:
- Elegimos el tipo de variable DOM Element.
- El tipo de selección que va a ser por CSS Selector.
- En el Element selector ponemos title.
-
Variable de meta-descripción
De nuevo elegimos crear una variable y lo configuramos como se ve en la imagen:
De esta misma forma, se puede obtener cualquier información dentro de un meta, incluidos los datos de Open Graph, los cuales nos sirven para personalizar la forma en que se visualizan las URLs de nuestro sitio en las redes sociales, principalmente en Facebook:
Como pueden ver es muy sencillo, así que de esta forma tienen acceso a todos esos datos.
-
Variable de URLs
Este es muy sencillo, ya que Tag Manager ya lo trae por default, así que sólo hay que activarlo, si es que no lo está ya.
Si ya está lo van a poder ver en la sección de variables, como Page URL.
En caso de que no esté activo, solo hacen clic en Configuración (el botón rojo) y lo seleccionan, es de los primeros, como pueden ver aquí:
-
Variable de imágenes
Como sólo queremos el SRC de una sola imagen, lo ideal es seleccionar una con ID, para de esta forma saber claramente cuál se está seleccionando.
- Seleccionamos DOM Element como Type.
- Para configurar la variable elegimos lo siguiente:
- Selection Method: ID.
- Element ID: aquí va el ID de la imagen.
- Attribute Name: SRC.
Listo, en esto seleccionamos directamente a la imagen por su ID, así que no es necesario determinar el tipo de etiqueta que es, y luego elegimos el atributo SRC, ya que ahí es donde se encuentran las URLs de las imágenes.
Si su sitio corre en WordPress, o ya tiene el marcado de Open Graph, lo más fácil es seleccionar la imagen directamente desde ahí, ya que si es un Blog, la imagen principal o destacada se pone automáticamente en ese tag, por lo que sólo tendría que hacer esto:
Esto mismo vamos a hacer con los atributos width y height, ya que son necesarios a la hora de hacer el marcado de las imágenes, y es muy sencillo, solo tienes que cambiar el Attribute Name.
-
Variable de atributo ALT
El proceso es igual que en el caso anterior, solo que en vez de poner SRC como atributo, vamos a seleccionar ALT.
Sin embargo, para esto la opción de extraerlo con Open Graph no es posible, de todas formas no es algo indispensable para el marcado de datos.
Paso 3
-
Creación del Tag
Ahora que tenemos las variables, las cuales son las que van a extraer los datos dinámicos, procedemos a la creación de la etiqueta.
Vamos a elegir un tag de Custom HTML:
en donde vamos a pegar un script de JavaScript con el cual vamos a insertar nuestros datos estructurados.
Este es un ejemplo de un tag de webPage, para todas las páginas de tu sitio:
<script>
(function (){ var data = {
"@context":"http://schema.org",
"@type":"WebPage",
"url":{{Page URL}},
"name":{{SCHEMA - Title}},
"description":{{SCHEMA - Descripción}},
"reviewedBy":{
"@type":"Organization",
"name":"Nombre de tu sitio o compañía"
}
}
var script = document.createElement('script');
script.type = "application/ld+json";
script.innerHTML = JSON.stringify(data);
document.getElementsByTagName('head')[0].appendChild(script);
}) (document);
</script>
Como pueden ver, las variables que creamos antes se ponen entre corchetes - {{nombre de tu variable }} - y dentro el nombre de la variable, tal cual como la guardaron, ya que posteriormente, al dispararse el tag, va a reemplazar ese comodín por el dato extraído por las variables, para que de esta forma no tengas que hacer el tag para cada página, sino que es dinámico, extrayendo el dato pertinente de cada página en donde se dispara.
Con esta guía van a estar listos para crear cualquier tipo de dato estructurado de forma dinámica, es solo que entren a schema.org y busquen el que más se adecúa a sus necesidades.
Tengan en cuenta que de el código de arriba lo único que siempre debe de estar es esto:
<script>
(function (){ var data = {
Este contenido va a depender del tipo de dato estructurado que deseen
Implementar
}
var script = document.createElement('script');
script.type = "application/ld+json";
script.innerHTML = JSON.stringify(data);
document.getElementsByTagName('head')[0].appendChild(script);
}) (document);
</script>
Ya que es lo que hace que implementa el tag en de JSON-LD en el sitio.
-
Creación del Trigger
Después de tener el Tag, vas a tener que crear un trigger, que lo que va a hacer es determinar cuándo se va a disparar la etiqueta de JSON que hiciste en el paso anterior.
Para el tag de webPage que utilzamos en el ejemplo anterior, vamos a querer que se active en todas las páginas del sitio, por lo que es muy fácil crear ese trigger:
Pero hay casos en los que crear el trigger puede llegar a ser un poco más complejo, por ejemplo, cuando sólo queremos las páginas de una categoría o que están bajo determinado subdirectorio, como /blog o /noticias.
En estos casos, podemos crearlas utilizando el tipo de trigger de Page View, ya que se activan cuando el usuario accede a la página y utilizamos la segmentación de Page URL para introducir el parámetro de la URL que queremos que sí o sí tengan las páginas en las cuales se disparan.
En el ejemplo a continuación vamos a hacer uno para la sección de /blog:
Como ven, elegimos la opción de Page URL, ya que queremos segmentar por subdirectorio, y luego seleccionamos la opción de contains ya que queremos que se dispare en todas las páginas que contengan en sus URLs la palabra /blog/.
Este mismo método puede ser aplicado para segmentarlo hacia cualquier subdirectorio, como por ejemplo: /blog/marketing-digital/ o /noticias/finanzas/, por lo que de seguro les va a servir para taggear casi cualquier sección o categoría.
Y por último, les muestro cómo taggear una sola página, lo que les va a resular muy fácil, ya que es muy similar al método mostrado anteriormente:
Es solo cambiar la opción de contains por la de equals, de esta forma que sólo se dispara el trigger cuando la URL sea ésa exactamente.
Paso 4
-
Probando nuestros Tags
Antes de implementar cualquier cambio en Tag Manager, les recomiendo probarlo para que, de esta forma, no se arriesgen a dañar el sitio, más cuando estamos inyectando código, como en este caso.
Para hacer esto, sólo tenemos que presionar en la flecha al lado del botón de publish de arriba a la derecha y luego elegir la opción de preview y debug:
Después de activarlo en Tag Manager, entren al sitio web, desde la misma cuenta o sesión de Google (una pestaña nueva), para poder ver los tags y las variables disparadas en la página:
El punto uno muestra todos los tags que se dispararon en esa página, mientras que el punto dos muestra los tags que están activos pero que no se disparan en esa página.
Por otro lado, el punto tres contiene la información delas variables y es aquí, a donde tenemos que ir para confirmar que las que creamos sí están extrayendo de manera correcta los datos que queremos y eso lo hacemos de esta forma:
Para poder ver las variables, primero tenemos que dar clic en "Window Loaded" (punto 1) y después en "Variables" (punto 2), para de esta forma poder ver en la columna de "Variable" el nombre que le pusimos en GTM y en la de "Value" el dato extraído y, en este caso, nos debería devolver el Title, Description y URL de la página en la que nos encontramos.
Cuando NO se implementan bien las variables, en Value les aparece Null.
Con esto confirmamos que los Tags se estén disparando bien y que las variables estén extrayendo y almacenando los datos correctos, sin embargo, todavía queda una instancia más de prueba, pero la tenemos que hacer después de publicar los Tags.
Para hacer esto sólo tenemos que abandonar el modo de preview y debug y presionar el botón de publicar:
Después le damos un nombre y descripción a la versión que vamos a publicar y, aunque no es obligatorio, (pueden cliquear en publicar de una vez) lo recomiendo altamente, ya que les va a permitir saber cuándo y quién hizo cambios en su cuenta.
En el punto 3, vamos a ver todos los cambios hechos, al igual que las variables, tags y triggers creados.
Con esto terminamos nuestra labor en Google Tag Manager, implementando instantáneamente al sitio todo lo que hemos creado.
Paso 5
-
Probando los datos estructurados
Para hacer esto entramos a esta página, que es una herramienta creada por Google para que podamos verificar que la implementación de los datos estructurados fue correcta.
Una vez que introducimos una página o el código de los datos estructurados, vamos a poder visualizar los que fueron reconocidos, si tienen errores, o si hay algunas mejoras que les podríamos hacer.
Este es un ejemplo de un sitio de software (este es el link, por si quieren verificarlo ustedes mismos), en el que tienen un marcado sencillo de webPage:
Como pueden ver les va a mostrar todos los campos y los valores de cada uno y si hacen clic en el campo a la derecha, se los va a resaltar en el código a la izquierda.
Esto lo pueden hacer con cualquier sitio, así que podrían aplicarlo a la competencia y ver cómo tienen marcados sus sitios y ver si pueden mejorar los suyos con esa información.
Ejemplos de otros tipos de datos estructurados
-
Breadcrumbs
Los Breadcrumbs son esas guías que están en la parte superior de las páginas, éstos sirven para indicarnos la posición de la página respecto al sitio, lo que nos ayuda a orientarnos.
Para que los Breadcrumbs puedan aparecer en los snippets de los resultados de búsqueda hay que marcarlos con datos estructurados.
En esta página de ejemplo, por si quieren verlo ustedes mismos este es el enlace a la página de Google que explica su implementación, tanto en JSON-LD como con microdata.
El resultado de esto es el siguiente, y creo que estarán de acuerdo en que se ve mucho mejor que las típicas URLs:
-
Reviews
Los reviews también son muy buenos, ya que aumentan el tamaño de los snippets y los hacen mucho más vistosos, lo cual tiende a aumentar el CTR, así que si tienen un sitio con productos, testimoniales o reviews en general pueden implementar estos datos estructurados.
Como ejemplo, voy a utilizar una página de producto y que toma los ratings del feedback de los usuarios, lo que es ideal.
Para hacer que esos ratings de los reviews aparezcan en los snippets tienes que implementar el marcado de datos de aggregateRating (también puedes verlo en esta página de Google)
-
Otros
Creo que los más usados son los dos que mencioné anteriormente y capaz los más complejos, pero como pudieron ver vale la pena.
Sin embargo, hay muchos más, así que les dejo esta lista para que sepan de su existencia y los implementen si aplican para sus sitios web, porque la realidad es que ya tienen los conocimientos necesarios para implementar todos los tipos de datos estructurados.
Conclusión
Como pudieron ver es algo muy sencillo de hacer y actualmente es uno de los puntos más fuertes de toda estrategia on-page, por lo que no duden en aplicarlo.
Espero que esto les sea de mucha ayuda y les ahorre tiempo y costos si le pagan a alguien de IT por horas trabajadas, ya que es muy sencillo y los beneficios que trae son muy grandes.
