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

1
npm install schema-dts

1
import type { Article } from "schema-dts";
2

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

1
import { ArticleStructuredData } from "~/components/ArticleStructuredData";
2
import { useLoaderData } from "react-router";
3
import { fetchArticle } from "~/server/articles.server";
4

5
/* ---------------- loader ---------------- */
6
export 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 ---------------- */
14
export 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
}

1
import { generateMeta } from "@forge42/seo-tools/remix/metadata";
2
import { article as articleLD } from "@forge42/seo-tools/structured-data/article";
3

4
export 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
  );

1
import { Organization } from "schema-dts";
2

3
export 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
}