Como criar sites semânticos com Web Components e JSON-LD

Ewa Gasperowicz

Com o aumento da popularidade dos componentes da Web e bibliotecas de suporte como a Polymer, os elementos personalizados se tornaram uma maneira atraente de criar recursos de interface. O encapsulamento padrão de elementos personalizados os torna especialmente úteis para a criação de widgets independentes.

Embora alguns widgets sejam independentes, muitos dependem de dados externos para apresentar o conteúdo ao usuário. Por exemplo, a previsão atual de um widget de clima ou o endereço de uma empresa para um widget de mapa.

No Polymer, os elementos personalizados são declarativos, o que significa que, depois de importados para um projeto, é muito fácil incluí-los e configurá-los em HTML, por exemplo, passando os dados para preencher o widget por meio de um atributo.

Seria ótimo se pudéssemos evitar a repetição e garantir a consistência dos dados, reutilizando os mesmos snippets de dados para preencher widgets diferentes, bem como informar mecanismos de pesquisa e outros consumidores sobre o conteúdo da nossa página. Isso pode ser feito usando os padrões schema.org e o formato JSON-LD dos dados.

Preencher os componentes com dados estruturados

Normalmente, o JSON é uma maneira conveniente de injetar dados em um widget específico. Com o crescente suporte para JSON-LD, podemos reutilizar as mesmas estruturas de dados para informar a interface, os mecanismos de pesquisa e outros consumidores de dados estruturados sobre o significado exato do conteúdo da página.

Combinando componentes da Web com JSON-LD, criamos uma arquitetura bem definida para um aplicativo:

  • O schema.org e o JSON-LD representam a camada de dados. O schema.org fornece o vocabulário dos dados, e o JSON-LD constitui o formato e o transporte dos dados.
  • os elementos personalizados representam a camada de apresentação, configuráveis e separados dos próprios dados.

Exemplo

Vejamos o exemplo a seguir, uma página que lista alguns locais do Google Office: https://github.com/googlearchive/structured-data-web-components/tree/master/demo

Ele contém dois widgets: um mapa com um alfinete para cada escritório e um menu suspenso com a lista de locais. É importante que os dois widgets apresentem os mesmos dados ao usuário e que a página esteja legível para os mecanismos de pesquisa.

Página de demonstração de componentes da Web e JSON-LD

Nesta demonstração, estamos usando entidades LocalBusiness para expressar o significado dos nossos dados, que é a localização geográfica de alguns dos escritórios do Google.

A melhor maneira de verificar como o Google está lendo e indexando essa página é com a nova e aprimorada Ferramenta de teste de dados estruturados. Envie o URL da demonstração na seção Buscar URL e clique em Buscar e validar. A seção à direita mostra os dados analisados na página com todos os erros que podem ocorrer. É uma forma muito prática de verificar se a marcação JSON-LD está correta e pode ser processada pelo Google.

Interface da ferramenta de teste de dados estruturados.

Saiba mais sobre a ferramenta e as melhorias que ela introduziu na postagem do blog da Central do webmaster.

Vincular componentes a uma fonte de dados estruturados

O código para a demonstração e os componentes da Web usados para criá-la está no GitHub (link em inglês). Vejamos o código-fonte da página do combined-demo.html.

Como primeira etapa, incorporamos os dados na página usando um script JSON-LD:

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

Dessa forma, garantimos que os dados sejam facilmente acessíveis a outros consumidores que suportam os padrões schema.org e o formato JSON-LD, por exemplo, mecanismos de pesquisa.

Como segunda etapa, usamos dois componentes da Web para exibir os dados:

  • address-dropdown-jsonld: esse elemento cria um menu suspenso com todos os locais transmitidos em um atributo "jsonld".
  • google-map-jsonld: este elemento cria um mapa do Google com um alfinete para cada local transmitido em um atributo "jsonld".

Para isso, fazemos a importação delas para nossa página usando importações 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">

Depois de importados, eles podem ser usados na nossa página:

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

Por fim, vinculamos os dados JSON-LD e os elementos. Fazemos isso em um callback pronto para polímeros, que é um evento acionado quando os componentes estão prontos para uso. Como os elementos podem ser configurados por meio de atributos, basta atribuir nossos dados JSON-LD ao atributo apropriado do 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, o poderoso irmão do JSON

Como você já deve ter notado, isso funciona de forma muito parecida com o uso de JSON simples e antigo para transmitir dados. No entanto, o JSON-LD tem algumas vantagens que são derivadas diretamente da compatibilidade com o schema.org:

  • Os dados são estruturados de maneira inequívoca usando o padrão schema.org. É uma vantagem não trivial, porque garante que você possa fornecer uma entrada significativa e consistente para qualquer componente da Web habilitado para JSON-LD.
  • Os dados podem ser consumidos de forma eficiente pelos mecanismos de pesquisa, o que melhora a indexação da página e pode resultar na exibição de rich snippets nos resultados da pesquisa.
  • Se você estiver escrevendo componentes da Web dessa maneira, não será necessário aprender ou elaborar uma nova estrutura (e documentação) para os dados que os componentes esperam. O schema.org já faz todo o trabalho pesado e a construção de consenso para você. Também facilita a criação de um ecossistema de componentes compatíveis.

Resumindo, JSON-LD e o schema.org combinados com a tecnologia de componentes da Web permitem criar partes de interface encapsuladas e reutilizáveis que são compatíveis com o desenvolvedor e com o mecanismo de pesquisa.

Criar seus próprios componentes

Confira os exemplos no GitHub ou leia o guia do Polymer sobre como criar componentes reutilizáveis para começar a criar seus próprios componentes. Confira a documentação sobre dados estruturados em developers.google.com para se inspirar nas várias entidades que você pode marcar com JSON-LD.

Envie uma mensagem para @polymer para mostrar os elementos personalizados que você criou.