Avec la popularité croissante des composants Web et des bibliothèques associées telles que Polymer, les éléments personnalisés deviennent un moyen attrayant de créer des fonctionnalités d'interface utilisateur. L'encapsulation par défaut des éléments personnalisés les rend particulièrement utiles pour créer des widgets indépendants.
Certains widgets sont autonomes, mais beaucoup d'entre eux s'appuient sur des données externes pour présenter le contenu à l'utilisateur (par exemple, les prévisions météo actuelles pour un widget météo ou l'adresse d'une entreprise pour un widget de carte).
Dans Polymer, les éléments personnalisés sont déclaratifs. Cela signifie qu'une fois importés dans un projet, ils sont très faciles à inclure et à configurer en HTML, par exemple en transmettant les données à insérer dans le widget via un attribut.
Nous aimerions éviter les répétitions et assurer la cohérence des données en réutilisant les mêmes extraits de données pour renseigner différents widgets, et informer les moteurs de recherche et les autres utilisateurs du contenu de notre page. Pour ce faire, nous utilisons la norme schema.org et le format JSON-LD pour nos données.
Remplir les composants avec des données structurées
En règle générale, le format JSON est un moyen pratique d'injecter des données dans un widget particulier. Avec l'acceptation croissante de JSON-LD, nous pouvons réutiliser les mêmes structures de données pour informer l'UI, ainsi que les moteurs de recherche et les autres consommateurs de données structurées sur la signification exacte du contenu de la page.
En combinant des composants Web avec JSON-LD, nous créons une architecture bien définie pour une application:
- schema.org et JSON-LD représentent la couche de données, schema.org fournissant le vocabulaire des données et JSON-LD constituant le format et le transport des données.
- Les éléments personnalisés représentent la couche de présentation, configurable et séparée des données elles-mêmes.
Exemple
Prenons l'exemple suivant : une page qui liste quelques bureaux Google Office : https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Elle contient deux widgets: une carte avec un repère pour chaque bureau et une liste déroulante avec la liste des lieux. Il est important que les deux widgets présentent les mêmes données à l'utilisateur et que la page soit lisible par les moteurs de recherche.
Dans cette démonstration, nous utilisons des entités LocalBusiness pour exprimer la signification de nos données, à savoir l'emplacement géographique de certains bureaux Google.
Le meilleur moyen de vérifier comment Google lit et indexe cette page est d'utiliser la nouvelle version améliorée de l'outil de test des données structurées. Saisissez l'URL de la démonstration dans la section Explorer l'URL, puis cliquez sur Explorer et valider. La section de droite affiche les données analysées récupérées sur la page, ainsi que les erreurs pouvant se produire. C'est un moyen très pratique de vérifier si votre balisage JSON-LD est correct et peut être traité par Google.
Pour en savoir plus sur cet outil et les améliorations qu'il apporte, consultez l'article de blog sur Webmaster Central.
Lier des composants à une source de données structurée
Le code de la démonstration et des composants Web utilisés pour la créer est disponible sur GitHub. Examinons le code source de la page combined-demo.html.
Pour commencer, nous intégrons les données dans la page à l'aide d'un script JSON-LD:
<script type="application/ld+json">
{...}
</script>
Nous nous assurons ainsi que les données sont facilement accessibles aux autres consommateurs compatibles avec la norme schema.org et le format JSON-LD, par exemple les moteurs de recherche.
Dans un deuxième temps, nous utilisons deux composants Web pour afficher les données:
- address-dropdown-jsonld : cet élément crée une liste déroulante avec tous les lieux transmis dans un attribut "jsonld".
- google-map-jsonld : cet élément crée une carte Google avec une épingle pour chaque emplacement transmis dans un attribut "jsonld".
Pour ce faire, nous les importons sur notre page à l'aide d'importations 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">
Une fois importés, nous pouvons les utiliser sur notre page:
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
Enfin, nous associons les données JSON-LD et les éléments. Nous le faisons dans un rappel prêt à l'emploi pour Polymer (il s'agit d'un événement qui se déclenche lorsque les composants sont prêts à l'emploi). Étant donné que les éléments peuvent être configurés via des attributs, il suffit d'attribuer nos données JSON-LD à l'attribut approprié du composant:
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, le puissant frère de JSON
Comme vous l'avez probablement remarqué, cela fonctionne de manière très similaire à l'utilisation du bon vieux JSON pour transmettre des données. JSON-LD présente toutefois quelques avantages directement dérivés de sa compatibilité avec schema.org:
- Les données sont structurées de manière claire à l'aide de la norme schema.org. Il s'agit d'un avantage non négligeable, car il vous permet de fournir une entrée pertinente et cohérente à n'importe quel composant Web compatible avec JSON-LD.
- Les données peuvent être utilisées efficacement par les moteurs de recherche, ce qui améliore l'indexation de la page et peut entraîner l'affichage d'extraits enrichis dans les résultats de recherche.
- Si vous écrivez des composants Web de cette manière, vous n'avez pas besoin d'apprendre ni de concevoir une nouvelle structure (et de documentation) pour les données attendues par les composants. schema.org s'occupe déjà de tout le travail de fond et de la création de consensus. Il est également plus facile de créer tout un écosystème de composants compatibles.
En résumé, JSON-LD et schema.org, combinés à la technologie des composants Web, permettent de créer des éléments d'interface utilisateur encapsulés et réutilisables, qui sont adaptés aux développeurs et aux moteurs de recherche.
Créer vos propres composants
Vous pouvez essayer les exemples sur GitHub ou lire le guide de Polymer sur la création de composants réutilisables pour commencer à écrire les vôtres. Consultez la documentation sur les données structurées sur developers.google.com pour vous inspirer des différentes entités que vous pouvez balisez avec JSON-LD.
N'hésitez pas à nous contacter sur @polymer pour nous montrer les éléments personnalisés que vous avez créés.