Les moteurs de recherche sont incroyablement puissants. Ils peuvent interpréter le langage souvent peu clair que nous utilisons pour comprendre ce que nous recherchons, déterminer la meilleure ressource pour répondre à nos questions et nous la montrer en quelques fractions de seconde.
Google devient même très doué pour répondre aux questions dans la page des résultats de recherche, évitant ainsi de devoir cliquer sur quoi que ce soit. Il personnalise même les résultats de recherche. Et cela aide les utilisateurs à trouver plus rapidement les informations qu'ils recherchent.
Mais les moteurs de recherche ne peuvent pas le faire seuls - ils ont besoin de l'aide des propriétaires et des développeurs de sites. Et le balisage de schéma est un moyen par lequel vous pouvez aider sur votre propre site.
Le balisage de schéma est un moyen de mettre en évidence des éléments spécifiques de données structurées.
Qu'est-ce que les données structurées ? Il s'agit d'informations organisées et étiquetées afin qu'il puisse être mieux compris par les machines. En bref, le balisage de schéma est une information qui aide les moteurs de recherche à trouver des types d'informations spécifiques sur votre page Web. Il est plus facile de regarder un exemple.
Google a son propre exemple interactif de balisage de schéma qui détaille une recette de tarte aux pommes :
Ci-dessus, vous pouvez voir le JavaScript qui définit le temps de préparation, le temps total, le rendement de la recette et divers faits nutritionnels pour la recette.
Il convient de noter à ce stade qu'il existe deux manières principales de baliser les données structurées :avec JSON ou avec des balises HTML intégrées. Google recommande la méthode JSON, mais nous reviendrons sur les deux plus tard.
Voici comment Google extrait les informations nutritionnelles spécifiques :
Schema.org propose des milliers de types de balisage différents que vous pouvez utiliser pour mieux montrer aux moteurs de recherche les informations sur votre page. Le type TechArticle, par exemple, comprend, entre autres, les attributs suivants :
niveau de compétence wordCount audience créateur dateCreated dateModifié datePublished principes de publication typiqueAgeRange Il existe un schéma complet pour les bibliothèques, les entreprises d'hébergement, les appartements, les événements d'arts visuels, les canaux de diffusion, les méthodes de livraison, les statuts des serveurs de jeux, etc.
L'idée est de s'assurer que les moteurs de recherche savent ce que chaque élément d'information sur votre page représente réellement, afin qu'ils puissent montrer ces éléments d'information aux personnes qui les recherchent.
D'ACCORD. Le balisage de schéma indique aux moteurs de recherche ce qui se trouve sur votre page :quel est le problème ?
Google le présente comme suit :
"Lorsque les informations sont hautement structurées et prévisibles, les moteurs de recherche peuvent plus facilement les organiser et les afficher de manière créative."
Par exemple, vous pouvez voir les dates de la prochaine tournée de Slayer affichées directement dans les résultats de recherche :
Ou obtenez des informations spécifiques sur un film lorsque vous le recherchez :
Google s'améliore constamment pour trouver ces informations par lui-même, mais l'utilisation correcte du balisage de schéma facilite le processus et augmente la probabilité que les informations de votre page soient présentées.
Et lorsque les moteurs de recherche savent exactement ce qui se trouve sur votre page, ils peuvent le montrer aux personnes qui le recherchent directement dans les résultats de recherche. Et c'est bon pour tout le monde.
Maintenant que vous avez vu les avantages de l'utilisation du balisage Schema.org, il est temps de commencer à plonger. Nous allons commencer avec l'outil le plus simple qui soit :le surligneur de données de Google.
Vous aurez besoin que votre site soit connecté à la console de recherche de Google (anciennement connue sous le nom d'outils pour les webmasters). Si vous avez besoin d'aide pour le configurer, consultez la procédure pas à pas utile de Yoast.
Une fois que vous avez fait cela, connectez-vous à la Search Console et cliquez sur Apparence de recherche > Surligneur de données . Appuyez sur Démarrer la mise en surbrillance sur le côté droit de l'écran.
Ensuite, vous devrez entrer l'URL d'une page que vous souhaitez taguer et sélectionner le type de balisage que vous ferez. Dans ce cas particulier, nous utiliserons le type de balisage Articles.
Parce que je mets en avant un article sur un site qui publie beaucoup d'articles, je continuerai Tag cette page et d'autres similaires vérifié.
Vous verrez maintenant un écran partagé :votre page à gauche et les champs de balisage disponibles à droite.
C'est vraiment simple à partir d'ici. Commencez simplement à mettre en évidence! Chaque fois que vous mettez en surbrillance du texte (ou cliquez sur une image), un petit menu apparaîtra dans lequel vous pourrez sélectionner le type d'information que vous avez mis en surbrillance.
Ici, j'ai surligné le titre de la page. Tout ce que j'ai à faire est de cliquer sur "Titre" dans le menu.
Maintenant, le titre est rempli dans le volet de droite.
Je vais continuer en mettant en évidence l'auteur, la date de publication, l'image principale et la catégorie (j'ai mis en évidence les balises en haut de l'article, et les trois ont été importées en tant que catégories).
Et nous avons terminé ! C'est tout ce qu'il y a à faire.
Lorsque vous appuyez sur Terminé , Data Highlighter vous aidera à appliquer ce balisage à d'autres pages similaires de votre site.
Le surligneur de données vous permet uniquement d'effleurer la surface du balisage de données structurées. Comme vous l'avez vu ci-dessus, je n'ai pu ajouter qu'une poignée d'attributs à cet article. Le type d'article de Schema.org contient beaucoup plus d'attributs qui peuvent être définis.
Que faire si nous voulons ajouter plus de détails au balisage du schéma ?
Vous allez devoir plonger dans le code à ce stade. Comme je l'ai mentionné précédemment, il existe deux manières principales de représenter les données structurées :avec JSON et avec des balises HTML en ligne. Comme les balises HTML sont un peu plus intuitives, nous allons d'abord les passer en revue.
À titre d'exemple, nous allons baliser une phrase simple :« J'habite à Denver ». En HTML, cela sera représenté simplement, comme ceci :
J'habite à Denver.
Pour démarrer le balisage, nous devons spécifier que cette phrase particulière concerne une personne (indiquée par le type d'élément Person). Voici comment nous procédons :
J'habite à Denver.
Désormais, un moteur de recherche saura que tout ce qui est contenu dans cette balise
Ensuite, nous allons ajouter un attribut de balisage :
homeLocation . Schema.org définit homeLocation comme "un emplacement de contact pour la résidence d'une personne".
Nous devons ajouter cet attribut spécifique au HTML. Voici comment nous procédons :
J'habite à Denver.
Maintenant "Denver" est identifié comme le
homeLocation propriété, et Google sait que la personne identifiée dans ce paragraphe y habite.
Si nous remplaçons la phrase par "Je vis et travaille à Denver", nous pouvons également le montrer :
Je vis et travaille à Denver.
Denver est maintenant identifié comme étant à la fois
homeLocation et
lieu de travail . (Merci à Lloyd Bank et unor de Stack Exchange pour avoir décrit cet exemple.)
Il s'agit d'un cas assez simple de balisage de schéma, mais vous voyez l'idée. En utilisant
et
balises, vous pouvez ajouter des attributs et des propriétés à n'importe quoi sur votre page.
Marquage Schema.org avec JSON
Google recommande d'utiliser JSON-LD (JavaScript Object Notation for Linked Data) pour le balisage de schéma. Le plus grand avantage de cette méthode est qu'elle garde votre HTML beaucoup plus propre. Si vous revenez pour modifier une page et que vous voyez des dizaines de pages de code avec un balisage, vous ne serez pas content.
Le balisage JSON nécessite encore beaucoup d'espace, mais il est séparé de votre code HTML, ce qui facilite sa maintenance.
Imaginons que vous possédiez une librairie appelée Harker's et que vous ayez inclus les informations suivantes sur votre page de contact :
Numéro de téléphone :555-8710
Adresse :749, rue Stoker, Boulder, Colorado
Heures :de 10 à 9 du lundi au vendredi, de 11 à 8 le samedi, de 12 à 5 le dimanche
Voici comment vous représenteriez cela avec JSON-LD :
Cela va dans l'en-tête de votre page. Comme vous pouvez le constater, cela va prendre beaucoup de place, car ce contenu sera presque certainement également affiché sur votre page en HTML. Ainsi, tout ce que vous souhaitez annoter sera écrit deux fois.
Malgré cette duplication, cependant, la méthode JSON est souvent préférable, car elle sépare le balisage du schéma et votre code HTML. De nombreuses bonnes pratiques HTML semblent un peu étranges jusqu'à ce que vous réalisiez qu'elles facilitent la maintenance des sites. C'est pareil.
Ajout d'un balisage de schéma à votre site
Maintenant que vous avez vu différentes manières d'ajouter une notation de données structurées à votre site, vous pouvez commencer ! C'est une bonne idée de commencer avec le surligneur de données et de continuer à partir de là. La documentation de Schema.org est la ressource ultime, mais elle est un peu difficile à parcourir.
Que vous souhaitiez aller à l'essentiel ou commencer à annoter tout ce qui est en vue, vous avez maintenant les ressources dont vous avez besoin pour commencer !
Avez-vous utilisé le balisage Schema.org sur votre propre site ? Avez-vous des conseils pour les propriétaires de sites ou les développeurs qui souhaitent se lancer ? Partagez vos impressions dans les commentaires ci-dessous !
Crédit image :iinspiration via Shutterstock.com
[]
7 façons de garder vos gadgets en sécurité pendant vos vacances
Comment désencombrer la recherche dans Windows 10 avec un réglage rapide