La programmation

Comment utiliser le balisage Schema.org sur votre site Web et pourquoi vous devriez

Comment utiliser le balisage Schema.org sur votre site Web et pourquoi vous devriez / La programmation

Les moteurs de recherche sont incroyablement puissants. 7 Alternatives à Google Search et caractéristiques de leurs marques. 7 Alternatives à Google Search et caractéristiques de leurs marques. Êtes-vous un utilisateur assidu de Google? Essayez ces moteurs de recherche alternatifs. Que ce soit dans le domaine de la protection de la vie privée ou des causes caritatives, ces moteurs de recherche peuvent vous donner des raisons de changer votre façon de naviguer. Lire la suite . Ils peuvent interpréter le langage souvent peu clair que nous utilisons pour déterminer ce que nous recherchons, déterminer la meilleure ressource pour répondre à nos questions et nous le montrer en quelques fractions de seconde..

Google réussit même très bien à répondre aux questions de la page de résultats de recherche, évitant ainsi de cliquer sur n'importe quoi. Il personnalise même les résultats de recherche. Comment désactiver la personnalisation des résultats de recherche de Google. Comment désactiver la personnalisation des résultats de recherche de Google. Pour en savoir plus. Et cela aide les gens à trouver plus rapidement l'information qu'ils recherchent.

Mais les moteurs de recherche ne peuvent le faire eux-mêmes. Ils ont besoin de l'aide des propriétaires et des développeurs de sites. Et le balisage de schéma est un moyen de vous aider sur votre propre site..

Qu'est-ce que le balisage de schéma??

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 des données structurées? Ses informations qui sont organisées et étiquetées il peut donc ê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 code JavaScript qui définit le temps de préparation, le temps total, le rendement de la recette et diverses informations nutritionnelles relatives à la recette..

Il convient de noter à ce stade qu'il existe deux méthodes principales pour baliser les données structurées: avec JSON Qu'est-ce que JSON? Présentation d'un profane Qu'est-ce que JSON? Présentation d'un profane Que vous envisagiez de devenir un développeur Web ou non, il est judicieux de savoir au moins ce qu'est le JSON, pourquoi c'est important et pourquoi il est utilisé partout sur le Web. Lire plus ou avec des balises HTML en ligne. 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 contient des milliers de types de balises que vous pouvez utiliser pour mieux montrer aux moteurs de recherche les informations de votre page. Le type TechArticle, par exemple, inclut, entre autres choses, les attributs suivants:

  • niveau de compétence
  • wordCount
  • public
  • créateur
  • date créée
  • date modifiée
  • Date publiée
  • publicationPrincipes
  • gamme typique

Il existe un schéma complet pour les bibliothèques, les établissements d'hébergement, les appartements, les événements d'arts visuels, les canaux de diffusion, les méthodes de diffusion, les statuts de serveur de jeu, etc..

L'idée est de veiller à ce que les moteurs de recherche sachent ce que chaque élément d'information de votre page représente réellement, afin qu'il puisse afficher ces informations à ceux qui les recherchent..

Les avantages du balisage de schéma

D'ACCORD. Le balisage de schéma indique aux moteurs de recherche ce qu'il y a sur votre page - quel est le problème?

Google le dit comme ceci:

“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 tournée de la prochaine tournée de Slayer affichées directement dans les résultats de la recherche:

Ou obtenez des informations spécifiques sur un film lorsque vous le recherchez:

Google parvient toujours mieux à trouver ces informations, mais l'utilisation correcte du balisage de schéma facilite le processus et rend plus probable la présence d'informations sur votre page..

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.

Débuter avec les données structurées

Maintenant que vous avez compris les avantages de l'utilisation du balisage Schema.org, il est temps de plonger dedans. Commençons par l'outil le plus simple: le surligneur de données de Google..

Votre site doit être connecté à la console de recherche de Google (anciennement appelée Outils pour les webmasters. Obtenez des informations de recherche plus approfondies pour votre site avec les outils pour les webmasters. Requêtes de recherche. Obtenez des informations de recherche plus approfondies pour votre site avec des outils pour les webmasters. Les webmasters de Google pourraient changer votre façon de faire de la recherche sur le sujet: la génération de contenu sur le Web fait appel à la créativité, à la focalisation sur l'utilisateur et à de nombreuses recherches de mots clés. Si vous avez besoin d’aide pour l’installer, consultez la procédure utile de Yoast..

Une fois cela fait, connectez-vous à la console de recherche et cliquez sur Apparence de recherche> Surligneur de données. Frappé le Commencer à mettre en évidence bouton sur le côté droit de l'écran.

Ensuite, vous devrez entrer l'URL de la page que vous souhaitez baliser 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 évidence un article sur un site qui publie beaucoup d'articles, je vais garder Marquez cette page et d'autres comme elle vérifié.

Vous verrez maintenant un écran partagé: votre page à gauche et les champs de marquage disponibles à droite..

C'est vraiment simple d'ici. Commencez juste à souligner! Chaque fois que vous mettez en surbrillance du texte (ou cliquez sur une image), un petit menu apparaîtra dans lequel vous pouvez sélectionner le type d'informations que vous avez surlignées..

Ici, j'ai surligné le titre de la page. Tout ce que je dois faire est de cliquer “Titre” dans le menu.

Maintenant, le titre est rempli dans le volet de droite.

Je vais continuer, en soulignant l'auteur, la date de publication, l'image principale et la catégorie (j'ai mis en surbrillance les balises en haut de l'article et les trois ont été importées en tant que catégories).

Et nous avons fini! C'est tout ce qu'on peut en dire.

Quand vous frappez Terminé, Data Highlighter vous aidera à appliquer ce balisage à d'autres pages similaires de votre site..

Ajout de plus de détails

Data Highlighter vous permet seulement de gratter la surface du balisage de données structuré. Comme vous l'avez vu plus haut, 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 faisons-nous si nous voulons ajouter plus de détails au balisage de 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. Parce que les balises HTML 17 Exemples de codes HTML simples que vous pouvez apprendre en 10 minutes 17 Exemples de codes HTML simples et que vous pouvez apprendre de 10 Minutes Si vous connaissez les 17 balises HTML suivantes (et les quelques extra qui les accompagnent), vous pourrez pour créer une page Web de base à partir de zéro ou modifier le code créé par une application telle que… Read More est un peu plus intuitif, nous allons passer en revue les premières.

Balisage HTML Schema.org en ligne

A titre d'exemple, nous allons marquer une phrase simple: “J'habite à Denver.” En HTML, cela sera représenté simplement, comme ceci:

J'habite à Denver.

Pour lancer le balisage, nous devons spécifier que cette phrase particulière concerne une personne (indiquée par le type d'élément Personne). Voici comment nous faisons cela:

 
J'habite à Denver.

Maintenant, un moteur de recherche saura que tout ce qui est contenu dans cette

l'étiquette a à voir avec une personne.

Ensuite, nous allons ajouter un attribut de balisage: homeLocation. Schema.org définit homeLocation comme “Un lieu de contact pour la résidence d'une personne.”

Nous devons ajouter cet attribut spécifique au code HTML. Voici comment nous faisons cela:

 
j'habite à Denver.

À présent “Denver” est identifié comme le homeLocation biens, et Google sait que la personne identifiée dans ce paragraphe y habite.

Si nous changeons la phrase en “Je vis et travaille à Denver,” nous pouvons montrer cela aussi:

 
Je vis et travaille dans 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.)

C'est un cas assez simple de balisage de schéma, mais vous en avez l'idée. En utilisant

et balises, vous pouvez ajouter des attributs et des propriétés à n'importe quoi sur votre page.

Balisage Schema.org avec JSON

Google recommande d'utiliser JSON-LD (notation d'objet JavaScript pour les données liées) pour le balisage de schéma. Le principal avantage de cette méthode est qu’elle garde votre code HTML beaucoup plus propre. Si vous revenez en arrière pour éditer une page et que vous voyez des dizaines de pages de code avec du balisage, vous ne serez pas heureux..

Le balisage JSON nécessite toujours beaucoup d’espace, mais il est séparé de votre code HTML, ce qui facilite sa maintenance..

Supposons que vous avez une librairie appelée Harker et que vous avez inclus les informations suivantes sur votre page de contact:

Numéro de téléphone: 555-8710 Adresse: 749 Stoker St., Boulder, Colorado Heures: 10-9 heures du lundi au vendredi, 11-8 samedi, 12-5 heures le dimanche

Voici comment vous représenter 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 affiché sur votre page en HTML. Donc, tout ce que vous voulez marquer sera écrit deux fois.

Malgré cette duplication, toutefois, la méthode JSON est souvent préférable, car elle sépare le balisage du schéma et votre code HTML. 9 erreurs que vous ne devriez pas commettre lors de la création d'une page Web 9 erreurs que vous ne devriez pas commettre lors de la création d'une page Web Ces erreurs de codage HTML suivantes sont faciles à commettre, mais si vous les enlevez plus tôt que Cette page aura une meilleure apparence, sera plus facile à gérer et fonctionnera comme vous le souhaitez. Lire Plus semble un peu étrange jusqu'à ce que vous réalisiez qu'ils facilitent la maintenance des sites. C'est pareil.

Ajout de balisage de schéma à votre site

Maintenant que vous avez découvert différentes façons d’ajouter une notation de données structurée à 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 Schema.org est la ressource ultime, mais il est un peu difficile de parcourir rapidement.

Peu importe si vous voulez aller à l'essentiel ou commencer à tout marquer, 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 votre opinion dans les commentaires ci-dessous!

Crédit d'image: iinspiration via Shutterstock.com

.