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
Déverrouillez votre potentiel

avec React Router 7

Vous en avez marre de...

❌ perdre du temps à chercher des informations éparpillées
❌ ne pas avoir de retour sur votre progression
Assistant IA spécialisé

Posez vos questions 24/7 à notre IA experte en React Router 7

Quiz interactifs

Validez vos acquis avec des quiz personnalisés et un feedback instantané

9 modules
45 leçons
Accès à vie
299.00€
-50%

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.
Premium
Quiz interactif
Testez vos connaissances et validez votre compréhension du module avec notre quiz interactif.
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
Les composants client sont plus rapides
Il n'y a aucune différence significative
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
Éviter d'utiliser les props
Toujours utiliser les class components
3

Architecture des données

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

useEffect
useState
useMemo
useContext
4

Gestion des erreurs

Comment implémenter la gestion des erreurs pour les requêtes API dans React ?

Utiliser try/catch avec async/await
Ignorer les erreurs
Toujours afficher un message d'erreur
Rediriger l'utilisateur
5

Déploiement et CI/CD

Quelle est la meilleure pratique pour déployer une application React en production ?

Utiliser un service CI/CD comme GitHub Actions
Copier les fichiers manuellement via FTP
Envoyer le code source complet
Ne jamais mettre à jour l'application

Débloquez ce quiz et tous les autres contenus premium en achetant ce cours

Dans cette leçon