Avec la popularité grandissante des composants Web et des bibliothèques compatibles comme 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.
Bien que certains widgets soient autonomes, bon nombre d'entre eux s'appuient sur des données externes pour présenter le contenu à l'utilisateur (comme les prévisions actuelles d'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, ce qui signifie qu'une fois importés dans un projet, il est très facile de les inclure et de les configurer en HTML, par exemple en transmettant les données pour remplir le widget via un attribut.
Ce serait formidable si nous pouvions éviter les répétitions et assurer la cohérence des données, en réutilisant les mêmes extraits de données pour insérer différents widgets et pour informer les moteurs de recherche et les autres consommateurs du contenu de notre page. Pour ce faire, nous utilisons la norme schema.org et le format JSON-LD pour nos données.
Insérer des données structurées dans les composants
En règle générale, JSON constitue un moyen pratique d'injecter des données dans un widget particulier. Avec la prise en charge croissante du format JSON-LD, nous pouvons réutiliser les mêmes structures de données pour indiquer à l'interface utilisateur, aux moteurs de recherche et aux autres utilisateurs de données structurées la signification exacte du contenu de la page.
En combinant des composants Web au format 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 fournit le vocabulaire des données, tandis que JSON-LD constitue le format et le transport des données.
- les éléments personnalisés représentent la couche de présentation, configurables et séparés des données elles-mêmes.
Exemple
Prenons l'exemple suivant, une page répertoriant quelques adresses 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 pour les moteurs de recherche.
Dans cette démonstration, nous utilisons des entités LocalBusiness pour exprimer la signification de nos données, c'est-à-dire l'emplacement géographique de certains bureaux Google.
Le meilleur moyen de vérifier comment Google lit et indexe cette page est d'utiliser le nouvel outil de test des données structurées amélioré. Envoyez l'URL de la démonstration dans la section Explorer l'URL, puis cliquez sur Explorer et valider. La section sur la droite affiche les données analysées extraites de la page, ainsi que les erreurs qui peuvent 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 sur les améliorations qu'il a apportées, lisez cet article de blog du Centre pour les webmasters.
Associer des composants à une source de données structurées
Le code de la démonstration et des composants Web utilisés pour la compiler est disponible sur GitHub. Examinons le code source de la page combined-demo.html.
Dans un premier temps, nous incorporons les données dans la page à l'aide d'un script JSON-LD:
<script type="application/ld+json">
{...}
</script>
Les autres consommateurs compatibles avec la norme schema.org et le format JSON-LD, comme les moteurs de recherche, peuvent ainsi accéder facilement aux données.
Dans un second temps, nous utilisons deux composants Web pour afficher les données:
- address-dropdown-jsonld : cet élément crée un menu déroulant contenant tous les établissements transmis dans un attribut "jsonld".
- google-map-jsonld : cet élément crée une carte Google avec un repère pour chaque établissement 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 (il s'agit d'un événement qui se déclenche lorsque les composants sont prêts à être utilisés). É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 frère puissant du JSON
Comme vous l'avez probablement remarqué, le fonctionnement est très semblable à celui d'un ancien JSON brut pour transmettre des données. Le format JSON-LD présente certains avantages, qui découlent directement 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 garantit que vous pouvez fournir une entrée pertinente et cohérente à n'importe quel composant Web compatible avec JSON-LD.
- Ces 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, il n'est pas nécessaire d'apprendre ou de concevoir une nouvelle structure (et de la documentation) pour les données attendues par les composants. schema.org se charge déjà de trouver un consensus. Cela facilite également la création d'un écosystème complet de composants compatibles.
Pour résumer, la combinaison de JSON-LD et de schema.org à la technologie des composants Web permet de créer des éléments d'interface utilisateur encapsulés et réutilisables, 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 le site developers.google.com. Vous y découvrirez différentes entités que vous pouvez baliser au format JSON-LD.
N'hésitez pas à nous mentionner @polymer pour présenter les éléments personnalisés que vous avez créés.