Guide complet : Comment implémenter le balisage Schema.org sur votre site pour booster votre SEO

Les moteurs de recherche comme Google sont d'une puissance remarquable. Ils interprètent notre langage souvent imprécis, identifient les meilleures ressources pour répondre à nos questions et les affichent en quelques fractions de seconde.

Google excelle même dans les réponses directes dans les résultats de recherche (SERP), évitant les clics inutiles. Il personnalise les résultats pour une expérience utilisateur optimale, aidant à trouver rapidement les informations recherchées.

Cependant, les moteurs de recherche ne peuvent pas tout faire seuls. Ils comptent sur l'aide des propriétaires et développeurs de sites. Le balisage Schema.org est précisément cet outil puissant pour optimiser votre site.

Qu'est-ce que le balisage Schema.org ?

Le balisage Schema.org met en lumière des éléments spécifiques de données structurées sur votre page.

Les données structurées sont des informations organisées et étiquetées pour une meilleure compréhension par les machines. En résumé, ce balisage aide les moteurs de recherche à identifier précisément les types d'informations sur votre page web. Un exemple concret illustre cela parfaitement.

Google propose un exemple interactif de balisage pour une recette de tarte aux pommes :

Ce code JavaScript définit le temps de préparation, le temps total, le rendement et les faits nutritionnels.

Note : Il existe deux formats principaux : JSON-LD (recommandé par Google) et Microdata (balises HTML intégrées). Nous détaillerons les deux.

Voici comment Google extrait les informations nutritionnelles :

Schema.org offre des milliers de types de balisage. Pour un TechArticle, par exemple, les attributs incluent :

• proficiencyLevel

• wordCount

• audience

• creator

• dateCreated

• dateModified

• datePublished

• publicationPrinciples

• typicalAgeRange

Des schémas existent pour les bibliothèques, hébergeurs, événements artistiques, etc. L'objectif : indiquer clairement aux moteurs ce que représente chaque information pour un affichage optimal.

Les avantages du balisage Schema.org

Pourquoi l'utiliser ? Il précise aux moteurs le contenu de votre page.

Google l'explique ainsi :

"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."

Exemples : dates de tournée d'un artiste ou infos sur un film directement en SERP.

Google s'améliore, mais un balisage correct accélère le processus et augmente les chances d'affichage enrichi (rich snippets). Résultat : visibilité accrue pour tous.

Premiers pas avec les données structurées

Commençons simplement avec le Surligneur de données de Google.

Prérequis : Vérifiez votre site dans Google Search Console (guide Yoast ici).

Allez dans Apparence de recherche > Surligneur de données, puis Démarrer la mise en surbrillance.

Entrez l'URL, sélectionnez le type (ex. : Article).

Cochez Tagger cette page et d'autres similaires pour les articles.

Surlignez le texte ou images : un menu propose les types (titre, auteur, date, etc.).

Continuez avec auteur, date, image, catégorie. Cliquez Terminé pour appliquer à d'autres pages.

Ajouter plus de détails

Le Surligneur est introductif. Pour plus d'attributs, passez au code.

Balisage HTML Microdata Schema.org

Exemple : "J'habite à Denver."

<p>J'habite à Denver.</p>

Ajoutez le type Person :

<div itemscope itemtype="https://schema.org/Person">
  <p>J'habite à Denver.</p>
</div>

Ajoutez itemprop="homeLocation" :

<div itemscope itemtype="https://schema.org/Person">
  <p>J'habite à <span itemprop="homeLocation">Denver</span>.</p>
</div>

Pour "Je vis et travaille à Denver" :

<div itemscope itemtype="https://schema.org/Person">
  <p>Je vis et travaille à <span itemprop="homeLocation workLocation">Denver</span>.</p>
</div>

Utilisez div/span pour annoter n'importe quel élément.

Balisage Schema.org avec JSON-LD

Google recommande JSON-LD pour un HTML plus propre.

Exemple pour une librairie Harker's :

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Bookstore",
  "telephone": "555-8710",
  "address": "749 Stoker St., Boulder, Colorado",
  "openingHours": ["Mo-Fr 10:00-21:00", "Sa 11:00-20:00", "Su 12:00-17:00"]
}
</script>

Placez-le dans <head>. Duplication possible, mais maintenance facilitée.

Implémenter le balisage sur votre site

Commencez par le Surligneur, consultez Schema.org. Testez avec l'Outil de test des résultats enrichis.

Que vous débutiez ou expertisiez tout, ces ressources vous guident !

Avez-vous implémenté Schema.org ? Partagez vos astuces en commentaires !

Crédit image : iinspiration via Shutterstock.com