Tutorial de marcado dinámico de datos

Tutorial de marcado dinámico de datos

15 Jul 2020 in

Tabla de contenido

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 top

1) 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:

  1. Elegimos el tipo de variable DOM Element.
  2. El tipo de selección que va a ser por CSS Selector.
  3. 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.

  1. Seleccionamos DOM Elementcomo Type.
  2. Para configurar la variable elegimos lo siguiente:
    1. Selection Method: ID.
    2. Element ID: aquí va el ID de la imagen.
    3. Attribute Name: SRC.
  1. Selection Method: ID.
  2. Element ID: aquí va el ID de la imagen.
  3. 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
Share icon

Solicita información sin compromiso

Políticas de privacidad

De conformidad con lo dispuesto en la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal (LOPD) y su normativa de desarrollo, el responsable del sitio web, CITIFACE MANAGEMENT, S.L., en cumplimiento de lo dispuesto en el art. 5 y 6 de la LOPD, informa a todos los usuarios del sitio web www.citiface.com que faciliten, o vayan a facilitar sus datos personales, que estos serán incorporados a un fichero que se encuentra debidamente inscrito en la Agencia Española de Protección de Datos.

Consentimiento del usuario:
Mediante la marcación de las correspondientes casillas, en los formularios dispuestos en el sitio web para la recogida de datos, los usuarios aceptan expresamente y de forma libre e inequívoca que sus datos personales sean tratados con las finalidades y destinos que se detallarán a continuación.

Finalidad
Los datos que se faciliten a través del portal, se destinarán a la finalidad de responder a su solicitud de información, así como a remitirle información que consideremos que pueda ser de su interés. Incluyendo para ello medios electrónicos (email, sms, etc..). Asimismo, y si usted nos lo indica, le remitiremos a su correo electrónico nuestro boletín electrónico SEO/SEM en el que le trasladaremos recomendaciones y herramientas para la mejora de sus campañas de posicionamiento y pago por clic. Los envíos serán con carácter mensual y podrá dejar de recibirlos en cualquier momento a través del mecanismo establecido en el propio email.

Calidad de datos
Los datos marcados como obligatorios en el formulario que usted cumplimente, son necesarios para la prestación de un servicio óptimo al usuario y dar respuesta a sus requerimientos. En caso de que no sean facilitados todos los datos obligatorios, el prestador no garantiza la prestación de los servicios solicitados.
El usuario será el único responsable, respecto a la veracidad y actualización de los datos aportados a través de los distintos formularios del sitio web

Comunicación de datos a terceros
Sus datos personales no serán cedidos, en ningún caso, a terceras compañías, y que siempre que fuera a realizarse algún tipo de cesión de datos personales, de forma previa, se solicitaría el consentimiento expreso, informado, e inequívoco por parte de los titulares. Ejercicio de derechos ARCO
El prestador garantiza en todo caso al usuario el ejercicio de los derechos de acceso, rectificación, cancelación, información y oposición, en los términos dispuestos en la legislación vigente. Por ello, de conformidad con lo dispuesto en la LOPD, podrá ejercer sus derechos remitiendo una solicitud expresa, junto a una copia de su DNI, a través del correo electrónico: info[at]citiface.com o Calle Farell 3, 1-1. 08014 Barcelona .

Medidas de seguridad
Del mismo modo, el prestador, conforme a lo establecido en el Real Decreto 1720/2007, de 21 de diciembre, por el que se aprueba el Reglamento de desarrollo de la L.O. 15/1999, indica que ha adoptado todas las medidas técnicas y organizativas necesarias para garantizar la seguridad e integridad de los datos de carácter personal que trate, así como para evitar su pérdida, alteración y/o acceso por parte de terceros no autorizados.

Menores de edad
Se prohíbe, expresamente, a los menores de 14 años, facilitar ningún dato a través del presente sitio web, sin contar con el consentimiento y supervisión de sus padres o tutores legales.
Si el prestador tuviera noticia acerca de la infracción de la referida prohibición, procederá a la eliminación de cualquier dato asociado al usuario en cuestión.

Uso de cookies y del fichero de actividad
El prestador por su propia cuenta o la de un tercero contratado para la prestación de servicios de medición, pueden utilizar cookies cuando un usuario navega por el sitio web. Las cookies son ficheros enviados al navegador por medio de un servidor web con la finalidad de registrar las actividades del usuario durante su tiempo de navegación.
Las cookies utilizadas por el sitio web se asocian únicamente con un usuario anónimo y su ordenador, y no proporcionan por sí mismas los datos personales del usuario.
Mediante el uso de las cookies resulta posible que el servidor donde se encuentra la web, reconozca el navegador web utilizado por el usuario con la finalidad de que la navegación sea más sencilla, permitiendo, por ejemplo, el acceso a los usuarios que se hayan registrado previamente, acceder a las áreas, servicios, promociones o concursos reservados exclusivamente a ellos sin tener que registrarse en cada visita. Se utilizan también para medir la audiencia y parámetros del tráfico, controlar el progreso y número de entradas.
Puede Usted rechazar el tratamiento de los datos o la información rechazando el uso de cookies mediante la selección de la configuración apropiada de su navegador, sin embargo, debe Usted saber que si lo hace puede ser que no pueda usar la plena funcionabilidad de este website.
Este sitio web utiliza Google Analytics, un servicio analítico de web prestado por Google, Inc., una compañía de Delaware cuya oficina principal está en 1600 Amphitheatre Parkway, Mountain View (California), CA 94043, Estados Unidos («Google»). Google Analytics utiliza «cookies», que son archivos de texto ubicados en su ordenador, para ayudar al website a analizar el uso que hacen los usuarios del sitio web. La información que genera la cookie acerca de su uso del website (incluyendo su dirección IP) será directamente transmitida y archivada por Google en los servidores de Estados Unidos. Google usará esta información, por cuenta nuestra, con el propósito de seguir la pista de su uso del website, recopilando informes de la actividad del website y prestando otros servicios relacionados con la actividad del website y el uso de Internet.
Google podrá transmitir dicha información a terceros cuando así se lo requiera la legislación, o cuando dichos terceros procesen la información por cuenta de Google. Google no asociará su dirección IP con ningún otro dato del que disponga Google.
Puede Usted rechazar el tratamiento de los datos o la información rechazando el uso de cookies mediante la selección de la configuración apropiada de su navegador, sin embargo, debe Usted saber que si lo hace puede ser que no pueda usar la plena funcionalidad de este website. Al utilizar este website Usted consiente el tratamiento de información acerca de Usted por Google en la forma y para los fines arriba indicados. En todo caso, le informamos que para instar a la cancelación de los posibles tratamientos de datos llevados a cabo por Google, deberá dirigirse a esa compañía, a tal efecto. El prestador no tiene la capacidad técnica ni legal, para proceder al cese en el tratamiento de datos fuera del ámbito delimitado por los ficheros y medios técnicos de su titularidad. Y no se le podrán exigir responsabilidades en este sentido. Para conocer más acerca de las cookies es.wikipedia.org/wiki/Cookie_(informática)

SEMrush

SEMrush

SEMrush

ESTOS EXCLUSIVOS INFORMES GRATUITO REVELAN

7 SECRETOS DE EXPERTOS SEO QUE TE LLEVÁN AL 1#
7 SECRETOS DE EXPERTOS SEO QUE TE LLEVÁN AL 1# EN GOOGLE PARA GANAR 10.000s DE TRÁFICO DE CALIDAD GRATUITO - EN SÓLO 2 MESES
 

Los 7 pasos más poderosos para disparar tu ranking orgánico para ALCANZAR Y MANTENER un impresionante tráfico orgánico es TUYO.

Consigue gratis lo que el 1% de los expertos en SEO venden por miles de euros... y el otro 99% ni siquiera sabe que existe.


OBTEN MI INFORME GRATUITO
5 errores que debes evitar en tu sitio web de Drupal
Ebook - 5 errores que debes evitar en tu sitio web de Drupal (¡podrían costarte miles de euros!)
 

Este Ebook cubre 5 terribles errores que probablemente estés cometiendo ahora mismo con tu sitio web de Drupal.

¡Nº3 TE SORPRENDERÁ! Esta lectura de 10 minutos te ahorrará miles de euros.



OBTEN MI INFORME GRATUITO