Com a crescente popularidade dos componentes da Web e o suporte a bibliotecas como o Polymer, os elementos personalizados se tornaram uma maneira interessante de criar recursos de interface. O encapsulamento padrão de elementos personalizados os torna especialmente úteis para criar widgets independentes.
Embora alguns widgets sejam independentes, muitos deles dependem de dados externos para apresentar o conteúdo ao usuário, como a previsão atual de um widget de clima ou o endereço de uma empresa em 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 no HTML, por exemplo, transmitindo 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, além de informar os mecanismos de pesquisa e outros consumidores sobre o conteúdo da nossa página. Para isso, use o padrão 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 aumento do suporte ao JSON-LD, podemos reutilizar as mesmas estruturas de dados para informar a interface, bem como 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, com o schema.org fornecendo o vocabulário para os dados, e o JSON-LD constituindo o formato e o transporte;
- elementos personalizados representam a camada de apresentação, que é configurável e separada dos dados.
Exemplo
Considere 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 ambos os widgets apresentem os mesmos dados para o usuário e que a página esteja legível para os mecanismos de pesquisa.
Nesta demonstração, usamos entidades LocalBusiness para expressar o significado dos nossos dados, que são 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 é usando a nova 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 extraídos da página e os erros que podem ocorrer. Essa é uma forma muito conveniente de verificar se a marcação JSON-LD está correta e pode ser processada pelo Google.
Leia mais sobre a ferramenta e as melhorias que ela trouxe na postagem do blog da Central do Webmaster.
Como vincular componentes a uma fonte de dados estruturados
O código da demonstração e dos componentes da Web usados para criá-lo está no GitHub. Vamos conferir o código-fonte da página 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 o padrão schema.org e o formato JSON-LD, por exemplo, mecanismos de pesquisa.
Na segunda etapa, usamos dois componentes da Web para mostrar os dados:
- address-dropdown-jsonld: cria um menu suspenso com todos os locais transmitidos em um atributo "jsonld".
- google-map-jsonld: esse elemento cria um mapa do Google com um marcador para cada local transmitido em um atributo "jsonld".
Para isso, importamos os arquivos para nossa página usando importações 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">
Depois de importados, podemos usá-los em nossa página:
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
Por fim, juntamos os dados JSON-LD e os elementos. Isso é feito 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 irmão poderoso do JSON
Como você provavelmente notou, isso funciona de maneira muito semelhante ao 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 forma inequívoca usando o padrão schema.org. Essa é uma vantagem importante 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 maneira eficiente pelos mecanismos de pesquisa, o que melhora a indexação da página e pode resultar na exibição de snippets enriquecidos nos resultados da pesquisa.
- Se você estiver escrevendo componentes da Web dessa maneira, não será necessário aprender ou criar uma nova estrutura (e documentação) para os dados esperados pelos componentes. O schema.org já está fazendo todo o trabalho pesado e criando consenso para você. Isso também facilita a criação de um ecossistema completo de componentes compatíveis.
Em resumo, JSON-LD e schema.org combinados com a tecnologia de componentes da Web permitem criar elementos de interface encapsulados e reutilizáveis que são compatíveis com desenvolvedores e mecanismos de pesquisa.
Criar seus próprios componentes
Você pode testar os exemplos no GitHub ou ler o guia da Polymer sobre como criar componentes reutilizáveis para começar a criar seus próprios componentes. Consulte a documentação de dados estruturados em developers.google.com para se inspirar sobre várias entidades que você pode marcar com JSON-LD.
Envie um e-mail para @polymer e mostre os elementos personalizados que você criou.