Met de stijgende populariteit van webcomponenten en ondersteunende bibliotheken zoals Polymer worden aangepaste elementen een aantrekkelijke manier om UI-functies te bouwen. De standaardinkapseling van aangepaste elementen maakt ze vooral handig voor het maken van onafhankelijke widgets.
Hoewel sommige widgets op zichzelf staan, zijn veel ervan afhankelijk van externe gegevens om de inhoud aan de gebruiker te presenteren - bijvoorbeeld de huidige voorspelling voor een weerwidget of het adres van een bedrijf voor een kaartwidget.
In Polymer zijn aangepaste elementen declaratief, wat betekent dat als ze eenmaal in een project zijn geïmporteerd, het heel eenvoudig is om ze in HTML op te nemen en te configureren, bijvoorbeeld door de gegevens door te geven om de widget via een attribuut te vullen.
Het zou geweldig zijn als we herhaling zouden kunnen vermijden en de consistentie van de gegevens zouden kunnen garanderen, door dezelfde gegevensfragmenten te hergebruiken om verschillende widgets in te vullen en om zoekmachines en andere consumenten te informeren over de inhoud van onze pagina. We kunnen dit bereiken door de schema.org- standaard en het JSON-LD- formaat voor onze gegevens te gebruiken.
Het vullen van de componenten met gestructureerde gegevens
Doorgaans is JSON een handige manier om gegevens in een bepaalde widget te injecteren. Met de toenemende steun voor JSON-LD kunnen we dezelfde datastructuren hergebruiken om zowel de gebruikersinterface als de zoekmachines en andere consumenten van gestructureerde gegevens te informeren over de exacte betekenis van de inhoud van de pagina.
Door webcomponenten te combineren met JSON-LD creëren we een goed gedefinieerde architectuur voor een applicatie:
- schema.org en JSON-LD vertegenwoordigen de gegevenslaag, waarbij schema.org de woordenschat voor de gegevens levert en JSON-LD het formaat en transport voor de gegevens vormt;
- aangepaste elementen vertegenwoordigen de presentatielaag, configureerbaar en gescheiden van de gegevens zelf.
Voorbeeld
Laten we eens kijken naar het volgende voorbeeld: een pagina met een aantal Google Office-locaties: https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Het bevat twee widgets: een kaart met een pincode voor elk kantoor en een vervolgkeuzelijst met de lijst met locaties. Het is belangrijk dat beide widgets dezelfde gegevens aan de gebruiker presenteren en dat de pagina leesbaar is voor zoekmachines.
In deze demo gebruiken we LocalBusiness -entiteiten om de betekenis van onze gegevens uit te drukken, namelijk de geografische locatie van enkele Google-kantoren.
De beste manier om te controleren hoe Google deze pagina leest en indexeert, is via de nieuwe, verbeterde Structured Data Testing Tool . Dien de URL van de demo in in de sectie URL ophalen en klik op Ophalen en valideren . In het gedeelte aan de rechterkant ziet u de geparseerde gegevens die van de pagina zijn opgehaald, samen met eventuele fouten. Het is een erg handige manier om te controleren of uw JSON-LD-opmaak correct is en door Google kan worden verwerkt.
U kunt meer lezen over de tool en de verbeteringen die deze heeft geïntroduceerd in de Webmaster Central -blogpost .
Componenten koppelen aan een gestructureerde gegevensbron
De code voor de demo en voor de webcomponenten die zijn gebruikt om deze te bouwen, staat op GitHub . Laten we eens kijken naar de broncode van de combined-demo.html -pagina.
Als eerste stap sluiten we de gegevens in de pagina in met behulp van een JSON-LD-script:
<script type="application/ld+json">
{...}
</script>
Op deze manier zorgen we ervoor dat de gegevens gemakkelijk toegankelijk zijn voor andere consumenten die de schema.org-standaard en het JSON-LD-formaat ondersteunen, bijvoorbeeld zoekmachines.
Als tweede stap gebruiken we twee webcomponenten om de gegevens weer te geven:
- adres-dropdown-jsonld - Dit element creëert een vervolgkeuzelijst met alle locaties die worden doorgegeven in een “jsonld” -attribuut.
- google-map-jsonld - Dit element maakt een Google-kaart met een pincode voor elke locatie die wordt doorgegeven in een 'jsonld'-attribuut.
Om dit te doen, importeren we ze naar onze pagina met behulp van HTML-imports .
<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">
Zodra ze zijn geïmporteerd, kunnen we ze op onze pagina gebruiken:
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
Ten slotte koppelen we de JSON-LD-gegevens en de elementen aan elkaar. We doen dit in een polymeer-ready callback (het is een gebeurtenis die wordt geactiveerd wanneer de componenten klaar zijn voor gebruik). Omdat de elementen via attributen kunnen worden geconfigureerd, volstaat het om onze JSON-LD-gegevens aan het juiste attribuut van de component toe te wijzen:
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, het krachtige broertje van JSON
Zoals je waarschijnlijk hebt gemerkt, werkt dit vrijwel hetzelfde als het gebruik van gewone, oude JSON om gegevens door te geven. JSON-LD heeft echter een paar voordelen, die rechtstreeks voortvloeien uit de compatibiliteit met schema.org :
- De gegevens zijn op een eenduidige manier gestructureerd volgens de schema.org-standaard. Het is een niet-triviaal voordeel, omdat het ervoor zorgt dat u een zinvolle en consistente invoer kunt leveren aan elk JSON-LD-compatibel webonderdeel.
- De gegevens kunnen efficiënt worden gebruikt door zoekmachines, wat de indexering van de pagina verbetert en kan resulteren in rich snippets die in de zoekresultaten worden weergegeven.
- Als u op deze manier webcomponenten schrijft, hoeft u geen nieuwe structuur (en documentatie) te leren of te bedenken voor de gegevens die de componenten verwachten; schema.org doet al het zware werk en het opbouwen van consensus voor u. Het maakt het ook gemakkelijker om een heel ecosysteem van compatibele componenten op te bouwen.
Samenvattend kunnen JSON-LD en schema.org, gecombineerd met de webcomponententechnologie, herbruikbare, ingekapselde delen van de gebruikersinterface bouwen die ontwikkelaars- en zoekmachinevriendelijk zijn.
Creëer uw eigen componenten
Je kunt de voorbeelden op GitHub uitproberen of de handleiding van Polymer over het maken van herbruikbare componenten lezen om te beginnen met het schrijven van je eigen componenten. Bekijk de documentatie over gestructureerde gegevens op developers.google.com om inspiratie op te doen over de verschillende entiteiten die u kunt markeren met JSON-LD.
Overweeg om ons een berichtje te sturen naar @polymer om te laten zien welke aangepaste elementen je hebt gebouwd!