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.
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.
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.