Crea sitios semánticos con componentes web y JSON-LD

Ewa Gasperowicz

Con la creciente popularidad de los componentes web y las bibliotecas compatibles como Polymer, los elementos personalizados se convierten en una forma atractiva de compilar funciones de IU. El encapsulamiento predeterminado de elementos personalizados los hace particularmente útiles para crear widgets independientes.

Aunque algunos de los widgets son independientes, muchos de ellos dependen de datos externos para presentar el contenido al usuario; p.ej., el pronóstico actual para un widget del clima o la dirección de una empresa para un widget de mapa.

En Polymer, los elementos personalizados son declarativos, lo que significa que una vez que se importan a un proyecto, es muy fácil incluirlos y configurarlos en HTML; p.ej., pasando los datos para propagar el widget a través de un atributo.

Sería muy útil si pudiéramos evitar la repetición y garantizar la coherencia de los datos reutilizando los mismos fragmentos de datos para propagar distintos widgets, además de informar a los motores de búsqueda y a otros consumidores sobre el contenido de nuestra página. Podemos lograrlo usando el estándar de schema.org y el formato JSON-LD para nuestros datos.

Propaga los componentes con datos estructurados

Por lo general, JSON es una forma conveniente de insertar datos en un widget en particular. Debido a la creciente compatibilidad con JSON-LD, podemos reutilizar las mismas estructuras de datos para informar a la IU, a los motores de búsqueda y a otros consumidores de datos estructurados sobre el significado exacto del contenido de la página.

Combinando componentes web con JSON-LD, creamos una arquitectura bien definida para una aplicación:

  • schema.org y JSON-LD representan la capa de datos, en la que schema.org proporciona el vocabulario de los datos, y JSON-LD representa el formato y el transporte de los datos.
  • los elementos personalizados representan la capa de presentación, configurable y separada de los datos.

Ejemplo

Consideremos el siguiente ejemplo: una página que enumera algunas ubicaciones de Google Office: https://github.com/googlearchive/structured-data-web-components/tree/master/demo

Contiene dos widgets: un mapa con un pin para cada oficina y un menú desplegable con la lista de ubicaciones. Es importante que ambos widgets presenten los mismos datos al usuario y que la página sea legible para los motores de búsqueda.

Componentes web y página de demostración de JSON-LD

En esta demostración, usaremos entidades LocalBusiness para expresar el significado de nuestros datos, que es la ubicación geográfica de algunas de las oficinas de Google.

La mejor manera de comprobar cómo Google lee e indexa esta página es a través de la nueva Herramienta de prueba de datos estructurados y mejorada. Envía la URL de la demostración en la sección Recuperar URL y haz clic en Recuperar y validar. En la sección de la derecha, se mostrarán los datos analizados recuperados de la página junto con los errores que puedan ocurrir. Es una forma muy conveniente de verificar si el lenguaje de marcado JSON-LD es correcto y si Google lo puede procesar.

IU de la herramienta de prueba de datos estructurados

Puedes obtener más información sobre la herramienta y las mejoras que introdujo en la entrada de blog de la Central para webmasters.

Vincula componentes a una fuente de datos estructurados

El código de la demostración y de los componentes web que se usaron para compilarla se encuentra en GitHub. Observemos el código fuente de la página combined-demo.html.

Como primer paso, incorporamos los datos en la página usando una secuencia de comandos JSON-LD:

<script type="application/ld+json">
{...}
</script>

De esta manera, nos aseguramos de que otros consumidores puedan acceder fácilmente a los datos mediante el estándar schema.org y el formato JSON-LD, p.ej., los motores de búsqueda.

Como segundo paso, usamos dos componentes web para mostrar los datos:

  • address-dropdown-jsonld: Este elemento crea un menú desplegable con todas las ubicaciones que se pasan en un atributo “jsonld”.
  • google-map-jsonld: Este elemento crea un mapa de Google Maps con un pin para cada ubicación que se pasa en un atributo "jsonld".

Para ello, los importamos a nuestra página mediante importaciones de HTML.

<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">

Una vez importados, podemos utilizarlos en nuestra página:

<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>

Por último, enlazamos los datos de JSON-LD y los elementos. Lo hacemos en una devolución de llamada lista para el polímero (es un evento que se activa cuando los componentes están listos para usarse). Como los elementos se pueden configurar mediante atributos, basta con asignar nuestros datos de JSON-LD al atributo apropiado del componente:

document.addEventListener('polymer-ready', function() {
    var jsonld = JSON.parse(
        document.querySelector(
            'script[type="application/ld+json"]').innerText);
    document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
    document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
    });

JSON-LD, el poderoso hermano de JSON

Como probablemente hayas notado, esto funciona de manera muy similar al uso de un JSON sin formato y antiguo para pasar datos. Sin embargo, JSON-LD tiene algunas ventajas que derivan directamente de su compatibilidad con schema.org:

  • Los datos se estructuran sin ambigüedades con el estándar de schema.org. Es una ventaja no trivial, porque garantiza que puedas proporcionar una entrada significativa y coherente a cualquier componente web habilitado para JSON-LD.
  • Los motores de búsqueda pueden consumir los datos de manera eficiente, lo que mejora la indexación de la página y puede generar que se muestren fragmentos enriquecidos en los resultados de la búsqueda.
  • Si escribes componentes web de esta manera, no es necesario aprender ni diseñar una nueva estructura (y documentación) para los datos que esperan los componentes: schema.org ya se encarga del trabajo pesado y de generar consenso por ti. También facilita la compilación de todo un ecosistema de componentes compatibles.

En resumen, JSON-LD y schema.org, combinados con la tecnología de componentes web, permiten compilar piezas de IU reutilizables y encapsuladas que son compatibles con los desarrolladores y los motores de búsqueda.

Cómo crear tus propios componentes

Puedes probar los ejemplos en GitHub o leer la guía de Polymer sobre cómo crear componentes reutilizables para empezar a escribir los tuyos. Consulta la documentación sobre datos estructurados en developers.google.com para obtener inspiración sobre diversas entidades que puedes marcar con JSON-LD.

Puedes mencionarnos a @polymer para mostrar los elementos personalizados que creaste.