BaliseTonSite

Données structurées JSON-LD et Rich Snippets

Comment implémenter le format JSON-LD et Schema.org pour faire apparaître ton site en extraits enrichis dans Google.

Imagine : dans un jeu, quand tu survoles un objet, une infobulle apparaît avec ses stats nom, dégâts, rareté, effets spéciaux. Les données structurées, c'est cette infobulle, mais pour Google. Elles permettent à tes résultats de recherche d'afficher des informations enrichies (étoiles, prix, FAQ…).

10.1C'est quoi les données structurées ?

Les données structurées sont du code (JSON-LD) que tu ajoutes dans ta page pour expliquer à Google ce qu'elle contient dans un format qu'il comprend parfaitement. C'est une langue universelle définie par Schema.org.

Le résultat ? Des Rich Snippets dans , tes résultats se démarquent visuellement :

  • Avis et étoiles note et nombre d'avis
  • FAQ questions/réponses directement dans Google
  • How-to étapes d'un tutoriel
  • Article auteur, date, image
  • Organisation logo, réseaux sociaux
  • Recettes ingrédients, temps de cuisson

Sans données structurées, ton résultat Google est un item basique sans infobulle. Avec, c'est un item légendaire avec toutes ses stats affichées. Devant lequel tu cliques ?

10.2Écrire du JSON-LD

Le JSON-LD se place dans une balise <script> dans le <head> de ta page. Voici les schemas les plus utiles :

<!-- Schema Article - pour un cours ou un article de blog -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Apprendre le SEO facilement",
    "description": "Guide complet pour comprendre le SEO et optimiser son site.",
    "author": {
     "@type": "Person",
     "name": "BaliseTonSite"
    },
    "datePublished": "2026-01-15",
    "dateModified": "2026-02-10",
    "publisher": {
     "@type": "Organization",
     "name": "BaliseTonSite",
     "logo": {
       "@type": "ImageObject",
       "url": "https://balisetonsite.fr/logo.webp"
     }
    }
}
</script>
<!-- Schema FAQ - Questions/réponses dans Google -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
     {
       "@type": "Question",
       "name": "C'est quoi le SEO ?",
       "acceptedAnswer": {
         "@type": "Answer",
         "text": "Le SEO (Search Engine Optimization) est l'optimisation d'un site pour les moteurs de recherche afin d'améliorer son classement."
       }
     },
     {
       "@type": "Question",
       "name": "Le SEO est-il gratuit ?",
       "acceptedAnswer": {
         "@type": "Answer",
         "text": "Oui, le SEO organique est gratuit. Vous investissez du temps, pas de l'argent en publicité."
       }
     }
    ]
}
</script>

10.3Automatiser avec Next.js + WordPress Headless

Sur un site headless (Next.js en front, WordPress en back), tu peux générer le JSON-LD automatiquement à partir des données de l'API WordPress. Plus besoin de l'écrire à la main pour chaque page.

// lib/seo/generate-schema.ts
export function generateArticleSchema(post) {
    return {
     '@context': 'https://schema.org',
     '@type': 'Article',
     headline: post.title,
     description: post.excerpt,
     author: {
       '@type': 'Person',
       name: post.author.name,
     },
     datePublished: post.date,
     dateModified: post.modified,
     image: post.featuredImage?.url,
     publisher: {
       '@type': 'Organization',
       name: 'BaliseTonSite',
       logo: {
         '@type': 'ImageObject',
         url: 'https://balisetonsite.fr/logo.webp',
       },
     },
    };
}

// app/blog/[slug]/page.tsx
import { generateArticleSchema } from '@/lib/seo/generate-schema';

export default async function BlogPost({ params }) {
    const post = await fetchPost(params.slug);
    const schema = generateArticleSchema(post);

    return (
     <>
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
       />
       <article>
         <h1>{post.title}</h1>
         {/* ... */}
       </article>
     </>
    );
}

L'automatisation, c'est un craft automatique dans ton jeu tu donnes les ressources (les données WordPress), et le système fabrique l'objet (le JSON-LD) sans intervention manuelle. Chaque nouvel article a son schema dès sa publication.

10.4Tester tes données structurées

Avant de déployer, vérifie toujours que tes données structurées sont valides :

  • Rich Results Test (Google) : search.google.com/test/rich-results
    Vérifie si ta page est éligible aux rich snippets.
  • Schema Markup Validator validator.schema.org
    Valide la syntaxe de ton JSON-LD.
  • Google Search Console onglet « Améliorations »
    Montre les erreurs de données structurées détectées en production.

Toujours tester avant de déployer, c'est comme tester un build de jeu avant la mise en ligne. Un JSON-LD mal formé, c'est pire que pas de JSON-LD du tout Google pourrait te pénaliser.

Verifie tes acquis

3 questions pour valider ce chapitre

1. Qu'est-ce que le JSON-LD ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM complété s'enregistre comme un checkpoint dans ton tableau de bord personnel. Crée ton profil de développeur gratuitement pour débloquer toutes les évaluations du site et suivre ta progression étape par étape.

Commencer l'aventure
Déjà membre ?Connecte-toi