Données structurées React Router 7 : booster SEO et rich snippets

Tu as déjà optimisé tes balises title et description (voir la leçon Configurer les balises meta SEO). Prochaine étape : aider Google à comprendre ton contenu pour afficher un résultat enrichi (rich snippet) : étoiles, image, durée d’une recette, prix…

Ces informations proviennent d’un bloc JSON-LD placé dans le <head>. L’énorme avantage :

zéro impact visuel : c’est invisible pour l’utilisateur ;
grande valeur SEO : taux de clic (CTR) boosté jusqu’à +30 %.

Dans React Router 7 (ex-Remix) c’est ultra simple : une resource route ou la fonction meta() suffit.

Au lieu d’écrire du JSON brut (casse-pieds !), on va utiliser schema-dts : il expose tous les types Schema.org en TypeScript.

install.sh

1npm install schema-dts

Note

Pas de runtime, juste des types – aucun octet en plus dans ton bundle.

app/components/ArticleStructuredData.tsx

1import type { Article } from "schema-dts";
2
3export function ArticleStructuredData(props: Article) {
4  return (
5    <script
6      type="application/ld+json"
7      dangerouslySetInnerHTML={{ __html: JSON.stringify(props) }}
8    />
9  );
10}

Pourquoi un composant ? Tu restes en JSX, tu bénéficies de l’autocomplétion et tu peux l’appeler depuis n’importe quelle route.

app/routes/blog.$slug.tsx

1import { ArticleStructuredData } from "~/components/ArticleStructuredData";
2import { useLoaderData } from "react-router";
3import { fetchArticle } from "~/server/articles.server";
4
5/* ---------------- loader ---------------- */
6export async function loader({ params }: Route.LoaderArgs) {
7  const article = await fetchArticle({ slug: params.slug });
8  if (!article)
9    throw new Response("Article introuvable", { status: 404 });
10  return article;
11}
12
13/* ---------------- composant page ---------------- */
14export default function ArticlePage() {
15  const article = useLoaderData<typeof loader>();
16
17  return (
18    <>
19      <ArticleStructuredData
20        {"@context"="https://schema.org"}
21        {"@type"="Article"}
22        headline={article.title}
23        image={article.image}
24        datePublished={article.dateCreated.toISOString()}
25        author={{
26          "@type": "Person",
27          name: article.author,
28        }}
29        /* ^? autocomplétion assurée par schema-dts */
30      />
31
32      {/* …le reste de ton template Markdown / MDX… */}
33    </>
34  );
35}

Points clés du transcript (reformulés) :

Google ne « devine » rien : toutes les infos viennent de ton objet article.
On garde un JSON minimaliste – inutile de remplir les 40 champs possibles, concentre-toi sur ceux demandés par la doc Article Google.
Le composant se place avant le contenu : Google le lit sans scroller.

Tu préfères la fonction traditionnelle ?

app/routes/blog.$slug.tsx

1import { generateMeta } from "@forge42/seo-tools/remix/metadata";
2import { article as articleLD } from "@forge42/seo-tools/structured-data/article";
3
4export const meta = ({ data }: Route.MetaArgs) =>
5  generateMeta(
6    {
7      title: data.title,
8      description: data.description,
9      url: data.slug, // absolu conseillé
10    },
11    [
12      {
13        "script:ld+json": articleLD({
14          "@type": "Article",
15          headline: data.title,
16          image: data.image,
17          datePublished: data.dateCreated.toISOString(),
18          author: { "@type": "Person", name: data.author },
19        }),
20      },
21    ],
22  );

Cette approche colle au transcript : la lib Forge42 écrit le <script> à ta place. À toi de choisir la méthode qui te convient, l’important est que le script atterrisse dans le <head>.

Rich Results Test – l’outil officiel Google, affichage desktop + mobile.
Schema Markup Validator – l’ex-outil de test Schema.org, pratique hors connexion.

Copie/colle le HTML généré ou pointe directement ton URL : tu dois voir « Aucun avertissement critique ».

Tip

Corrige immédiatement les warnings : Google les ignore parfois, mais Bing, Yahoo ou ChatGPT sont plus stricts.

Les SERP aiment connaître ton entité (marque, blog, association) :

{7-13} app/routes/_root.tsx

1import { Organization } from "schema-dts";
2
3export function RootStructuredData() {
4  const org: Organization = {
5    "@context": "https://schema.org",
6    "@type": "Organization",
7    name: "Algomax",
8    url: "https://algomax.fr",
9    logo: "https://algomax.fr/logo.svg",
10  };
11  return (
12    <script
13      type="application/ld+json"
14      dangerouslySetInnerHTML={{ __html: JSON.stringify(org) }}
15    />
16  );
17}

Place-le dans app/root.tsx juste avant <Meta />. Ainsi, TOUTES les pages héritent de l’Organisation ; chaque article ajoute ensuite son propre script.

Problème	Solution
Script rendu dans le body	Place-le via `meta()` ou dans un composant monté avant le premier `<h1>`.
URL relatives (`/cover.jpg`)	Convertis en URL absolues (`https://…/cover.jpg`).
Titre dupliqué	Supprime l’ancien `<MetaTags>` seulement dans la page où tu injectes `generateMeta`.
Types inconnus (ex. `TechArticle`)	Vérifie dans schema.org ; Google ne supporte pas tout.

Warning

Ne duplique jamais plusieurs JSON-LD identiques : Google filtre et peut considérer ça comme du spam.

Un seul <script type="application/ld+json"> par type de page.
Toutes les URL (url, image, logo) sont absolues.
Validation Google : 0 erreur et 0 warning critique.
Pages sensibles (/login, /register) : pas de JSON-LD inutile.
CI verte : la build ne casse pas (typage schema-dts).

Important

Pousse ! Dans 48 h la Search Console devrait t’indiquer “Améliorations → Article – Valides ✔︎”.
Un petit pas pour toi, un bond pour le CTR de ton blog 😎

Données structurées React Router 7 : booster SEO et rich snippets

Continuez votre apprentissage

Note

Tip

Warning

Important

Comprendre les concepts fondamentaux

Optimisation des performances

Architecture des données