Data la crescente popolarità dei componenti web e delle librerie di supporto come Polymer, gli elementi personalizzati diventano un modo allettante per creare funzionalità UI. L'incapsulamento predefinito degli elementi personalizzati li rende particolarmente utili per la creazione di widget indipendenti.
Sebbene alcuni widget siano autosufficienti, molti si basano su dati esterni per presentare i contenuti all'utente, ad esempio le previsioni attuali 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 compilare il widget tramite un attributo.
Sarebbe fantastico se potessimo evitare ripetizioni e garantire la coerenza dei dati riutilizzando gli stessi snippet di dati per compilare diversi widget, nonché informare i motori di ricerca e altri consumatori sui contenuti della nostra pagina. Possiamo ottenere questo risultato utilizzando 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 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 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, con schema.org che 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, configurabile e separato dai dati stessi.
Esempio
Consideriamo un esempio di seguito, una pagina che elenca un paio di sedi di uffici Google: 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 delle posizioni. È 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 le 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 è utilizzare il nuovo e migliorato Strumento di test per i dati strutturati. Invia l'URL della demo nella sezione Recupera URL e fai clic su Recupera e convalida. Nella sezione a destra sono indicati 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, consulta il post del blog del Centro webmaster.
Collegamento dei componenti a un'origine dati strutturata
Il codice della demo e dei componenti web utilizzati per realizzarla è disponibile su GitHub. Esamineremo il 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 di Google con un segnaposto per ogni posizione passata in un attributo "jsonld".
A questo scopo, li importi 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 e gli elementi. Lo facciamo in un callback pronto per Polymer (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 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 probabilmente avrai notato, il funzionamento è molto simile all'utilizzo del normale JSON per trasmettere i dati. Tuttavia, JSON-LD presenta alcuni vantaggi, che derivano direttamente dalla compatibilità di schema.org:
- I dati sono strutturati in modo non ambiguo utilizzando lo standard schema.org. Si tratta di un vantaggio non trascurabile, perché ti consente di fornire un input significativo e coerente a qualsiasi componente web abilitato per JSON-LD.
- I dati possono essere utilizzati in modo efficiente dai motori di ricerca, il che migliora l'indicizzazione della pagina e può comportare la visualizzazione di snippet avanzati nei risultati di ricerca.
- Se scrivi componenti web in questo modo, non è necessario imparare o ideare una nuova struttura (e documentazione) per i dati previsti dai componenti: schema.org fa già tutto il lavoro più difficile e di creazione del consenso per te. Inoltre, semplifica la creazione di un intero ecosistema di componenti compatibili.
In sintesi, JSON-LD e schema.org, combinati con la tecnologia dei componenti web, consentono di creare componenti dell'interfaccia utente incapsulati e riutilizzabili, adatti a sviluppatori e motori di ricerca.
Creare componenti personalizzati
Per iniziare a scrivere i tuoi componenti, puoi provare gli esempi su GitHub o leggere la guida di Polymer sulla creazione di componenti riutilizzabili. Consulta la documentazione sui dati strutturati su developers.google.com per trovare ispirazione sulle varie entità che puoi eseguire il markup con JSON-LD.
Contattaci su @polymer per mostrarci gli elementi personalizzati che hai creato.