Aller au contenu principal

Données structurées

Les données structurées sont un format standardisé pour fournir des informations sur une page web et son contenu. Elles permettent aux moteurs de recherche (Google, Bing, etc.) de mieux comprendre ce qu’il y a sur une page, et d’enrichir les résultats de recherche (ex : étoiles, prix, événements, FAQ…).

🧠 Pourquoi utiliser des données structurées ?​

  • ✅ Améliore la compréhension de vos pages par les moteurs de recherche.
  • ⭐️ Permet l’apparition de rich snippets (extraits enrichis) dans les résultats de recherche.
  • 🚀 Contribue indirectement à de meilleures performances SEO.
  • 📈 Améliore l’accessibilité aux contenus pour les assistants vocaux ou les agrégateurs.

🔧 Format : JSON-LD (LD+JSON)​

Le format recommandé par Google est JSON-LD (JavaScript Object Notation for Linked Data), intégré dans les pages HTML via une balise <script type="application/ld+json">.

✨ Exemple : Données structurées pour une page produit Odalys​

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "Résidence Les Alpages du Corbier",
    "image": ["https://media.odalys-vacances.com/images/corbier.jpg"],
    "description": "Résidence à la montagne avec piscine, proche des pistes.",
    "brand": {
      "@type": "Organization",
      "name": "Odalys Vacances"
    },
    "offers": {
      "@type": "Offer",
      "url": "https://www.odalys-vacances.com/location-montagne/les-alpages-du-corbier/",
      "priceCurrency": "EUR",
      "price": "399",
      "availability": "https://schema.org/InStock"
    }
  }
</script>

🗂️ Types de données disponibles​

Voici quelques types de schémas fréquemment utilisés :

Type Schema.orgUtilisation courante
WebSitePage d’accueil
WebPagePage générique
Article, NewsArticleArticles de blog ou actualités
ProductFiche produit, hébergement, séjour…
FAQPagePage FAQ avec accordéons
BreadcrumbListFil d’Ariane (breadcrumbs)
EventÉvénement ponctuel ou récurrent
OrganizationInformations générales sur l’entreprise

🧪 Tester les données structurées​

Utilise les outils suivants pour vérifier la qualité de ton balisage :

📚 Ressources utiles​

ℹ️ Les données structurées n’améliorent pas directement le classement SEO, mais elles favorisent l'affichage enrichi, ce qui augmente le taux de clics dans les résultats.

🧩 Intégrer des données structurées (Structured Data) dans Next.js 14​

⚠️ generateMetadata() ne permet pas d’ajouter des balises <script>​

La fonction generateMetadata() de Next.js génère uniquement des balises <meta> dans le <head>.
👉 Elle ne permet pas d’injecter des balises <script>, ce qui est nécessaire pour les données structurées en JSON-LD.

✅ Solution : injecter manuellement une balise <script> avec dangerouslySetInnerHTML​

Définir un objet jsonLd :

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'Odalys Vacances',
  url: 'https://www.odalys-vacances.com',
  logo: 'https://media.odalys-vacances.com/plus/v4/images/odalys-logo.png',
  sameAs: [
    'https://www.facebook.com/OdalysVacances',
    'https://twitter.com/Odalys_Vacances',
  ],
};

Et l’injecter dans le layout ou la page avec :

<script
  type='application/ld+json'
  dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>

🤔 Faut-il que le <script type="application/ld+json"> soit dans le <head> ?​

Non, ce n’est pas obligatoire. 👉 Les moteurs de recherche, comme Google, peuvent lire les balises JSON-LD où qu’elles soient dans le HTML, y compris dans le <body>.

💬 Google précise lui-même : "It doesn't matter whether you place the structured data in the head or body of the page."

🔍 Bonnes pratiques :

  • Utilise bien type="application/ld+json".
  • Toujours sérialiser l’objet avec JSON.stringify().

📦 Utiliser le package schema-dts pour typer ses données structurées​

Le package schema-dts permet de typer les objets JSON-LD selon les définitions officielles de Schema.org. Cela permet une meilleure autocomplétion, un code plus robuste, et évite les erreurs de format.

✍️ Exemple d'utilisation avec TypeScript

import { Organization } from 'schema-dts';

const jsonLd: Organization = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'Odalys Vacances',
  url: 'https://www.odalys-vacances.com',
  logo: 'https://media.odalys-vacances.com/plus/v4/images/odalys-logo.png',
  sameAs: [
    'https://www.facebook.com/OdalysVacances',
    'https://twitter.com/Odalys_Vacances',
  ],
};

📚 Documentation Next.js​

Next.js fournit également une documentation sur l'intégration de données structurées JSON-LD.