1) Utilizar la administración de etiquetas de Google Tag mánager deja desde examinar el tráfico hasta optimizar nuestras campañas de Marketing.
Poco a poco Google está pasando a comprender de forma semántica la web, así, también ya estamos viendo cambios en el keyword planner, en donde los plurales y singulares son vistos como exactamente la misma palabra, del mismo modo que los fallos ortográficos.
Aunque para poder entender cómo una máquina consigue hacer todo esto (inteligencia artificial + machine learning + algoritmos) se precisa mucho conocimiento técnico y años de estudios.
Nosotros los marketeros, empresarios, emprendedores o dueños de negocios, solo debemos esforzarnos en comprender cómo afecta todo esto a la visibilidad de nuestras marcas en los resultados de búsqueda (afortunadamente).
Ya sea pues quieres acrecentar el tráfico o por el hecho de que deseas 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 efectuar ventas a través de medios digitales, debemos estar en muy buenos términos con Google.
Y para lograr esto, podemos hacer 2 cosas sencillísimas, una es desarrollar el sitio web usando HTML 5, que tiene etiquetas semánticas y la otra, es emplear el, el cual se hace, en la mayoría de los casos, con el léxico provisto en Schema.org.
La primera recomendación no debería ser mucho inconveniente, 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 gratis y muy fácil de utilizar: Google Tag Manager.
Back to top1) Marcado de datos para un blog or artículo con Google Tag Manager
1.1) 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 este modo si es unsolo debemos entrar y ver los posibles marcados, hacemos lo mismo si es una receta o cualquier género de contenido.
La otra opción es un tanto más sencilla y es escribir en nuestro querido Google lo siguiente: schema + insertar género de página, dándonos como resultadosi buscásemos por el marcado de datos para artículos.
1.2) Paso 2
Después de escoger todas las propiedades que marcaremos en nuestras páginas, siendo diferentes dependiendo del género de página dentro del lugar, en tanto que el marcado de las páginas de productos, tendría que ser distinto a las noticias, recetas, acontecimientos, etc.
Vamos a acceder a Google Tag Manager para crear las variables que vamos a emplear y que son necesarias si queremos que este marcado sea dinámico.
Hacemos click en la pestaña de "Variables"y las creamos de la próxima forma:
Si la variable hace una parte del DOM, vamos a poder 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 Elementselector ponemos title.
-
1.2.1) Variable de meta-descripción
1.2.2) Variable de meta-descripción
De nuevo escogemos crear una variable y lo configuramos como se ve en la imagen:
De esta forma, se puede obtener cualquier información dentro de un meta , incluidos los datos de Open Graph, los que 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 sencillísimo, así que de esta forma tienen acceso a todos esos datos.
Este es muy sencillo, puesto 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 podrán ver en la sección de variables, como Page URL.
En en el caso de que no esté activo, solo hacen click en Configuración (el botón rojo) y lo seleccionan, es de los primeros, como pueden ver aquí:
Como sólo queremos el SRC de una sola imagen, lo ideal es seleccionar una con ID, para así saber meridianamente cuál se está seleccionando.
- Seleccionamos DOM Elementcomo Type.
- Para configurar la variable elegimos lo siguiente:
- Selection Method: ID.
- Element ID: aquí va el ID de la imagen.
- Attribute Name: SRC.
- 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 género de etiqueta que es, y después escogemos el atributo SRC, ya que ahí es donde se hallan las URLs de las imágenes.
Si su sitio corre en WP, o bien ya tiene el marcado de , lo más fácil es escoger la imagen directamente desde ahí, ya que si es un Blog, la imagen primordial o destacada se pone automáticamente en ese tag, con lo que sólo tendría que hacer esto:
Esto mismo vamos a hacer con los atributos widthy height, ya que son precisos a la hora de hacer el marcado de las imágenes, y es muy sencillo, solo debes cambiar el Attribute Name.
El proceso es igual que en el caso precedente, solo que en lugar de poner SRC como atributo, vamos a elegir 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.
1.3) Paso 3
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 seleccionar un tag de Custom HTML:
en donde vamos a pegar un script de JavaScript con el cual vamos a introducir nuestros datos estructurados.
Este es un ejemplo de un tag de, para todas las páginas de tu sitio:
var data =
"@context":"",
"@type":"WebPage",
"url":Page URL,
"name":SCHEMA - Title,
"description":SCHEMA - Descripción,
"reviewedBy":
"@type":"Organization",
"name":"Nombre de tu sitio o bien 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 ya antes se ponen entre corchetes - nombre de tu variable - y dentro el nombre de la variable, tal como como la guardaron, ya que más tarde, al dispararse el tag, va a reemplazar ese comodín por el dato extraído por las variables, a fin de que así 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 estarán listos para crear cualquier clase de dato estructurado de forma dinámica, es solo que entren ay 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 y en todo momento debe estar es esto:
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.
Después de tener el Tag, vas a tener que crear un trigger, que lo que va a hacer es determinar cuándo se disparará la etiqueta de JSON que hiciste en el paso precedente.
Para el tag de webPage que utilzamos en el ejemplo anterior, quereremos 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 poner un ejemplo, cuando sólo queremos las páginas de una categoría o bien que están bajo determinado subdirectorio, como /blog o /noticias.
En estos casos, podemos crearlas utilizando el tipo de trigger de Page View, puesto que se activan cuando el usuario accede a la página y usamos la segmentación de Page URLpara introducir el parámetro de la URL que deseamos que sí o sí tengan las páginas en las que se disparan.
En el ejemplo a continuación haremos uno para la sección de /blog:
Como ven, elegimos la opción de Page URL, puesto que deseamos segmentar por subdirectorio, y después escogemos la opción de containsya 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 fraccionarlo hacia cualquier subdirectorio, como por ejemplo: /blog/marketing-digital/ o bien /noticias/finanzas/, con lo que de seguro les va a valer para taggear prácticamente cualquier sección o bien categoría.
Y por último, les muestro cómo taggear una sola página, lo que les va a resular muy fácil, puesto que es muy similar al método mostrado anteriormente:
Es solo mudar la opción de contains por la de equals, de esta manera que sólo se dispara el trigger cuando la URL sea ésa precisamente.
1.4) Paso 4
Antes de incorporar cualquier cambio en Tag Mánager, les aconsejo probarlo para que, así, no se arriesgen a dañar el sitio, más cuando estamos inyectando código, como en este caso.
Para hacer esto, sólo debemos presionar en la flecha al lado del botón de publish de arriba a la derecha y luego seleccionar la opción de preview y debug:
Después de activarlo en Tag Manager, entren al sitio web, desde la misma cuenta o bien sesión de Google (una pestaña nueva), para 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, al paso 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 3 contiene la información delas variables y es aquí, a donde debemos ir para confirmar que las que creamos sí están extrayendo de forma correcta los datos que deseamos 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 dos), para de este modo 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 NOse implementan bien las variables, en Valueles aparece Null.
Con esto confirmamos que los Tags se estén disparando bien y que las variables estén extrayendo y almacenando los datos adecuados, no obstante, todavía queda una instancia más de prueba, mas la debemos hacer después de publicar los Tags.
Para hacer esto sólo tenemos que abandonar el modo perfecto 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 enormemente, 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, como las variables, tags y triggers creados.
Con esto acabamos nuestra tarea en Google Tag Manager, incorporando instantáneamente al lugar todo lo que hemos creado.
1.5) Paso 5
-
1.5.1) Probando los datos estructurados
1.5.2) Probando los datos estructurados
Para hacer esto entramos a esta, que es una herramienta creada por Google para que podamos contrastar que la implementación de los datos estructurados fue adecuada.
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 fallos, o bien si existen algunas mejoras que les podríamos hacer.
Este es un ejemplo de un sitio de software (este es el, por si desean verificarlo mismos), en el que tienen un marcado fácil de webPage:
Como pueden ver les va a enseñar todos y cada uno de los campos y los valores de cada uno de ellos y si hacen click en el campo a la derecha, se los va a resaltar en el código a la izquierda.
Esto lo pueden hacer con cualquier lugar, así que podrían aplicarlo a la competencia y ver cómo tienen marcados sus sitios y ver si pueden prosperar los suyos con esa información.
1.6) Ejemplos de otros tipos de datos estructurados
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 acaso desean verlo mismos este es el link a laque 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:
Los reviews también son buenísimos, puesto que aumentan el tamaño de los snippets y los hacen mucho más vistosos, lo cual tiende a acrecentar el CTR, así que si tienen un lugar con productos, testimoniales o reviews normalmente pueden implementar estos datos estructurados.
Como ejemplo, voy a usar una página de producto y que toma los ratings del retroalimentación de los usuarios, lo que es ideal.
Para hacer que esos ratings de los reviews aparezcan en los snippets tienes que incorporar el marcado de datos de(también puedes verlo en estade Google)
Creo que los más usados son los 2 que mencioné previamente 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 a fin de que sepan de su existencia y los incorporen si aplican para sus sitios web, pues la realidad es que tienen los conocimientos necesarios para incorporar todos los géneros de datos estructurados.
1.7) 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, con lo que no duden en aplicarlo.
Espero que esto les resulte de mucha ayuda y les ahorre tiempo y costos si le pagan a alguien de IT por horas trabajadas, ya que es sencillísimo y los beneficios que trae son muy grandes.
1.7.1) ¿Te ha parecido instructivo este post sobre Google Tag Mánager? Esperamos tus comentarios.
Back to top
