icon/dark/fileicon/dark/foldericon/dark/folde-openicon/dark/hashtagicon/dark/line-graphicon/dark/listicon/dark/localicon/dark/lock

¿Qué es la Web Semántica?

La información que contienen las páginas HTML no sigue ninguna estructura o formato preestablecido que identifique claramente dónde empieza y termina cada elemento de información ni qué representa esa información.

Así, si prescindimos de los elementos de diseño visual del código HTML, como el tipo o tamaño de letra, las imágenes o los párrafos, una página web se mostraría como una secuencia de texto donde, a primera vista, no podríamos distinguir qué información contiene y cómo están relacionadas entre sí.

Entonces, ¿cómo podemos nosotros, las personas, localizar e identificar la información que nos interesa dentro de una página? Fundamentalmente, por estos dos factores:

  • El código HTML permite modificar el aspecto visual de determinadas partes del texto, de forma que éste se puede organizar y relacionar con otros ítems de la página. Por ejemplo, los encabezados de sección, la disposición del texto en párrafos o la utilización de listas de elementos.

  • La ayuda visual del punto anterior tan solo facilita localizar o aislar una determinada información dentro del flujo de texto. Solo comprendiendo el significado de este texto, que incluso puede variar en función del contexto de la página, somos capaces de interpretar cada dato y relacionarlo con otros datos que hubiera en la página.

Estos dos factores son los que nos permiten, por ejemplo, saber, entre otros datos, cuál es el precio del siguiente producto (que utilizaremos como ejemplo en los siguientes apartados), su nombre o la valoración de los usuarios que lo han comprado:

Descripción de las características de una bombilla LED en un sitio de eCommerce

Sin embargo, este proceso, tan intuitivo y natural para los seres humanos, es actualmente inasumible por los sistemas informáticos que, por un lado, no tienen la capacidad de "ver" la página tal como la vemos nosotros y, por otro, no son capaces de “interpretar” los datos que hay en dicha página.

Un sistema informático o, a los efectos que más nos puede interesar para un sitio web, el rastreador ("crawler") de un buscador tan solo leerán el código HTML de esa página web; es decir, una secuencia de texto con etiquetas HTML intercaladas para el formato del texto o inclusión de imágenes:

Código HTML de un producto codificado en una página web

Solo con este texto, incluso para una persona sería complicado localizar e identificar cada elemento de información (de lo cual era capaz solo mirando e interpretando la página web), con una alta probabilidad de equivocarse, pasar por alto o malinterpretar algún dato relevante.

El concepto de Web Semántica surge a partir de esta necesidad de identificar dentro del texto que contiene el código HTML de una página web qué datos contiene y qué significa cada uno. En los ejemplos de las imágenes anteriores, cuál es el nombre del producto, su precio, su descripción o su valoración.

A primera vista, este paradigma de la Web Semántica puede parecer un tanto intrascendental, pero su impacto en Internet en general, y en el eCommerce en particular, es enorme, pues supone pasar de concebir Internet como un (enorme) conjunto de páginas web enlazadas entre sí, a un (igualmente enorme) conjunto de datos enlazados entre sí, en el que cada dato está perfectamente identificado para su correcta interpretación.

La Web Semántica en las búsquedas de Google

El hecho de que, utilizando las técnicas de la Web Semántica, la información contenida en las páginas web deja de ser una secuencia lineal de texto de difícil interpretación, para pasar a ser un conjunto de datos perfectamente identificados, supone un cambio radical en el proceso de búsqueda de los buscadores.

La Web Semántica en las búsquedas

Lo que, en la Web tradicional, solo podía ser una búsqueda prácticamente exacta, basada en la correlación y/o similitud con las palabras clave utilizadas por el usuario, en la Web Semántica supone un salto cualitativo no solo en las posibilidades de la propia búsqueda, sino en la presentación de resultados al usuario (SERP’s).

Así, dado que la información de las páginas web está identificada bajo un determinado concepto y significado (por ejemplo, "precio"), los buscadores pueden utilizar este conocimiento para comprender mejor la intención de búsqueda de usuario y proporcionar resultados más próximos a lo que está buscando (por ejemplo, “¿cuánto cuesta un bicicleta estática?”, en la que no aparece la palabra clave precio), mejorando sustancialmente la experiencia de usuario.

Esta ventaja no es consecuencia exclusiva ni directa de la Web Semántica, sino que también ha requerido avances significativos en el tratamiento y reconocimiento del lenguaje natural (es decir, cómo hablamos y escribimos realmente las personas). La Web Semántica, sin embargo, ha hecho posible poder relacionar esa consulta del usuario con páginas que, con un alto grado de probabilidad, contienen la información que está buscando.

En segundo lugar, el hecho de que la información esté perfectamente clasificada abre la oportunidad de que se muestre en los resultados de búsqueda en una representación más visual mucho más informativa y atractiva que el habitual párrafo de texto, pues el buscador puede extraer cada dato y mostrarlo en el formato que considere más conveniente.

Por ejemplo, para la consulta "¿Cuánto cuesta una bicicleta estática?", Google mostraría algo parecido a lo siguiente, con el indudable beneficio para los usuarios... y, por supuesto, para los sitios web que, gracias a la Web Semántica, tienen mayor visibilidad en los SERP’s:

Visualización de productos de eCommerce en los resultados de búsqueda

La Web Semántica en sitios web de eCommerce

En los ejemplos de los apartados anteriores ya se vislumbraba lo que puede suponer la implantación de la Web Semántica en sitios web de eCommerce: algo tan básico, y a la vez tan fundamental, como que el rastreador del buscador sepa distinguir, en la maraña de texto de una página web, cuál es el nombre del producto, la descripción de sus características o el precio.

La Web Semántica en las webs de eCommerce

Información que el buscador utilizará para cotejar esta información del sitio eCommerce con la consulta realizada por el usuario, que no tiene porqué referenciar expresamente a ese tipo de información (lo que ya vimos con respecto a la información sobre el precio y la consulta sobre cuánto cuestan las bicicletas).

Mientras que, según vimos en el apartado anterior, para que el buscador sacase el máximo provecho de las posibilidades de la Web Semántica era necesario un avance significativo en la comprensión de la consulta realizada por el usuario, más allá de un conjunto más o menos cerrado de palabras clave, también los sitios web de eCommerce deben implantar un cambio tecnológico para dar cobertura a la Web Semántica.

Este cambio supone incorporar en las páginas web algún tipo de información adicional que identifique sin ambigüedad cada dato relevante de un producto (nombre, descripción, precio, imágenes, valoración, etc.), de forma que ese dato sea interpretado y manipulado correctamente en función de su significado por parte del rastreador o cualquier otro sistema automático que acceda a la página web de ese producto.

Para ello, hay definidos diversos estándares que el propietario de un sitio web de eCommerce puede adoptar para implementar las características de la Web Semántica en sus productos, etiquetando cada dato relevante de éstos siguiendo una nomenclatura y sintaxis determinadas, de forma que cualquier visitante, sea humano o automático, sabrá el significado de un dato viendo la etiqueta a la que está asociada.

¿Cómo dar significado a la información de una página web? Datos estructurados

Dado que toda la información de una página web está representada en un fichero de texto con código HTML, se hace necesario ampliar este código con etiquetas o códigos adicionales, además de los propios del HTML, que se utilizarán para identificar qué significa o representa cada elemento de información de la página web.

Datos estructurados para dar significado a la información

Con la utilización de estas etiquetas, la información de la página web deja de ser una secuencia de texto sin estructura interna ni relación entre las palabras, y se convierte en un conjunto de datos, cada uno con un significado claramente definido por la etiqueta que lo identifica y relaciona con otros datos incluidos en esa página.

De esta forma, mientras que con la Web clásica debíamos "suponer" que el número que aparece junto a un texto que pone “Precio” o con un símbolo de euro al lado era el precio del producto, con la Web Semántica no habrá ninguna duda, porque ese número estaba debidamente etiquetado en el código HTML como que es un dato de tipo “Precio” correspondiente a un determinado producto.

Siguiendo con el resto de la información que puede tener un producto (nombre, descripción, valoración de usuarios, SKU, imágenes, ...), cada uno de estos datos tendrá una etiqueta. Esta les atribuye su significado y define cómo interpretarlos, quedando identificados como parte de las propiedades o características del producto.

Por ejemplo, para el producto que veíamos en la imagen anterior de una bombilla, al código HTML de esa página web se le añadirían esas etiquetas de una forma parecida a la siguiente, utilizando un formato similar a las propias etiquetas HTML:

`[[ ----- Aquí estaría el código HTML de la página web ]]

<nombre>10 bombillas LED de 5w Liqoo (12v, 420 lúmenes, luz fría)</nombre>

<precio>27,99</precio>

<valoración>4.3>/valoración>

<imagen> [URL de una imagen del producto] </imagen>

...

[[ ----- Aquí continuaría el código HTML de la página web ]]`

Con este etiquetado, cualquier rastreador sería capaz de identificar:

  1. que en esa página web hay un producto (etiqueta )

  2. cuáles son las características de ese producto, desde su nombre (etiqueta ) hasta la valoración de los usuarios (etiqueta ).

Con un método tan sencillo como añadir algunas etiquetas, no solo hemos conseguido dotar de significado a la información contenida en el texto HTML de la página web, sino que también hemos establecido una relación o jerarquía en esta información; en este caso, los distintos datos que definen las características de un producto.

Hemos pasado de un contexto sin estructura (texto HTML) a un contexto, también basado en HTML, en el que los datos siguen una estructura determinada bajo un patrón de etiquetas conforme a su significado.

¿Cómo etiquetar (marcar) los datos estructurados?

Ahora bien, no podemos etiquetar los datos según nos parezca bien (como hemos hecho en el ejemplo del apartado anterior), sino que debemos ajustarnos a un estándar reconocido de etiquetado para estructurar y dar significado (semántica) a los datos, para que quien visite nuestra página web pueda comprender las etiquetas semánticas utilizadas.

Hasta ahora, hemos utilizado el término "etiquetar" para designar este proceso de dar significado a los datos de una página web. Aunque este concepto de “etiquetar” se ajusta a la realidad, este proceso se denomina habitualmente como marcado de datos estructurados. Es decir, que en vez de “etiquetar” datos, diremos que estamos “marcando” datos.

En la actualidad hay dos especificaciones de formato para marcar los datos estructurados, microformatos y Schema. Aunque los microformatos fueron creados varios años antes que Schema, el hecho de que Schema sea una iniciativa apoyada por los principales buscadores (Google, Bing y Yahoo!) hace que sea la especificación que está consiguiendo mayor difusión.

Además, Schema ofrece algunas ventajas con respecto a los microformatos que también favorecen esta rápida expansión:

  • Ofrece mayor diversidad semántica. Además de identificar la información de una página web, también permite identificar acciones (como compras, búsquedas o ventas) o áreas funcionales de una página web (como el menú principal o el rastro de migas), entre otros.

  • Organizado en una estructura jerárquica, lo que facilita su manipulación automática y la incorporación de nuevos tipos de datos (significados) cuando sea necesario.

  • Permite tres formatos distintos, que se pueden utilizar indistintamente (aunque se recomendable utilizar solo uno de ellos en un mismo sitio web) para facilitar su incorporación a sitios web ya existentes en función de la tecnología utilizada.

De los tres formatos que soporta Schema (microdata, RDFa y JSON-LD), Google recomienda la utilización de JSON-LD, puesto que permite integrar los datos estructurados en el código de la página web sin necesidad de modificar el etiquetado HTML ya existente, sino que basta añadir un script en JavaScript en la cabecera ("head") de la página web, aunque hay que ser cuidadoso para evitar problemas con la duplicidad de información.

Los otros dos formatos, en cambio, requieren modificar las etiquetas HTML, añadiendo nuevos atributos para identificar el significado de cada parte del texto y, en ocasiones, incluso incluyendo más etiquetas HTML para delimitar el inicio y fin de un dato dentro del flujo de texto. Se evita el problema de la duplicidad de la información, pero a costa de mayor trabajo de implementación.

Datos estructurados para un sitio web de eCommerce

La jerarquía de datos estructurados de Schema contiene la definición de multitud de tipos de datos, según el significado de la información que van a identificar y referenciar. Para el caso de sitios web de comercio electrónico, disponemos del tipo "Product", que permite marcar los datos de los productos o servicios que se ofrecen en una página web.

El tipo de datos "Product" contiene una gran variedad de etiquetas, denominadas propiedades, para identificar cada elemento de información que existe para un determinado producto. Aunque hay más de 30 propiedades para los productos (y algunas de estas propiedades, a su vez, tienen sus propias propiedades), vamos a destacar las más habituales:

  • Name. El nombre del producto.

  • Description. La descripción del producto, que puede ser tan compleja como queramos, con listas de elementos, negritas, párrafos, etc., siempre que sea en formato HTML.

  • Image. Una o varias imágenes del producto.

  • aggregateRating. Valoración que los usuarios han votado a este producto. Esta propiedad, a su vez, está formada por elementos de información más pequeños, como el número de votos o la puntuación más alta.

  • Offers. Describe la oferta de adquisición de este producto e incluye propiedades internas como precio, disponibilidad, cantidad disponible en stock o moneda de pago, entre otros.

  • Manufacturer. Identifica al fabricante del producto (en caso de que no sea un producto de construcción propia).

  • isSimilarTo. Referencia a otro u otros productos parecidos o del mismo estilo que el producto que se está ofertando (por ejemplo, si el producto fuese un monitor, serían referencias a otros monitores de prestaciones similares).

  • isRelatedTo. **Referencia a otro u otros productos relacionados con el producto que se está ofertando (por ejemplo, si el producto fuese una bicicleta, serían referencias a accesorios para bicicleta o ciclistas).

  • itemCondition. Designa el estado del producto en el caso de que el sitio web contemple la posibilidad de adquirir productos de segunda mano, reacondicionados o de muestra).

En función de las características del sitio de comercio electrónico y de la información que se muestra para cada producto, el propietario debe seleccionar cuáles de todas estas propiedades se ajustan a sus necesidades y objetivos.

Una vez hecha esta selección, si el sitio web ya existe y está operativo, la forma más rápida y eficaz de incluir los datos estructurados sería utilizando el formato JSON-LD, que no necesita modificar nada del código HTML del producto en la página web, siendo suficiente con añadir el script correspondiente a esos datos estructurados en la sección HEAD de la página.

Por ejemplo, para el caso de la bombilla LED que veíamos en la primera sección de este post, el script JSON-LD quedaría como sigue:

 <script type="application/ld+json">`

  {`

  "@context": "http://schema.org",`

 "@type": "Product",`

  "image": "https://minaled.com/wp-content/uploads/2016/06/Liqoo-10p-5W-Blanco-Frio-MR16-lmpara-GU53-GX53-LED-Bombilla-lmpara-ahorro-de-energa-AC-DC-12V-120--de-ngulo-de-visin-2835-SMD-6000K-5W-400Lumen-Sustituye-35W-0.jpg",

  "name": "10 bombillas LED de 5w Liqoo (12v, 420 lúmenes, luz fría)",

  "description": "10 bombillas de LED tipo SMD 2835, casquillo GU5.3 Energía: 5 w (equivalente a 35 w convencionales) Luz de color blanco frío Luminosidad: 420 lúmenes Diodos emisores de luz: 60 Alto ahorro energético del 80% Tiempo de vida: 30.000 horas Se encienden inmediatamente Para elegir con seguridad, consulta la Guía de bombillas LED. "

"aggregateRating": {

  "@type": "aggregateRating",

  "ratingValue": "4.3",

  "bestRating": "5",

  "reviewCount": "180"

},

"offers": {

  "@type": "Offer",

  "price": "27.99",

  "priceCurrency": "EUR",

  "availability": "http://schema.org/InStock"

}

}   </script> 

¿Cómo comprobar si los datos estructurados son correctos?

Aunque el concepto de Web Semántica utilizando datos estructurados con Schema no reviste demasiada dificultad, su implementación puede ser algo tediosa debido al gran número de tipos de datos e información que se debe revisar y marcar.

Además, Google añade algunas requisitos a la utilización de este marcado, por un lado, obligando a utilizar algunas propiedades específicas para los distintos tipos de datos y, por otro, recomendando la utilización de otras propiedades.

Como estas restricciones y recomendaciones no forman parte de la especificación de Schema, debemos consultar la documentación al respecto que ofrece Google en su sitio web para desarrolladores. Por ejemplo, en esta página se pueden encontrar las propiedades obligatorias y recomendadas para el tipo de datos "Product " de Schema.

Dada la importancia de un correcto marcado de los datos estructurados para asegurar una correcta operativa de la Web Semántica, Google ofrece una herramienta de verificación para comprobar la integridad y corrección de la información etiquetada en la página web de un producto:

Herramienta de verificación de datos estructurados de Google

En caso de que hubiera algún error (por ejemplo, falta una propiedad obligatoria o tiene un valor incorrecto) o advertencia (que no se haya utilizada una propiedad recomendada), esta herramienta lo identifica dentro del código HTML del cuadro izquierdo. De esta forma, el desarrollador tendrá localizada la fuente del error y podrá resolverlo rápidamente.

A través de esta herramienta también se puede obtener una vista de la información que el rastreador de Google ha capturado (excepto las imágenes) y que, eventualmente, puede aparecer en los resultados de búsqueda:

Datos estructurados rastreados por Google en una página de producto

Conclusión

La Web Semántica ha supuesto un punto de inflexión en la calidad de las búsquedas, donde los resultados ya no están basados exclusivamente en una coincidencia más o menos exacta con unas determinadas palabras clave dentro de la consulta del usuario.

Al identificar y dotar de significado cada parte de información del contenido textual de las páginas web, los buscadores pueden manejar ese conocimiento para encontrar los resultados que mejor se ajustan a la intención de búsqueda del usuario y, en consecuencia, mejorar su experiencia de navegación.

Sin embargo, no acaban aquí las ventajas de la Web Semántica. Los sitios web de Comercio Electrónico también pueden aprovechar sus posibilidades para identificar dentro de la página web la información relativa a un producto, de forma que los buscadores (y cualquier otro sistema automático) pueden comprender su significado como parte de ese producto y relacionarlo con las búsquedas de los usuarios, mejorando las opciones de visibilidad y posicionamiento de esa página web.

Además, al tener identificados todas las características de un producto bajo un formato estandarizado de datos estructurados, los buscadores pueden utilizar esa información para generar visualizaciones más atractivas y visibles en los resultados de búsqueda, con el consiguiente beneficio para la captación de posibles visitantes al sitio web.

Aunque existen varios estándares para el marcado de datos estructurados, es recomendable la utilización de Schema, gracias a la versatilidad de su estructura jerárquica de tipos de datos y a las alternativas de implementación que contempla, facilitando su implementación en función de las características del sitio web.