Cómo Poner Schema Markup en tu Página con Google Tag Manager

Google Tag Manager es, en mi humilde opinión, la herramienta gratuita más poderosa que cualquiera que hace marketing puede usar.

Uno de los usos que le puedes dar a Google Tag Manager es utilizarlo para insertar Schema Markup en tu sitio web y así mejorar el SEO de tu página.

¿Lo mejor de todo? Hacer esto no te llevará más de 20 minutos.

Comencemos.

¿Qué es Schema Markup y por qué es importante?

Schema.org nació de la colaboración entre Google, Bing, Yandex (el motor de búsqueda más grande de Rusia) y Yahoo! para ayudarnos a quienes hacemos SEO a proveerles la información que necesitan entender de nuestras páginas de una forma estructurada.

Al utilizar Schema Markup en tu sitio web, los motores de búsqueda como Google pueden entender más fácilmente de qué se trata tu página.

Por ejemplo, en la siguiente pantalla pueden ver cómo en esta página tengo Schema Markup de "ProfessionalService" para explicarle a Google que ofrezco un servicio profesional y la descripción de éste.

schema markup professionalservice

Lo que ven arriba es la Herramienta de Datos Estructurados de Google, la veremos más a detalle en unos minutos.

Utilizar Schema Markup puede ayudarte a mejorar tu SEO increíblemente, pero pocos lo usan porque parece que tiene que ver con código y todos los marketeers le tenemos un poco de miedo a eso.

Pero con Google Tag Manager no necesitas conocimiento alguno de HTML, Javascript, ni JSON-LD (que es lo que utilizaremos), solo seguir los siguientes pasos y tu SEO se irá a los cielos.

Cómo agregar Schema Markup a tu página usando Google Tag Manager

Primero que nada, necesitas tener Google Tag Manager en tu sitio web. Es increíblemente fácil de instalar, así que si no lo has hecho, hazlo ahora.

Aquí tienes instrucciones para instalar Google Tag Manager y el curso de Google para hacerte un experto en Google Tag Manager si no tienes idea de cómo usarlo.

(Para lo que vamos a hacer no necesitas ser ningún experto, solo seguir los pasos al pie de la letra).

1. Agregar Schema Markup estático a tu página

Instalaremos dos tipos de Schema Markup: estático y dinámico.

El markup estático es increíblemente sencillo ya que será el mismo para todo tu sitio web.

El dinámico es un poco más complicado ya que es markup que cambia con cada página (por ejemplo, las páginas de un blog).

Empezaremos por agregar el markup estático.

J.D. Flynn creó una sencilla, pero fabulosa herramienta para generar los fragementos de código JSON-LD que utilizaremos para nuestro Schema Markup.

Solo ve al JSON-LD Schema Markup Generator de J.D. y escoge el que mejor le vaya a tu sitio web.

Para esto usaremos como ejemplo una clínica dental (estudié odontología un semestre y siempre he estado frustrado por eso) llamada Level Dental Group.

Lo primero será elegir el tipo de markup que quieres crear. En este caso utilizaremos "Local Business".

Schema markup local business

Después la herramienta nos ofrecerá varios tipos de negocios locales. Para este ejemplo elegiremos "Dentist".

schema markup con google tag manager

Ahora que esas dos variables están establecidas, la herramienta nos pedirá información específica para ese tipo de Schema Markup. Al llenar esos datos, la herramienta genera el código JSON-LD automáticamente.

JSON-LD Schema Markup Tag Manager

Ahora viene la parte en que entra en juego Google Tag Manager. Cuando tengas el código JSON-LD, cópialo y dirígete a Tag Manager. Ahí crea una nueva etiqueta.

tag manager schema markup

Ponle un nombre a tu nueva etiqueta y elige HTML personalizado como el tipo de etiqueta.

schema markup tag manager

Ahora solo pega el código JSON-LD que copiaste de la herramienta de J.D.

instalar schema markup con tag manager

Elige que la etiqueta se active en todas las páginas y publícala.

Ahora es momento de probar si el Schema Markup está instalado y escrito correctamente. Para esto iremos a la Herramienta de Datos Estructurados de Google.

Ahí introduce la dirección de la página donde pusiste el Markup y haz un test para ver si todo salió bien.

herramienta de datos estructurados de Google

Si seguiste los pasos al pie de la letra, podrás ver un resultado como el siguiente:

seo schema markup json-ld

0 errores, 0 advertencias. 

Fácil, ¿cierto? Puedes agregar todos los markups que necesites con la herramienta de J.D. Flynn. Solo con esto ya estarás por encima de tus competidores en SEO, así que hazlo ahora.

Vamos a la parte un poco más complicada...

2. Agregar Schema Markup dinámico en tu página

Poner markup estático es sencillo porque los valores no cambian. El nombre del negocio seguirá siendo el mismo para todas las páginas, el número telefónico, dirección, etcétera.

¿Pero qué podemos hacer con páginas que siempre tienen valores diferentes como los posts de nuestro blog? Podrías insertar todo el markup cada que publicas algo nuevo, pero es una pérdida de tiempo.

Cada post en tu blog tiene un título diferente, una fecha de publicación diferente, una descripción diferente, etcétera.

Es por eso que necesitas insertar variables dinámicas en este markup y ahora mismo veremos cómo.

thor guiñando por su SEO

Primero que nada debo aclarar que no soy programador y mi conocimiento de código es muy limitado. Probablemente tú también estés en esas circunstancias, así que nos robaremos el markup con el que empezaremos.

Para esto sacaré el schema markup de Moz, quienes son los mejores cuando se trata de SEO (si vas a robar, roba a los mejores).

Tomaremos una página del blog de Moz y la pondremos a prueba en la herramienta de datos estructurados de Google.

blogposting schema markup tag manager

Los resultados nos dicen que Moz tiene Schema Markup de BlogPosting, lo cual es perfecto para nosotros. Como puedes ver, a la izquierda está el markup. Vamos a copiarlo y pegarlo en un bloc de notas o donde quieras.

El Markup se ve así:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://moz.com/blog/homepage-personalization"
},
"headline": "The Homepage is Dead: A Story of Website Personalization ",
"image": {
"@type": "ImageObject",
"url": "https://d1avok0lzls2w.cloudfront.net/uploads/og_image/5907c38841e512.10987856.png",
"height": 440,
"width": 880
},
"datePublished": "2017-05-02T00:03:00-07:00",
"dateModified": "2017-05-03T10:41:52-07:00",
"author": {
"@type": "Person",
"name": "Cara Harshman"
},
"publisher": {
"@type": "Organization",
"name": "Moz",
"logo": {
"@type": "ImageObject",
"url": "https://d2eeipcrcdle6.cloudfront.net/brand-guide/logos/moz_blue.png",
"width": 134,
"height": 39
}
},
"description": "In the quest for better conversions, Optimizely went from one homepage to 26 different versions uniquely personalized to different visitors and increased conversions by over 100%. Cara Harshman shares the thought process and methodology behind the experiment."
}
</script>

Recuerda copiar desde <script type="application/ld+json"> hasta </script>.

Ahora determina cuáles variables son estáticas y cuáles son dinámicas. En el markup de arriba puse en negritas las variables dinámicas en las que simplemente adaptarás el markup a tu página, y en cursiva las variables dinámicas que cambian con cada post.

Sustituiremos las variables dinámicas con variables de Google Tag Manager. Estas variables están rodeadas por dos llaves, por ejemplo: {{variable}}.

El siguiente paso será sustituir las variables dinámicas por variables para Google Tag Manager y las variables estáticas por los datos de tu página, de esta forma:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"{{idurl}}"
},
"headline": "{{headline}}",
"image": {
"@type": "ImageObject",
"url": "{{ImagenPrincipal}}",
"height": "1024",
"width": "1024"
},
"datePublished": "{{datepublished}}",
"dateModified": "{{datemodified}}",
"author": {
"@type": "Person",
"name": "{{autor}}"
},
"publisher": {
"@type": "Organization",
"name": "Level Mercadotecnia",
"logo": {
"@type": "ImageObject",
"url": "http://levelmercadotecnia.com/wp-content/uploads/2016/10/cropped-level-marketing-logo-01-1.png",
"width": "240",
"height": "96"
}
},
"description": "{{description}}"
}
</script>

Lo único que hice fue poner variables de Google Tag Manager en donde las variables cambian con cada post y poner los datos de Level Mercadotecnia en las variables fijas. Ahora copiaremos esto y lo pegaremos en una nueva etiqueta de Google Tag Manager.

Por la naturaleza de este markup, elegiremos que solo se active en las páginas que tienen la palabra "blog" en la URL. Intenta publicar tu nueva etiqueta y te encontrarás con los siguientes errores:

errores de variables schema markup tag manager

Esto es porque, tal como dice ahí, hay variables desconocidas que tenemos que definir en Google Tag Manager. Aquí es donde la parte divertida llega.

Las variables que necesitamos crear en Google Tag Manager son:

  • {{idurl}}
  • {{ImagenPrincipal}}
  • {{description}}
  • {{autor}}
  • {{datemodified}}
  • {{headline}}
  • {{datepublished}}

Para hacer esto iremos a variables en Google Tag Manager y crearemos una nueva "variable definida por el usuario".

variables google tag manager schema markup

Empezaremos con la variable {{idurl}}. Crea una nueva variable definida por el usuario y ponle el mismo nombre a la variable que pusiste en el markup (en este caso, idurl). Importante: las variables distinguen entre mayúsculas, así que ten cuidado con eso.

En tipo de variable elige Elemento DOM.

En método de selección elige Selector de CSS.

En selector de elementos escribe meta[property="og:url"].

Y en nombre del atributo escribe content.

Tu variable se debe ver así:

variable tag manager schema markup seo

Ahora, ¿de dónde sacamos esto? Del Open Graph de Facebook que está en el código de nuestra página (todas las páginas deben tener Open Graph, incluyendo la tuya).

Puedes distinguir el Open Graph en tu página porque tiene "og" en cada línea. Como puedes ver, abajo está señalada la línea de Open Graph que utilizamos para la variable de arriba.

Open graph schema markup

Lo que hicimos fue decirle a Google Tag Manager que extraiga el contenido de esa línea cada que la variable idurl sea llamada.

Ahora haremos lo mismo para cada una de las otras variables.

  • {{ImagenPrincipal}}

variable imagen principal schema markup

  • {{description}}

variable description tag manager schema markup

  • {{autor}}

variable autor google tag manager

  • {{datemodified}}

datemodified schema markup

  • {{headline}}

headline schema markup

  • Y por último {{datepublished}}

datepublished schema markup

Ahora puedes intentar volver a publicar la etiqueta en Google Tag Manager y esta vez no debería de marcarte error alguno.

La prueba de fuego es ir a la herramienta de datos estructurados de Google y someter a prueba uno de tus posts de blog. Si seguiste cada paso al pie de la letra, debes obtener algo así:

structured data testing tool

0 errores, 0 advertencias. Tal como debe ser.

¿Qué piensas? Si tienes alguna duda siéntete libre de hacérmelo saber al correo braulio@levelmercadotecnia.com y con gusto la resolveré.

Allons-y!

¿PODEMOS ENVIARTE UN CORREO DE VEZ EN CUANDO? SUSCRÍBETE Y RECIBE NUESTROS ARTÍCULOS CADA SEMANA

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *