Configurer les balises meta SEO dans React Router 7

1
export function MetaTags({
2
  title,
3
  description,
4
  imageUrl = "https://algomax.fr/images/me-converted.webp",
5
}: {
6
  title: string
7
  description: string
8
  imageUrl?: string
9
}) {
10
  return (
11
    <>
12
      <title>{title}</title>
13

14
      {/* SEO classique */}
15
      <meta name="description" content={description} />
16

17
      {/* Open Graph : réseaux sociaux (LinkedIn, Twitter, Slack…) */}
18
      <meta property="og:title"       content={title} />
19
      <meta property="og:description" content={description} />
20
      <meta property="og:image"       content={imageUrl} />
21
    </>
22
  )
23
}

1
import { MetaTags } from "~/components/MetaTags";
2

3
export default function Home() {
4
  return (
5
    <>
6
      <MetaTags
7
        title="Le site personnel de Virgile"
8
        description="Je raconte ma vie de dev React JS, Remix et Tailwind."
9
      />
10

11
      {/* contenu visuel de la page */}
12
      <main className="px-8 py-4">
13
        <h1 className="text-3xl font-bold">Bienvenue !</h1>
14
      </main>
15
    </>
16
  );
17
}

1
import { MetaTags } from "~/components/MetaTags";
2
import { fetchArticle } from "~/server/articles.server";
3

4
export async function loader({ params }: Route.LoaderArgs) {
5
  const article = await fetchArticle({ slug: params.slug });
6
  if (!article)
7
    throw new Response("Article introuvable", { status: 404 });
8
  return article;
9
}
10

11
export default function ArticlePage() {
12
  const article = useLoaderData<typeof loader>();
13

14
  return (
15
    <>
16
      <MetaTags
17
        title={article.title}
18
        description={article.description}
19
        imageUrl={article.image}
20
      />
21

22
      {/* reste de la mise en page */}
23
      <h1>{article.title}</h1>
24
    </>
25
  );
26
}

1
import { Link, href } from "react-router";
2

3
export function ArticleCard({ article }: { article: Article }) {
4
  return (
5
    <article className="relative rounded-xl shadow-lg overflow-hidden">
6
      <img src={article.image} alt={article.title} />
7
      <h2 className="p-4 text-xl font-bold">{article.title}</h2>
8

9
      {/* lien invisible sur toute la card */}
10
      <Link
11
        to={href("/blog/:slug", { slug: article.slug })}
12
        className="absolute inset-0 z-10"
13
      />
14
    </article>
15
  );
16
}

1
import { MetaTags } from "~/components/MetaTags";
2

3
export default function Login() {
4
  return (
5
    <>
6
      <MetaTags
7
        title="Connexion – Algomax"
8
        description="Accède à ton dashboard…"
9
      />
10
      {/* formulaire */}
11
    </>
12
  );
13
}

1
<meta name="robots" content="noindex" />

1
npm run dev