Comment référencer une page sur Google

Dans cette leçon on va apprendre à référencer vos pages React Router 7 : créer la fonction meta pour titles, descriptions et images OG dynamiques.

4 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

Dans cette leçon, tu vas découvrir comment ajouter des balises meta dans tes routes React Router 7 pour améliorer le référencement sur Google et la prévisualisation sur les réseaux sociaux (Twitter, Facebook, LinkedIn…). On voit :

  1. Pourquoi et où déclarer la fonction meta
  2. La configuration par défaut dans root.tsx
  3. L’ajout de meta statiques dans une route simple
  4. La génération de meta dynamiques pour une route paramétrée
  5. Comment protéger le meta en cas d’erreur

Pourquoi déclarer des balises meta

Les moteurs de recherche (Google, Bing…) et les réseaux sociaux lisent les balises <title> et <meta name="description"> pour :

  • Afficher le titre et la description dans les résultats de recherche
  • Générer la prévisualisation lors d’un partage (og:title, og:description, og:image)
  • Améliorer le SEO (ranking) et l’expérience utilisateur

Sans ces balises, Google va extraire du contenu aléatoire de ta page, et tes partages sur Slack, Twitter, Facebook risquent d’être peu explicites.

Ajouter un meta par défaut dans root.tsx

Commence par définir un titre et une description par défaut dans le point d’entrée de ton app (root.tsx). Ces valeurs seront utilisées si aucune route ne surcharge meta.

app/root.tsx
1
import { Meta, Links, Outlet, Scripts } from "react-router";

2


3
export function meta() {

4
  return [

5
    { title: "Mon super site | Algomax" },

6
    { name: "description", content: "Découvre React Router 7 avec Algomax" },

7
  ];

8
}

9


10
// … dans ton composant Layout()

11
<head>

12
  <Meta />   // ^? Insère les balises meta dynamiques

13
  <Links />

14
</head>

Surcharger la meta dans une route statique

Pour une page statique, par exemple la liste des utilisateurs, ajoute un export meta() dans app/routes/users.tsx :

app/routes/users.tsx
1
export function meta() {

2
  return [

3
    { title: "Liste des utilisateurs" },

4
    { name: "description", content: "Tous les utilisateurs enregistrés" },

5
    { property: "og:title", content: "Utilisateurs Algomax" },

6
  ];

7
}

8


9
export default function Users() {

10
  // render…

11
}

Les balises renvoyées par cette fonction remplaceront celles du root.tsx uniquement pour cette route.

Générer des meta dynamiques dans une route paramétrée

Sur une route dynamique ($userSlug.tsx), on utilise les données chargées par le loader pour créer un titre personnalisé :

app/routes/users.$userSlug.tsx
1
import { useLoaderData } from "react-router";

2
import type { Route } from "./+types/users.$userSlug";

3


4
export async function loader({ params }: Route.LoaderArgs) {

5
  const user = await getUserBySlug(params.userSlug);

6
  if (!user) throw new Response("Not found", { status: 404 });

7
  return { user };

8
}

9


10
export function meta({ data }: Route.MetaArgs<Route.Info>) {

11
  if (!data) {

12
    return [

13
      { title: "Utilisateur non trouvé" },

14
      { name: "description", content: "Ce profil n'existe pas" },

15
    ];

16
  }

17
  return [

18
    { title: `${data.user.name} • Profil` },

19
    {

20
      name: "description",

21
      content: `Découvre le profil de ${data.user.name} sur Algomax`,

22
    },

23
    {

24
      property: "og:image",

25
      content: data.user.avatarUrl, // ^? URL de l’image de profil

26
    },

27
  ];

28
}

29


30
export default function UserProfile() {

31
  const { user } = useLoaderData<typeof loader>();

32
  // render…

33
}

Dans meta({ data }), data est le résultat du loader. Si data est undefined à cause d’une erreur 404, on renvoie un meta adapté.

Points clés

  • export function meta() permet de définir toutes les balises meta pour une route
  • <Meta /> dans root.tsx injecte ces balises dans le <head>
  • Les valeurs statiques et dynamiques se configurent route par route
  • Prends soin de gérer le cas d’erreur pour éviter de référencer un contenu manquant
  • Pour aller plus loin, consulte le module Maîtrise le SEO dans React Router 7

Exercices rapides

  1. Page « À propos » statique
    • Crée /about.tsx, ajoute un meta() avec un titre et une description centrés sur ta formation.
  2. Blocage d’indexation
    • Sur la page de confirmation (/merci), exporte un meta <meta name="robots" content="noindex" />.
  3. Image sociale dynamique
    • Modifie la route users.$userSlug.tsx pour inclure <meta property="og:image" seulement si l’utilisateur a un coverUrl.
Inclus
Quiz interactifTestez vos connaissances
Validez votre compréhension du module avec notre quiz interactif personnalisé.
1

Comprendre les concepts fondamentaux

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

Les composants client s'exécutent uniquement dans le navigateur
Les composants serveur peuvent utiliser useState
2

Optimisation des performances

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

Utiliser React.memo pour les composants fonctionnels
Ajouter plus d'états locaux
3

Architecture des données

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

useEffect
useState

Débloquez ce quiz et tous les autres contenus