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.
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
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>
</>
);
}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.