frontend / html

SEO technique : données structurées JSON-LD

Leçon 111 exercice

Explication

Ce que vous allez apprendre

Comprendre à quoi sert le vocabulaire schema.org dans une page web
Écrire un bloc JSON-LD valide pour un cours, un article de blog ou une FAQ
Décrire un fil d'ariane structuré avec BreadcrumbList
Comprendre pourquoi JSON-LD est préféré à microdata et RDFa
Valider son balisage avec l'outil Rich Results Test avant mise en production

Dans quel contexte ?

L'équipe SEO demande d'ajouter des étoiles de notation dans les résultats Google pour la page cours/html.html. Sans données structurées, Google ne peut deviner ni la note moyenne ni le nombre d'avis à partir du texte seul. En ajoutant un bloc <script type="application/ld+json"> de type Course avec les bonnes propriétés, la page devient éligible à un rich snippet — sans certitude qu'il s'affichera, mais avec toutes les chances mises de son côté.

Étape 1 : lire n'est pas comprendre

La leçon précédente montrait comment influencer ce qu'un humain voit dans les résultats de recherche. Celle-ci va plus loin : apprendre à décrire une page de façon qu'une machine puisse littéralement la "comprendre", pas juste la lire.

Étape 2 : ce que Google ne peut pas deviner seul

Un moteur de recherche peut deviner approximativement le sujet d'une page en analysant son texte. Mais il ne peut pas savoir avec certitude qu'un nombre est un prix, qu'une date est une date de publication, ou qu'un nom est celui de l'auteur.

Étape 3 : la solution, un vocabulaire partagé

Voici comment on répond à cette ambiguïté : JSON-LD fournit ces informations dans un format structuré et non ambigu, basé sur le vocabulaire commun de schema.org — "ceci est un cours", "ceci est une question suivie de sa réponse".

Étape 4 : la récompense pour ce travail

En retour de ce balisage, Google peut afficher des "rich snippets" : des étoiles de notation, une image, une FAQ dépliable directement dans les résultats de recherche.

Étape 5 : pourquoi JSON-LD plutôt que d'autres formats

Il existait d'autres façons d'intégrer ces données (microdata, RDFa), mêlées directement aux balises HTML visibles. JSON-LD, recommandé par Google, vit entièrement dans un unique bloc <script type="application/ld+json">, séparé du markup visuel.

Résultat pratique : on peut l'ajouter ou le modifier sans toucher au reste de la page, ni risquer de casser l'affichage.

Type schema.org	Rich snippet possible	Cas d'usage
`Course`	Infos structurées sur la formation	Page de cours
`Article`	Image + date dans les résultats	Article de blog
`FAQPage`	Questions dépliables	Page FAQ
`BreadcrumbList`	Fil d'ariane affiché dans l'URL	N'importe quelle page profonde

Prérequis

Cette leçon suppose que vous connaissez déjà <title>, meta description et Open Graph, vus à la leçon précédente ; JSON-LD vient les compléter, pas les remplacer.

Le piège à retenir avant de conclure

Il reste un point important à ne pas oublier : les rich snippets ne sont JAMAIS garantis, même avec des données JSON-LD parfaitement valides. Google décide seul de les afficher ou non.

Il reste néanmoins indispensable de valider son balisage avec l'outil Rich Results Test avant mise en production, pour s'assurer au moins que la syntaxe est correcte.

Piège fréquent

Une virgule en trop ou une accolade manquante dans un bloc JSON-LD ne provoque aucune erreur visible sur la page — le JSON invalide est simplement ignoré par Google, silencieusement. Validez toujours votre balisage avec le Rich Results Test avant de le considérer terminé.

Et ensuite ?

Changeons de sujet : la prochaine leçon aborde les médias — vidéo, audio et images responsives — pour servir le bon fichier au bon appareil.

Commandes & code

Données structurées JSON-LD

Décrire le contenu de façon exploitable par une machine, pour obtenir des rich snippets dans les résultats de recherche.

<!-- JSON-LD : format recommandé par Google (vs microdata/RDFa, plus intrusifs dans le HTML) -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Course",
    "name": "Cours HTML complet",
    "description": "De la structure de base aux Web Components et à l'accessibilité experte.",
    "provider": {
        "@type": "Organization",
        "name": "Technologik",
        "sameAs": "https://technologik.dev"
    },
    "hasCourseInstance": {
        "@type": "CourseInstance",
        "courseMode": "online"
    }
}
</script>

<!-- Article de blog -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Comprendre les Web Components",
    "author": {
        "@type": "Person",
        "name": "Marie L."
    },
    "datePublished": "2026-03-14",
    "dateModified": "2026-03-20",
    "image": "https://technologik.dev/og/webcomponents.png",
    "publisher": {
        "@type": "Organization",
        "name": "Technologik",
        "logo": {
            "@type": "ImageObject",
            "url": "https://technologik.dev/logo.png"
        }
    }
}
</script>

<!-- Fil d'ariane structuré : Google affiche le chemin dans les résultats -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Accueil",
            "item": "https://technologik.dev"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Cours",
            "item": "https://technologik.dev/cours"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "HTML",
            "item": "https://technologik.dev/cours/html"
        }
    ]
}
</script>

<!-- FAQ : peut afficher les questions dépliables directement dans les résultats -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {
            "@type": "Question",
            "name": "HTML est-il un langage de programmation ?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "Non, HTML est un langage de balisage : il structure le contenu, il ne calcule pas."
            }
        }
    ]
}
</script>

Résumé

JSON-LD s'insère dans un <script type="application/ld+json">, sans polluer le markup visuel.
schema.org fournit le vocabulaire (Article, Course, Product, FAQPage, BreadcrumbList...).
Les rich snippets ne sont jamais garantis : Google décide de les afficher ou non.
Valider systématiquement avec le Rich Results Test avant mise en production.

Exercices pratiques

1 disponible

Mission : préparer cours/html.html pour les étoiles de notation

Objectif : Ajouter un bloc JSON-LD valide pour rendre une page de cours éligible à un rich snippet, sans promettre un résultat garanti.

Contexte

L'équipe SEO demande d'ajouter des étoiles de notation dans les résultats Google pour cours/html.html. Le texte de la page mentionne "note moyenne : 4,8/5 (320 avis)", mais Google ne peut deviner ni ce nombre ni sa nature à partir du texte seul.

Ta mission : décrire la page avec les données structurées adaptées.

Résoudre l’exercice →