logoNext.js
DocumentationBlogApprendre

Ajout de métadonnées

Les métadonnées sont cruciales pour le SEO et la partageabilité. Dans ce chapitre, nous verrons comment ajouter des métadonnées à votre application Next.js.

Qu'est-ce que les métadonnées ?

Dans le développement web, les métadonnées fournissent des détails supplémentaires sur une page web. Elles ne sont pas visibles par les utilisateurs visitant la page. Au lieu de cela, elles fonctionnent en arrière-plan, intégrées dans le HTML de la page, généralement dans l'élément <head>. Ces informations cachées sont cruciales pour les moteurs de recherche et autres systèmes qui doivent mieux comprendre le contenu de votre page web.

Pourquoi les métadonnées sont-elles importantes ?

Les métadonnées jouent un rôle significatif dans l'amélioration du SEO d'une page web, la rendant plus accessible et compréhensible pour les moteurs de recherche et les plateformes de médias sociaux. Des métadonnées appropriées aident les moteurs de recherche à indexer efficacement les pages web, améliorant leur classement dans les résultats de recherche. De plus, des métadonnées comme Open Graph améliorent l'apparence des liens partagés sur les médias sociaux, rendant le contenu plus attrayant et informatif pour les utilisateurs.

Types de métadonnées

Il existe différents types de métadonnées, chacun servant un objectif unique. Voici quelques types courants :

Métadonnées de titre : Responsable du titre d'une page web affiché dans l'onglet du navigateur. Crucial pour le SEO car il aide les moteurs de recherche à comprendre le sujet de la page.

<title>Titre de la page</title>

Métadonnées de description : Fournissent un bref aperçu du contenu de la page et sont souvent affichées dans les résultats des moteurs de recherche.

<meta name="description" content="Une brève description du contenu de la page." />

Métadonnées de mots-clés : Incluent les mots-clés liés au contenu de la page, aidant les moteurs de recherche à l'indexer.

<meta name="keywords" content="mot-clé1, mot-clé2, mot-clé3" />

Métadonnées Open Graph : Améliorent la façon dont une page web est représentée lorsqu'elle est partagée sur les plateformes de médias sociaux, fournissant des informations comme le titre, la description et l'image d'aperçu.

<meta property="og:title" content="Titre ici" />
<meta property="og:description" content="Description ici" />
<meta property="og:image" content="url_de_l_image_ici" />

Métadonnées Favicon : Lient le favicon (une petite icône) à la page web, affichée dans la barre d'adresse ou l'onglet du navigateur.

<link rel="icon" href="chemin/vers/favicon.ico" />

Ajout de métadonnées

Next.js propose une API de métadonnées qui peut être utilisée pour définir les métadonnées de votre application. Il existe deux façons d'ajouter des métadonnées à votre application :

  • Basé sur la configuration : Exportez un objet metadata statique ou une fonction generateMetadata dynamique dans un fichier layout.js ou page.js.

  • Basé sur les fichiers : Next.js propose une gamme de fichiers spéciaux spécifiquement utilisés pour les métadonnées :

    • favicon.ico, apple-icon.jpg, et icon.jpg : Utilisés pour les favicons et icônes
    • opengraph-image.jpg et twitter-image.jpg : Employés pour les images de médias sociaux
    • robots.txt : Fournit des instructions pour l'exploration par les moteurs de recherche
    • sitemap.xml : Donne des informations sur la structure du site web

Vous avez la flexibilité d'utiliser ces fichiers pour des métadonnées statiques, ou vous pouvez les générer programmatiquement dans votre projet.

Avec ces deux options, Next.js générera automatiquement les éléments <head> pertinents pour vos pages.

Favicon et image Open Graph

Dans votre dossier /public, vous remarquerez que vous avez deux images : favicon.ico et opengraph-image.jpg.

Déplacez ces images à la racine de votre dossier /app.

Après cela, Next.js identifiera et utilisera automatiquement ces fichiers comme favicon et image OG. Vous pouvez vérifier cela en inspectant l'élément <head> de votre application dans les outils de développement.

Bon à savoir : Vous pouvez également créer des images OG dynamiques en utilisant le constructeur ImageResponse.

Titre et descriptions de page

Vous pouvez également inclure un objet metadata depuis n'importe quel fichier layout.js ou page.js pour ajouter des informations supplémentaires comme le titre et la description. Toutes les métadonnées dans layout.js seront héritées par toutes les pages qui l'utilisent.

Dans votre layout racine, créez un nouvel objet metadata avec les champs suivants :

/app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Tableau de bord Acme',
  description: Le tableau de bord officiel du cours Next.js, construit avec le Routeur d\'application.,
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
 
export default function RootLayout() {
  // ...
}

Next.js ajoutera automatiquement le titre et les métadonnées à votre application.

Mais que faire si vous souhaitez ajouter un titre personnalisé pour une page spécifique ? Vous pouvez le faire en ajoutant un objet metadata à la page elle-même. Les métadonnées dans les pages imbriquées remplaceront celles du parent.

Par exemple, dans la page /dashboard/invoices, vous pouvez mettre à jour le titre de la page :

/app/dashboard/invoices/page.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Factures | Tableau de bord Acme',
};

Cela fonctionne, mais nous répétons le titre de l'application sur chaque page. Si quelque chose change, comme le nom de l'entreprise, vous devrez le mettre à jour sur chaque page.

À la place, vous pouvez utiliser le champ title.template dans l'objet metadata pour définir un modèle pour vos titres de page. Ce modèle peut inclure le titre de la page et toute autre information que vous souhaitez inclure.

Dans votre layout racine, mettez à jour l'objet metadata pour inclure un modèle :

/app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Tableau de bord Acme',
    default: 'Tableau de bord Acme',
  },
  description: Le tableau de bord officiel du cours Next.js construit avec le Routeur d\'application.,
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

Le %s dans le modèle sera remplacé par le titre spécifique de la page.

Maintenant, dans votre page /dashboard/invoices, vous pouvez ajouter le titre de la page :

/app/dashboard/invoices/page.tsx
export const metadata: Metadata = {
  title: 'Factures',
};

Naviguez vers la page /dashboard/invoices et inspectez l'élément <head>. Vous devriez voir que le titre de la page est maintenant Factures | Tableau de bord Acme.

Pratique : Ajout de métadonnées

Maintenant que vous avez appris sur les métadonnées, entraînez-vous en ajoutant des titres à vos autres pages :

  1. Page /login.
  2. Page /dashboard/.
  3. Page /dashboard/customers.
  4. Page /dashboard/invoices/create.
  5. Page /dashboard/invoices/[id]/edit.

L'API de métadonnées de Next.js est puissante et flexible, vous donnant un contrôle total sur les métadonnées de votre application. Ici, nous vous avons montré comment ajouter des métadonnées basiques, mais vous pouvez ajouter de nombreux autres champs, y compris keywords, robots, canonical, et plus encore. N'hésitez pas à explorer la documentation et à ajouter toutes les métadonnées supplémentaires que vous souhaitez à votre application.

Ajout de l'authentification

Ajoutez une authentification pour protéger vos routes de tableau de bord en utilisant NextAuth.js, les actions serveur et le middleware.

On this page