en etiquetado semántico

Guía: Como funciona el Marcado semántico de una web y porque implementarlo con Tag Manager

Tweet about this on TwitterShare on LinkedInShare on FacebookShare on Google+

Voy a repasar que es el marcado semántico, como implementarlo en tu web y porque si tienes que etiquetar a mano tu web y no tienes una solución que se adapte a tus necesidades te recomendó hacerlo con Google Tag Manager.

Sobre el marcado semántico

El marcado semántico es el ejercicio de etiquetar nuestra web para que esta sea entendida de una forma más clara por los motores de búsqueda. Además, existe un importante número de aplicaciones que rastrean la información semántica de nuestras webs y la pueden utilizar de distinto modo.

Un ejemplo, podemos etiquetar un número para que al pulsar sobre el nuestro teléfono realice una llamada sin tener que andar copiando o memorizando el número al que queremos llamar.

En el caso de google este puede modificar los resultados de búsqueda en base a la información semántica que obtiene de nuestra web. En la siguiente captura podemos ver como muestra el rastro de migas de pan en lugar de las URLs en los resultados de búsqueda gracias a que este ha sido etiquetado con un marcado semántico.

Captura

Para ampliar este tipo de información Google necesita de la ayuda de los webmaster.

Y al final se trata de eso, marcar nuestra web para que muestre directamente en los resultados de búsqueda más información a sus usuarios. A día de hoy se dan ya casos donde los usuarios no tendrían que acceder a nuestra web para consumir la información que están reclamando ya que la información se consumirá directamente en Google.

Un ejemplo puede ser como google ofrece directamente la información del tiempo de la web weather.com sin que el usuario tenga que acceder a weather.com.

captura2

Este tipo de buscador llevado a un extremo donde vemos gran cantidad de información sin enlaces a terceros lo puedes ver en https://www.wolframalpha.com/:

captura3

 

Sobre si darle a google o no esta información entiendo que es una reflexión que cada uno tiene que hacer con su modelo de negocio. Como otros muchos aspectos de la optimizan de una web es una oportunidad de tener visibilidad en google que podemos aprovechar o no. Está claro que si Google quiere obtener información para añadir en sus resultados de búsqueda los va obtener.

Repasando algunos de los cambios que ha realizado Google durante los últimos años vemos que esta dando pasos para proveer de herramientas para etiquetar nuestra web:

  • Creación junto con Yandex, Bing y Yahoo de schema.org como lenguaje de referencia en  Julio del 2011 (link a la fuente).
  • Mejora de la herramienta de datos estructurados, esta es una de las mejoras hechas en 2012 (link a la fuente) desde entonces la herramienta ha seguido mejorando hasta la versión actual. Esta es su URL a día de hoy (link a la fuente) y su alternativa natural sería la herramienta de yandex https://webmaster.yandex.com/microtest.xml que durante un tiempo fue mejor que la de google pero que a día de hoy se ha quedado en un nivel inferior.
  • Destacador de eventos en google search console en diciembre de 2012 (link a la fuente)
  • Creación del asistente de datos estructurados en Mayo de 2013 (link a la fuente) que vendría a completar el destacador de eventos.
  • Creación en google search console de un panel con información de los datos estructurados que google lee en nuestra web en Marzo de 2014  (link a la fuente).
  • Nuevo informe con información sobre rich cards de este mes (link a la fuente) que como he podido probar a diferencia del marcado de datos que simplemente te marca lo que lee de tu web y si la información que le pasas es correcta en este informe se indica las posibles mejoras en tú marcado que entiendo que son para que tu marcado se adapte lo mejor posible a las rich card que google muestra en sus resultados de búsqueda.

El marcado no solo engloba los lenguajes que vamos a ver a continuación. También el propio HTML5, un lenguaje semántico donde al emplear etiquetas como “main”, “header”, “footer”, “aside”, “nav” estamos dotando al contenido presente en estos contenedores de información semántica que ayuda a motores de búsqueda como google a categorizar y rankear de una forma más efectiva nuestros contenidos.

Ok, quiero hacerlo, pero ¿ahora como realizo el marcado de mi web?

Existen 2 opciones:

  1.  usar la herramienta de marcado de datos de Google
  2. etiquetar nuestra web directamente en su código fuente.

Tienes que tener en cuenta que siempre hay que seguir una regla, no etiquetar dos datos de tu web dos veces. Puedes marcar distintas partes de tu web con distintas soluciones de marcado, pero no se recomienda marcar el mismo dato con dos soluciones distintas.

 

La herramienta de marcado de google:

La herramienta de Marcado nos permite  indicar en un proceso bastante intuitiva y sencillo de manejar que partes de nuestra web queremos etiquetar. En la siguiente captura se pueden ver las partes que se podrían etiquetar con este método a día de hoy.

captura4

Sencillo, pero solo tendremos una cantidad limitada de etiquetas a usar, solo serían válida para google e incluso podemos tener problemas con algún campo que no interpreta bien.

Puede ser un punto de partida, pero si queremos ir más allá tendremos que etiquetar directamente en la web y aquí empieza a complicarse un poco todo.

Etiquetando nuestro código fuente:

Tenemos que diferenciar dos partes lenguaje de marcado y formatos de marcado.

Lenguajes de marcado:

Los lenguajes de marcado nos van a indicar que podemos etiquetar de nuestra web, la forma de hacerlo y las reglas que tenemos que seguir para hacerlo correctamente.

Ejemplos de lenguaje de etiquetado son microformats.org, schema.org y Open Graph protocol.

Formatos de etiquetado:

Los formatos de etiquetado nos van indicar como etiquetar o insertar esta información en nuestra web.

Así que podemos etiquetar nuestra web con el lenguaje de etiquetado de Microformats.org y con el formato JSON-LD o con Schema.org y el formato Microdata.

El lenguaje recomendado es schema.org ya que es el que google, yahoo, bing y yandex han tomado como estándar así que sobre esto no habría discusión solo quiero que te quedes con el dato de que existen alternativas como microformats.org y que existe la división entre que etiqueto (lenguaje) y como lo etiqueto (formato) y que cada lenguaje tiene disponibles distintos tipos de formatos.

En Schema.org tienes disponibles los tres (RDFa, Microdata y JSON-LD).

Formatos de Marcado

Los formatos de marcado disponibles son RFDa, Microdata y Json-ld.

RDFa: Es el más antiguo de todos y se usa etiquetando directamente en el código html de nuestra web. Es válido para cualquier tipo de formato HTML.

Microdatos: Llegaron de la mano de html5 y su funcionamiento es similar a los RDFa ya que hay que etiquetar nuestro código html con ellos. Existe pocas diferencias entre ellos y el formato RDFa. Personalmente veo que son más excluyentes los microdatos que los RDFA ya que los microdatos son propios de HTML5 mientras que los RDFa se pueden usar en cualquier formato no solo en html5. Google durante el desarrollo de HTML5 siempre digo los microdatos era su formato recomendado.

JSON-LD: Los últimos en llegar. Desde hace un año y medio Google siempre los usa como ejemplos en su documentación por lo que parecía lógico que en su último post de este mes haya añadido que es su nuevo formato recomendado, como digo se veía venir. Este formato introduce el marcado semántico a través de un añadido a nuestra web en formato javascript y no etiquetando directamente nuestro HTML. Al ser un código independiente facilita en gran medida el desarrollo de la web y el desarrollo del marcado semántico sin tener problemas de añadir la información en nuestra plantilla, que esta se modifique y se rompa el marcado.

captura5

Aquí un ejemplo de un código HTML que contiene un evento sin etiquetar:

captura6

Como se vería este mismo código al que se le aplica el etiquetado de Schema.org en formato RDFa que iría directamente en el html:

captura7

El mismo tipo de lenguaje de schema.org pero en formato Microdata (como veis hay pocas diferencias):

captura8

Y la alternativa a estos dos que sería JSON-LD donde insertaríamos en código mediando un javascript en nuestro html pero sin tener que modificar la estructura de las plantillas de nuestra web. Con añadirlo dentro código es suficiente:

captura9

Este ejemplo y algunos más los podéis ver en esta URL http://schema.org/Event

 

Ahora tenemos un problema….

En general es complicado añadir esta información  ya que tanto etiquetar el código propio de la web como añadir código javascript tienen su dificultad. Aunque estemos trabajando con un CMS popular tipo wordpress desde donde podemos disponer de plugins que realicen la tarea por nosotros no son pocos los casos en los que estos no llegan a cubrir todas las necesidades o su sistema de etiquetado genera errores.

Así que cuando ni el marcador de google, ni las funcionalidades de nuestros gestores lo hacen posible mi recomendación para etiquetar un portal es hacerlo con JSON-ld insertado desde TAG Manager.

¿Por qué tag Manager?

Para el que no lo conozca Tag Manager es un gestor que viene a solucionar los problemas de los analistas que veían como se ralentizaban sus implementaciones de códigos dentro de las webs que administraban debido a los largos tiempos de espera entre que solicitaban la inclusión de un código y que este se terminaba implementando en las webs.

Tag Manager es un código único que se inserta en nuestra web y que nos ofrece una ventana para añadir todo el javascript que queramos desde su panel de administración. Con el podemos configurar de forma sencilla nuestros códigos de marcado semántico en JSON-LD e insertarlos en la web sin tener que solicitar desarrollos en los portales que llevamos. Lo podemos hacer todos directamente con esta aplicación.

El etiquetado proceso es bastante sencillo, aquí podéis ver el ejemplo de inserción de un código individual desde Tag Manager http://engageinteractive.co.uk/blog/using-google-tag-manager-to-add-schema-structured-data aunque este post no muestra la potencia completa de la herramienta ya que con las opciones que facilita podríamos etiquetar con un solo código todo el rastro de migas de nuestra web o todos los eventos de forma sencilla.

Por ahora lo dejo aquí, pero voy a intentar sacar tiempo para compartir ejemplos de códigos que realicen el marcado de todo el rastro de migas de pan de nuestra web, de todos los eventos o de todos nuestros artículos con un solo código.

Espero que os haya gustado el resumen!

Tweet about this on TwitterShare on LinkedInShare on FacebookShare on Google+

Comentarios

Comentario