Configurer les balises meta SEO dans React Router 7

Apprends à créer et gérer les balises meta title et description pour optimiser le SEO de tes pages avec React Router 7. Méthode claire et rapide.

5 août 2025

5 min read

Code de la leçon

Continuez votre apprentissage

Accédez aux 9 modules et 76 leçons de cette formation.

599€

Accès à vie · Garantie 30 jours

Les balises title et description aident Google, et les SERP à indéxer tes pages.

Dans cette leçon tu vas :

Créer un composant <MetaTags> réutilisable.
Injecter automatiquement title, description et image Open-Graph.
Générer ces balises depuis tes loaders pour qu’elles soient dynamiques.
Vérifier le rendu exact avec un outil gratuit.

Objectif : toute nouvelle page bénéficie d’un SEO basique en 30 s chrono.

Plutôt que copier/coller trois balises dans chaque fichier, on centralise dans app/components/MetaTags.tsx.

app/components/MetaTags.tsx

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

Pourquoi un composant plutôt qu’un export `meta()`

Depuis React 19, Remix/React Router recommande d’écrire les balises inline (plus simple, aucune API à maintenir). Nous suivons cette voie pour rester à jour.

Note

L’ancienne signature export const meta: MetaFunction = () => […] fonctionne toujours. Dans une prochaîne leçon, nous l'utiliserons de nouveau.

Prenons la page d’accueil.

app/routes/index.tsx

1import { MetaTags } from "~/components/MetaTags";
2
3export 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}

Ouvre DevTools → onglet Elements → <head> : tu dois voir un <title> + <meta name="description"> fraîchement générés.

Important

Sans ces deux lignes, Google indexera le premier h1 venu
et produira souvent une description… aléatoire !

Les pages statiques c’est facile à implémenter. Comment. avec un blog et des pages dynamiques ? Créons un loader qui récupère l’article et passe ses données au composant.

app/routes/blog.$slug.tsx

1import { MetaTags } from "~/components/MetaTags";
2import { fetchArticle } from "~/server/articles.server";
3
4export 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
11export 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}

Désormais :

title + description changent pour chaque slug.

Dans le transcript tu as vu un mini hack : un <Link> en position: absolute qui couvre la carte entière.

app/components/ArticleCard.tsx

1import { Link, href } from "react-router";
2
3export 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}

Accessibilité OK (le h2 reste dans le flux).
SEO OK : le lien entoure réellement le titre de l’article.

Installe l’extension Meta SEO Inspector (Chrome/Firefox).

Rafraîchis la page /blog/react-router-7-et-seo.
Clique sur l’icône → tu dois voir title, description, og:image.
Zéro “missing tag” = mission accomplie.

Autre option : metatags.io te montre le rendu Google, Facebook, LinkedIn et Slack en collant simplement l’URL (ton site doit être mis en ligne).

Ces pages n’ont aucun intérêt à être référencées.

app/routes/login.tsx

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

On peut demander gentiment aux moteurs de ne pas indexer via :

{2} app/routes/login.tsx

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

Warning

Indexer les pages d’authentification gaspille le budget de crawl
et peut exposer des URL indésirables dans la SERP.

✔︎	Question
	Chaque nouvelle route appelle `<MetaTags>` ?
	Le titre contient < 60 caractères ?
	La description < 160 caractères ?
	Un `og:image` pertinent est fourni ?
	Les pages sensibles possèdent `noindex` ?

Passe le script :

Terminal

1npm run dev

…puis visite les pages clés, extension ouverte. ✅ = feu vert pour déployer.

Dans la leçon suivante nous verrons robots.txt et sitemap.xml (générés comme resource routes). Google saura quelles pages crawler… et lesquelles ignorer 😉.

Important

Push tes changements (branche dev ou main).
Observe la CI, puis partage l’URL sur Slack :
si tu vois l’image et le titre corrects, tu viens de poser la première pierre de ton SEO.

Quiz interactifTestez vos connaissances

Validez votre compréhension du module avec notre quiz interactif personnalisé.

Comprendre les concepts fondamentaux

Quelle est la principale différence entre les composants client et serveur dans React ?

Les composants serveur peuvent utiliser useState

Optimisation des performances

Quelle technique est recommandée pour éviter les rendus inutiles dans React ?

Ajouter plus d'états locaux

Architecture des données

Quel hook permet de gérer les effets de bord dans un composant React ?

useState

Débloquez ce quiz et tous les autres contenus

Leçon suivante