Décrire un itinéraire en JSON-LD

Une page d’itinéraire peut afficher les bonnes informations à vos visiteurs sans les décrire explicitement aux moteurs de recherche et aux autres outils qui analysent son contenu. Vous allez ajouter à la route un bloc JSON-LD construit à partir des données de la randonnée, sans recopier manuellement son nom, sa description ou son image.

La leçon précédente a ajouté à chaque itinéraire des métadonnées Open Graph et une URL canonique ; le JSON-LD complète ces informations en décrivant le contenu de la page sous forme de données structurées. Vous utilisez ici un type Schema.org adapté à un lieu touristique, avec des propriétés issues de l’itinéraire effectivement affiché.

Construire un objet JSON-LD à partir de l’itinéraire

Ajoutez le fichier lib/donnees-structurees.ts. La fonction reçoit les champs dont la page a besoin et renvoie un objet JavaScript ; @context indique le vocabulaire Schema.org, tandis que @type précise la catégorie décrite. L’URL canonique est transmise par l’appelant : vous réutilisez ainsi la même adresse publique que celle déclarée dans les métadonnées de la route.

type DonneesItineraire = {
  nom: string;
  description: string;
  image: string;
  url: string;
};

export function creerDonneesStructurees({
  nom,
  description,
  image,
  url
}: DonneesItineraire) {
  return {
    "@context": "https://schema.org",
    "@type": "TouristAttraction",
    name: nom,
    description,
    image,
    url
  };
}

Le type TouristAttraction décrit ici l’itinéraire comme une destination d’intérêt, sans inventer des informations comme une adresse, des coordonnées ou une durée qui ne figureraient pas dans vos données. Si le modèle du catalogue ne contient pas l’un des champs requis par cette fonction, ajoutez-le au modèle et à ses données avant de l’utiliser ; ne remplacez pas une valeur inconnue par une valeur fictive.

Intégrer le bloc à la route dynamique

Dans app/randonnees/[slug]/page.tsx, construisez l’objet après avoir retrouvé l’itinéraire et vérifié le slug, comme vous le faites déjà pour les métadonnées. L’exemple suivant montre le point d’intégration dans le composant de page : reprenez les noms exacts de votre accès aux données, de votre utilitaire de métadonnées et des propriétés d’itinéraire déjà présents dans ce fichier. Conservez intégralement le rendu détaillé existant ; ajoutez le script à l’intérieur de son conteneur de page.

import { creerDonneesStructurees } from "@/lib/donnees-structurees";

// Dans la page existante, après la récupération et la validation
// de l’itinéraire :
const origine = process.env.NEXT_PUBLIC_SITE_URL;

if (!origine) {
  throw new Error("NEXT_PUBLIC_SITE_URL doit être configurée");
}

const url = new URL(`/randonnees/${slug}`, origine).toString();
const donneesStructurees = creerDonneesStructurees({
  nom: randonnee.nom,
  description: randonnee.description,
  image: new URL(randonnee.image, origine).toString(),
  url
});

return (
  <article className="rando-detail" aria-labelledby="titre-itineraire">
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify(donneesStructurees).replace(/</g, "\\u003c")
      }}
    />
    <h1 id="titre-itineraire">{randonnee.nom}</h1>
    <div className="rando-detail__media">
      <img src={randonnee.image} alt={randonnee.nom} />
    </div>
    <p>{randonnee.description}</p>
  </article>
);

Ce fragment indique précisément où placer l’ajout : il ne constitue pas un remplacement autonome de votre page, car celle-ci contient déjà la récupération des données et la génération des métadonnées. Gardez cette logique existante, puis adaptez les noms slug, randonnee.nom, randonnee.description et randonnee.image aux exports et propriétés réellement déclarés dans lib/randonnees.ts. Le rendu HTML visible reste celui de la route ; le script fournit une description lisible par les outils qui traitent les données structurées.

Vérifier les données rendues

Ouvrez le code source HTML de /randonnees/cretes-du-jura et repérez application/ld+json. Vérifiez que le bloc est du JSON analysable, que son nom, sa description, son image et son URL correspondent à la page, et que l’image ainsi que l’adresse canonique sont absolues et accessibles. Répétez le contrôle avec un autre slug existant : des données identiques sur toutes les routes signaleraient que le bloc n’est pas construit à partir de l’itinéraire courant.

• Construisez le JSON-LD à partir des données de l’itinéraire affiché, sans ajouter de valeurs supposées.
• Utilisez un type et des propriétés Schema.org cohérents avec les informations disponibles.
• Sérialisez l’objet avec JSON.stringify et échappez les caractères « < » avant de l’insérer dans le script.
• Vérifiez le HTML rendu sur plusieurs slugs et comparez chaque champ à la page visible.

Dans la prochaine leçon, vous délimiterez les zones d’attente de l’itinéraire avec Suspense afin de préparer un rendu progressif.