Con la crescente popolarità dei componenti web e delle librerie di supporto come Polymer, gli elementi personalizzati diventano un modo interessante per creare funzionalità dell'interfaccia utente. L'incapsulamento predefinito degli elementi personalizzati li rende particolarmente utili per la creazione di widget indipendenti.
Sebbene alcuni widget siano autonomi, molti si basano su dati esterni per presentare i contenuti all'utente, ad esempio le previsioni correnti per un widget meteo o l'indirizzo di un'azienda per un widget mappa.
In Polymer, gli elementi personalizzati sono dichiarativi, il che significa che una volta importati in un progetto, è molto facile includerli e configurarli in HTML, ad esempio passando i dati per completare il widget tramite un attributo.
Sarebbe fantastico se potessi evitare le ripetizioni e garantire la coerenza dei dati, riutilizzando gli stessi snippet di dati per completare widget diversi e per informare i motori di ricerca e gli altri consumatori sui contenuti della nostra pagina. Possiamo raggiungere questo obiettivo usando lo standard schema.org e il formato JSON-LD per i nostri dati.
Compilare i componenti con dati strutturati
In genere, JSON è un modo conveniente per inserire i dati in un widget specifico. Con il crescente supporto di JSON-LD, possiamo riutilizzare le stesse strutture di dati per informare l'interfaccia utente, i motori di ricerca e gli altri consumatori di dati strutturati sul significato esatto dei contenuti della pagina.
Combinando i componenti web con JSON-LD, creiamo un'architettura ben definita per un'applicazione:
- schema.org e JSON-LD rappresentano il livello dati, dove schema.org fornisce il vocabolario per i dati e JSON-LD che costituisce il formato e il trasporto dei dati.
- gli elementi personalizzati rappresentano il livello di presentazione, configurabili e separati dai dati stessi.
Esempio
Prendiamo in considerazione un esempio di seguito: una pagina che elenca un paio di sedi di Google Office: https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Contiene due widget: una mappa con un segnaposto per ogni ufficio e un menu a discesa con l'elenco dei luoghi. È importante che entrambi i widget presentino gli stessi dati all'utente e che la pagina sia leggibile dai motori di ricerca.
In questa demo utilizziamo entità LocalBusiness per esprimere il significato dei nostri dati, ovvero la posizione geografica di alcuni uffici Google.
Il modo migliore per verificare in che modo Google legge e indicizza questa pagina è tramite il nuovo Strumento di test per i dati strutturati migliorato. Invia l'URL della demo nella sezione URL di recupero e fai clic su Recupera e convalida. La sezione a destra mostra i dati analizzati recuperati dalla pagina, insieme agli eventuali errori che potrebbero verificarsi. È un modo molto comodo per verificare se il markup JSON-LD è corretto ed elaborabile da Google.
Per ulteriori informazioni sullo strumento e sui miglioramenti che ha introdotto, leggi il post del blog del Centro webmaster.
Collegare i componenti a un'origine dati strutturati
Il codice della demo e dei componenti web utilizzati per crearla si trova su GitHub. Diamo un'occhiata al codice sorgente della pagina combined-demo.html.
Come primo passaggio, incorporiamo i dati nella pagina utilizzando uno script JSON-LD:
<script type="application/ld+json">
{...}
</script>
In questo modo ci assicuriamo che i dati siano facilmente accessibili ad altri consumatori che supportano lo standard schema.org e il formato JSON-LD, ad esempio i motori di ricerca.
Come secondo passaggio, utilizziamo due componenti web per visualizzare i dati:
- address-dropdown-jsonld: questo elemento crea un menu a discesa con tutte le località trasmesse in un attributo "jsonld".
- google-map-jsonld: questo elemento crea una mappa Google con un segnaposto per ogni posizione trasferita in un attributo "jsonld".
A questo scopo, li importiamo nella nostra pagina utilizzando le importazioni 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 volta importati, possiamo utilizzarli nella nostra pagina:
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
Infine, colleghiamo i dati JSON-LD agli elementi. A tale scopo, eseguiamo un callback pronto per i polimeri (si tratta di un evento che si attiva quando i componenti sono pronti per l'uso). Poiché gli elementi possono essere configurati tramite attributi, è sufficiente assegnare i nostri dati JSON-LD all'attributo appropriato 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, il potente fratello di JSON
Come avrai notato, funziona in modo molto simile all'utilizzo di un JSON vecchio e semplice per trasferire i dati. JSON-LD presenta però alcuni vantaggi, derivati direttamente dalla sua compatibilità con schema.org:
- I dati sono strutturati in modo non ambiguo utilizzando lo standard schema.org. Si tratta di un vantaggio non banale, perché garantisce di poter fornire un input significativo e coerente a qualsiasi componente web abilitato per JSON-LD.
- I dati possono essere consumati in modo efficiente dai motori di ricerca, migliorando l'indicizzazione della pagina e potrebbe comportare la visualizzazione di rich snippet nei risultati di ricerca.
- Se stai scrivendo componenti web in questo modo, non c'è bisogno di apprendere o ideare una nuova struttura (e documentazione) per i dati che i componenti si aspettano: schema.org si sta già occupando di tutto il lavoro pesante e di costruire il consenso al posto tuo. Inoltre, semplifica la creazione di un intero ecosistema di componenti compatibili.
Per riassumere, JSON-LD e schema.org, combinati con la tecnologia dei componenti web, consentono di creare parti di UI riutilizzabili e incapsulate, facili da usare per gli sviluppatori e i motori di ricerca.
Crea i tuoi componenti
Puoi provare gli esempi su GitHub o leggere la guida di Polymer sulla creazione di componenti riutilizzabili per iniziare a scriverne di personalizzati. Consulta la documentazione relativa ai dati strutturati su developers.google.com per trovare l'ispirazione sulle varie entità di cui puoi eseguire il markup con JSON-LD.
Potresti ringraziare @polymer per mostrare gli elementi personalizzati che hai creato.