logoNext.js Français
DocumentationBlogApprendre
Introduction/Référence API/Fonctions/generateMetadata

Objet Metadata et options generateMetadata

Cette page couvre toutes les options Metadata basées sur la configuration avec generateMetadata et l'objet metadata statique.

import { Metadata } from 'next'

// soit Metadata statique
export const metadata: Metadata = {
  title: '...',
}

// soit Metadata dynamique
export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}
// soit Metadata statique
export const metadata = {
  title: '...',
}

// soit Metadata dynamique
export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}

Bon à savoir :

  • L'objet metadata et la fonction generateMetadata sont uniquement pris en charge dans les composants serveur.
  • Vous ne pouvez pas exporter à la fois l'objet metadata et la fonction generateMetadata depuis le même segment de route.

L'objet metadata

Pour définir des métadonnées statiques, exportez un objet Metadata depuis un fichier layout.js ou page.js.

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: '...',
  description: '...',
}

export default function Page() {}
export const metadata = {
  title: '...',
  description: '...',
}

export default function Page() {}

Voir les Champs Metadata pour une liste complète des options prises en charge.

Fonction generateMetadata

Les métadonnées dynamiques qui dépendent d'informations dynamiques, comme les paramètres de route actuels, des données externes ou les metadata des segments parents, peuvent être définies en exportant une fonction generateMetadata qui retourne un objet Metadata.

import { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // lire les paramètres de route
  const id = params.id

  // récupérer les données
  const product = await fetch(`https://.../${id}`).then((res) => res.json())

  // optionnellement accéder et étendre (plutôt que remplacer) les métadonnées parentes
  const previousImages = (await parent).openGraph?.images || []

  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}

export default function Page({ params, searchParams }: Props) {}
export async function generateMetadata({ params, searchParams }, parent) {
  // lire les paramètres de route
  const id = params.id

  // récupérer les données
  const product = await fetch(`https://.../${id}`).then((res) => res.json())

  // optionnellement accéder et étendre (plutôt que remplacer) les métadonnées parentes
  const previousImages = (await parent).openGraph?.images || []

  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}

export default function Page({ params, searchParams }) {}

Paramètres

La fonction generateMetadata accepte les paramètres suivants :

  • props - Un objet contenant les paramètres de la route actuelle :

    • params - Un objet contenant les paramètres de route dynamique depuis le segment racine jusqu'au segment où generateMetadata est appelée. Exemples :

      RouteURLparams
      app/shop/[slug]/page.js/shop/1{ slug: '1' }
      app/shop/[tag]/[item]/page.js/shop/1/2{ tag: '1', item: '2' }
      app/shop/[...slug]/page.js/shop/1/2{ slug: ['1', '2'] }

    • searchParams - Un objet contenant les paramètres de recherche de l'URL actuelle. Exemples :

      URLsearchParams
      /shop?a=1{ a: '1' }
      /shop?a=1&b=2{ a: '1', b: '2' }
      /shop?a=1&a=2{ a: ['1', '2'] }

  • parent - Une promesse des métadonnées résolues des segments de route parents.

Valeur retournée

generateMetadata doit retourner un objet Metadata contenant un ou plusieurs champs de métadonnées.

Bon à savoir :

  • Si les métadonnées ne dépendent pas d'informations dynamiques, elles doivent être définies avec l'objet statique metadata plutôt qu'avec generateMetadata.
  • Les requêtes fetch sont automatiquement mémoïsées pour les mêmes données entre generateMetadata, generateStaticParams, les Layouts, les Pages et les composants serveur. Le cache de React peut être utilisé si fetch n'est pas disponible.
  • searchParams n'est disponible que dans les segments page.js.
  • Les méthodes Next.js redirect() et notFound() peuvent aussi être utilisées dans generateMetadata.

Champs Metadata

title

L'attribut title est utilisé pour définir le titre du document. Il peut être défini comme une simple chaîne ou un objet template optionnel.

Chaîne

layout.js | page.js
export const metadata = {
  title: 'Next.js',
}
<head> output
<title>Next.js</title>

Objet template

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '...',
    default: '...',
    absolute: '...',
  },
}
export const metadata = {
  title: {
    default: '...',
    template: '...',
    absolute: '...',
  },
}
Default

title.default peut être utilisé pour fournir un titre de repli aux segments de route enfants qui ne définissent pas de title.

app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: 'Acme',
  },
}
app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {}

// Output : <title>Acme</title>
Template

title.template peut être utilisé pour ajouter un préfixe ou un suffixe aux titles définis dans les segments de route enfants.

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme', // un default est requis lors de la création d'un template
  },
}
export const metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme', // un default est requis lors de la création d'un template
  },
}
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About',
}

// Output : <title>About | Acme</title>
export const metadata = {
  title: 'About',
}

// Output : <title>About | Acme</title>

Bon à savoir :

  • title.template s'applique aux segments de route enfants et non au segment où il est défini. Cela signifie :

    • title.default est requis lorsque vous ajoutez un title.template.
    • title.template défini dans layout.js ne s'appliquera pas à un title défini dans un page.js du même segment de route.
    • title.template défini dans page.js n'a aucun effet car une page est toujours le segment terminal (elle n'a pas de segments de route enfants).

  • title.template n'a aucun effet si une route n'a pas défini de title ou title.default.

Absolute

title.absolute peut être utilisé pour fournir un titre qui ignore le title.template défini dans les segments parents.

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
  },
}
export const metadata = {
  title: {
    template: '%s | Acme',
  },
}
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    absolute: 'About',
  },
}

// Output : <title>About</title>
export const metadata = {
  title: {
    absolute: 'About',
  },
}

// Output : <title>About</title>

Bon à savoir :

  • layout.js

    • title (chaîne) et title.default définissent le titre par défaut pour les segments enfants (qui ne définissent pas leur propre title). Il augmentera le title.template du segment parent le plus proche s'il existe.
    • title.absolute définit le titre par défaut pour les segments enfants. Il ignore le title.template des segments parents.
    • title.template définit un nouveau template de titre pour les segments enfants.

  • page.js

    • Si une page ne définit pas son propre titre, le titre résolu du parent le plus proche sera utilisé.
    • title (chaîne) définit le titre de la route. Il augmentera le title.template du segment parent le plus proche s'il existe.
    • title.absolute définit le titre de la route. Il ignore le title.template des segments parents.
    • title.template n'a aucun effet dans page.js car une page est toujours le segment terminal d'une route.

description

layout.js | page.js
export const metadata = {
  description: 'The React Framework for the Web',
}
<head> output
<meta name="description" content="The React Framework for the Web" />

Champs de base

layout.js | page.js
export const metadata = {
  generator: 'Next.js',
  applicationName: 'Next.js',
  referrer: 'origin-when-cross-origin',
  keywords: ['Next.js', 'React', 'JavaScript'],
  authors: [{ name: 'Seb' }, { name: 'Josh', url: 'https://nextjs.org' }],
  creator: 'Jiachi Liu',
  publisher: 'Sebastian Markbåge',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
}
<head> output
<meta name="application-name" content="Next.js" />
<meta name="author" content="Seb" />
<link rel="author" href="https://nextjs.org" />
<meta name="author" content="Josh" />
<meta name="generator" content="Next.js" />
<meta name="keywords" content="Next.js,React,JavaScript" />
<meta name="referrer" content="origin-when-cross-origin" />
<meta name="color-scheme" content="dark" />
<meta name="creator" content="Jiachi Liu" />
<meta name="publisher" content="Sebastian Markbåge" />
<meta name="format-detection" content="telephone=no, address=no, email=no" />

metadataBase

metadataBase est une option pratique pour définir un préfixe d'URL de base pour les champs metadata qui nécessitent une URL complète.

  • metadataBase permet aux champs metadata basés sur des URL définis dans le segment de route actuel et en dessous d'utiliser un chemin relatif au lieu d'une URL absolue normalement requise.
  • Le chemin relatif du champ sera combiné avec metadataBase pour former une URL complète.
  • Si non configuré, metadataBase est automatiquement rempli avec une valeur par défaut.
layout.js | page.js
export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}
<head> output
<link rel="canonical" href="https://acme.com" />
<link rel="alternate" hreflang="en-US" href="https://acme.com/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://acme.com/de-DE" />
<meta property="og:image" content="https://acme.com/og-image.png" />

Bon à savoir :

  • metadataBase est généralement défini dans le app/layout.js racine pour s'appliquer aux champs metadata basés sur des URL dans toutes les routes.
  • Tous les champs metadata basés sur des URL qui nécessitent des URL absolues peuvent être configurés avec une option metadataBase.
  • metadataBase peut contenir un sous-domaine, par exemple https://app.acme.com ou un chemin de base, par exemple https://acme.com/start/from/here.
  • Si un champ metadata fournit une URL absolue, metadataBase sera ignoré.
  • Utiliser un chemin relatif dans un champ metadata basé sur des URL sans configurer de metadataBase provoquera une erreur de build.
  • Next.js normalisera les doubles barres obliques entre metadataBase (par exemple https://acme.com/) et un champ relatif (par exemple /path) en une seule barre oblique (par exemple https://acme.com/path).

Valeur par défaut

Si non configuré, metadataBase a une valeur par défaut :

  • Lorsque VERCEL_URL est détecté : https://${process.env.VERCEL_URL}, sinon il revient à http://localhost:${process.env.PORT || 3000}.
  • Lors du remplacement de la valeur par défaut, nous recommandons d'utiliser des variables d'environnement pour calculer l'URL. Cela permet de configurer une URL pour les environnements de développement local, de staging et de production.

Composition d'URL

La composition d'URL privilégie l'intention du développeur plutôt que la sémantique par défaut de traversée de répertoire.

  • Les barres obliques finales entre metadataBase et les champs metadata sont normalisées.
  • Un chemin "absolu" dans un champ metadata (qui remplacerait normalement tout le chemin de l'URL) est traité comme un chemin "relatif" (commençant à la fin de metadataBase).

Par exemple, avec le metadataBase suivant :

import { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://acme.com'),
}
export const metadata = {
  metadataBase: new URL('https://acme.com'),
}

Tous les champs metadata qui héritent du metadataBase ci-dessus et définissent leur propre valeur seront résolus comme suit :

Champ metadataURL résolue
/https://acme.com
./https://acme.com
paymentshttps://acme.com/payments
/paymentshttps://acme.com/payments
./paymentshttps://acme.com/payments
../paymentshttps://acme.com/payments
https://beta.acme.com/paymentshttps://beta.acme.com/payments

openGraph

layout.js | page.js
export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'Le Framework React pour le Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png', // Doit être une URL absolue
        width: 800,
        height: 600,
      },
      {
        url: 'https://nextjs.org/og-alt.png', // Doit être une URL absolue
        width: 1800,
        height: 1600,
        alt: 'Mon texte alternatif personnalisé',
      },
    ],
    videos: [
      {
        url: 'https://nextjs.org/video.mp4', // Doit être une URL absolue
        width: 800,
        height: 600,
      },
    ],
    audio: [
      {
        url: 'https://nextjs.org/audio.mp3', // Doit être une URL absolue
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}
<head> output
<meta property="og:title" content="Next.js" />
<meta property="og:description" content="Le Framework React pour le Web" />
<meta property="og:url" content="https://nextjs.org/" />
<meta property="og:site_name" content="Next.js" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:url" content="https://nextjs.org/og.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image:url" content="https://nextjs.org/og-alt.png" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="1600" />
<meta property="og:image:alt" content="Mon texte alternatif personnalisé" />
<meta property="og:video" content="https://nextjs.org/video.mp4" />
<meta property="og:video:width" content="800" />
<meta property="og:video:height" content="600" />
<meta property="og:audio" content="https://nextjs.org/audio.mp3" />
<meta property="og:type" content="website" />
layout.js | page.js
export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'Le Framework React pour le Web',
    type: 'article',
    publishedTime: '2023-01-01T00:00:00.000Z',
    authors: ['Seb', 'Josh'],
  },
}
<head> output
<meta property="og:title" content="Next.js" />
<meta property="og:description" content="Le Framework React pour le Web" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2023-01-01T00:00:00.000Z" />
<meta property="article:author" content="Seb" />
<meta property="article:author" content="Josh" />

Bon à savoir :

  • Il peut être plus pratique d'utiliser l'API de métadonnées basée sur les fichiers pour les images Open Graph. Plutôt que de devoir synchroniser l'export de configuration avec les fichiers réels, l'API basée sur les fichiers générera automatiquement les métadonnées correctes pour vous.

robots

import type { Metadata } from 'next'

export const metadata: Metadata = {
  robots: {
    index: false,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: false,
      noimageindex: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}
<head> output
<meta name="robots" content="noindex, follow, nocache" />
<meta
  name="googlebot"
  content="index, nofollow, noimageindex, max-video-preview:-1, max-image-preview:large, max-snippet:-1"
/>

icons

Bon à savoir : Nous recommandons d'utiliser l'API de métadonnées basée sur les fichiers pour les icônes lorsque c'est possible. Plutôt que de devoir synchroniser l'export de configuration avec les fichiers réels, l'API basée sur les fichiers générera automatiquement les métadonnées correctes pour vous.

layout.js | page.js
export const metadata = {
  icons: {
    icon: '/icon.png',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png',
    },
  },
}
<head> output
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
  rel="apple-touch-icon-precomposed"
  href="/apple-touch-icon-precomposed.png"
/>
layout.js | page.js
export const metadata = {
  icons: {
    icon: [
      { url: '/icon.png' },
      new URL('/icon.png', 'https://example.com'),
      { url: '/icon-dark.png', media: '(prefers-color-scheme: dark)' },
    ],
    shortcut: ['/shortcut-icon.png'],
    apple: [
      { url: '/apple-icon.png' },
      { url: '/apple-icon-x3.png', sizes: '180x180', type: 'image/png' },
    ],
    other: [
      {
        rel: 'apple-touch-icon-precomposed',
        url: '/apple-touch-icon-precomposed.png',
      },
    ],
  },
}
<head> output
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="icon" href="https://example.com/icon.png" />
<link rel="icon" href="/icon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
  rel="apple-touch-icon-precomposed"
  href="/apple-touch-icon-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  href="/apple-icon-x3.png"
  sizes="180x180"
  type="image/png"
/>

Bon à savoir : Les balises meta msapplication-* ne sont plus prises en charge dans les versions Chromium de Microsoft Edge, et ne sont donc plus nécessaires.

themeColor

Déprécié : L'option themeColor dans metadata est dépréciée depuis Next.js 14. Veuillez utiliser la configuration viewport à la place.

manifest

Un manifeste d'application web, tel que défini dans la spécification Web Application Manifest.

layout.js | page.js
export const metadata = {
  manifest: 'https://nextjs.org/manifest.json',
}
<head> output
<link rel="manifest" href="https://nextjs.org/manifest.json" />

twitter

La spécification Twitter est (étonnamment) utilisée pour plus que X (anciennement connu sous le nom de Twitter).

En savoir plus sur la référence de balisage Twitter Card.

layout.js | page.js
export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Next.js',
    description: 'Le Framework React pour le Web',
    siteId: '1467726470533754880',
    creator: '@nextjs',
    creatorId: '1467726470533754880',
    images: ['https://nextjs.org/og.png'], // Doit être une URL absolue
  },
}
<head> output
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site:id" content="1467726470533754880" />
<meta name="twitter:creator" content="@nextjs" />
<meta name="twitter:creator:id" content="1467726470533754880" />
<meta name="twitter:title" content="Next.js" />
<meta name="twitter:description" content="Le Framework React pour le Web" />
<meta name="twitter:image" content="https://nextjs.org/og.png" />
layout.js | page.js
export const metadata = {
  twitter: {
    card: 'app',
    title: 'Next.js',
    description: 'Le Framework React pour le Web',
    siteId: '1467726470533754880',
    creator: '@nextjs',
    creatorId: '1467726470533754880',
    images: {
      url: 'https://nextjs.org/og.png',
      alt: 'Logo Next.js',
    },
    app: {
      name: 'twitter_app',
      id: {
        iphone: 'twitter_app://iphone',
        ipad: 'twitter_app://ipad',
        googleplay: 'twitter_app://googleplay',
      },
      url: {
        iphone: 'https://iphone_url',
        ipad: 'https://ipad_url',
      },
    },
  },
}
<head> output
<meta name="twitter:site:id" content="1467726470533754880" />
<meta name="twitter:creator" content="@nextjs" />
<meta name="twitter:creator:id" content="1467726470533754880" />
<meta name="twitter:title" content="Next.js" />
<meta name="twitter:description" content="Le Framework React pour le Web" />
<meta name="twitter:card" content="app" />
<meta name="twitter:image" content="https://nextjs.org/og.png" />
<meta name="twitter:image:alt" content="Logo Next.js" />
<meta name="twitter:app:name:iphone" content="twitter_app" />
<meta name="twitter:app:id:iphone" content="twitter_app://iphone" />
<meta name="twitter:app:id:ipad" content="twitter_app://ipad" />
<meta name="twitter:app:id:googleplay" content="twitter_app://googleplay" />
<meta name="twitter:app:url:iphone" content="https://iphone_url" />
<meta name="twitter:app:url:ipad" content="https://ipad_url" />
<meta name="twitter:app:name:ipad" content="twitter_app" />
<meta name="twitter:app:name:googleplay" content="twitter_app" />

viewport

Déprécié : L'option viewport dans metadata est dépréciée depuis Next.js 14. Veuillez utiliser la configuration viewport à la place.

verification

layout.js | page.js
export const metadata = {
  verification: {
    google: 'google',
    yandex: 'yandex',
    yahoo: 'yahoo',
    other: {
      me: ['mon-email', 'mon-lien'],
    },
  },
}
<head> output
<meta name="google-site-verification" content="google" />
<meta name="y_key" content="yahoo" />
<meta name="yandex-verification" content="yandex" />
<meta name="me" content="mon-email" />
<meta name="me" content="mon-lien" />

appleWebApp

layout.js | page.js
export const metadata = {
  itunes: {
    appId: 'myAppStoreID',
    appArgument: 'myAppArgument',
  },
  appleWebApp: {
    title: 'Application Web Apple',
    statusBarStyle: 'black-translucent',
    startupImage: [
      '/assets/startup/apple-touch-startup-image-768x1004.png',
      {
        url: '/assets/startup/apple-touch-startup-image-1536x2008.png',
        media: '(device-width: 768px) and (device-height: 1024px)',
      },
    ],
  },
}
<head> output
<meta
  name="apple-itunes-app"
  content="app-id=myAppStoreID, app-argument=myAppArgument"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Application Web Apple" />
<link
  href="/assets/startup/apple-touch-startup-image-768x1004.png"
  rel="apple-touch-startup-image"
/>
<link
  href="/assets/startup/apple-touch-startup-image-1536x2008.png"
  media="(device-width: 768px) and (device-height: 1024px)"
  rel="apple-touch-startup-image"
/>
<meta
  name="apple-mobile-web-app-status-bar-style"
  content="black-translucent"
/>

alternates

layout.js | page.js
export const metadata = {
  alternates: {
    canonical: 'https://nextjs.org',
    languages: {
      'en-US': 'https://nextjs.org/en-US',
      'de-DE': 'https://nextjs.org/de-DE',
    },
    media: {
      'only screen and (max-width: 600px)': 'https://nextjs.org/mobile',
    },
    types: {
      'application/rss+xml': 'https://nextjs.org/rss',
    },
  },
}
<head> output
<link rel="canonical" href="https://nextjs.org" />
<link rel="alternate" hreflang="en-US" href="https://nextjs.org/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://nextjs.org/de-DE" />
<link
  rel="alternate"
  media="only screen and (max-width: 600px)"
  href="https://nextjs.org/mobile"
/>
<link
  rel="alternate"
  type="application/rss+xml"
  href="https://nextjs.org/rss"
/>
layout.js | page.js
export const metadata = {
  appLinks: {
    ios: {
      url: 'https://nextjs.org/ios',
      app_store_id: 'app_store_id',
    },
    android: {
      package: 'com.example.android/package',
      app_name: 'app_name_android',
    },
    web: {
      url: 'https://nextjs.org/web',
      should_fallback: true,
    },
  },
}
<head> output
<meta property="al:ios:url" content="https://nextjs.org/ios" />
<meta property="al:ios:app_store_id" content="app_store_id" />
<meta property="al:android:package" content="com.example.android/package" />
<meta property="al:android:app_name" content="app_name_android" />
<meta property="al:web:url" content="https://nextjs.org/web" />
<meta property="al:web:should_fallback" content="true" />

archives

Décrit une collection d'enregistrements, de documents ou d'autres matériaux d'intérêt historique (source).

layout.js | page.js
export const metadata = {
  archives: ['https://nextjs.org/13'],
}
<head> output
<link rel="archives" href="https://nextjs.org/13" />

assets

layout.js | page.js
export const metadata = {
  assets: ['https://nextjs.org/assets'],
}
<head> output
<link rel="assets" href="https://nextjs.org/assets" />

bookmarks

layout.js | page.js
export const metadata = {
  bookmarks: ['https://nextjs.org/13'],
}
<head> output
<link rel="bookmarks" href="https://nextjs.org/13" />

category

layout.js | page.js
export const metadata = {
  category: 'technologie',
}
<head> output
<meta name="category" content="technologie" />

facebook

Vous pouvez connecter une application Facebook ou un compte Facebook à votre page web pour certains plugins sociaux Facebook Documentation Facebook

Bon à savoir : Vous pouvez spécifier soit appId, soit admins, mais pas les deux.

layout.js | page.js
export const metadata = {
  facebook: {
    appId: '12345678',
  },
}
<head> output
<meta property="fb:app_id" content="12345678" />
layout.js | page.js
export const metadata = {
  facebook: {
    admins: '12345678',
  },
}
<head> output
<meta property="fb:admins" content="12345678" />

Si vous souhaitez générer plusieurs balises meta fb:admins, vous pouvez utiliser une valeur de tableau.

layout.js | page.js
export const metadata = {
  facebook: {
    admins: ['12345678', '87654321'],
  },
}
<head> output
<meta property="fb:admins" content="12345678" />
<meta property="fb:admins" content="87654321" />

other

Toutes les options de métadonnées devraient être couvertes par le support intégré. Cependant, il peut y avoir des balises meta personnalisées spécifiques à votre site, ou de nouvelles balises meta venant d'être publiées. Vous pouvez utiliser l'option other pour afficher n'importe quelle balise meta personnalisée.

layout.js | page.js
export const metadata = {
  other: {
    custom: 'meta',
  },
}
<head> output
<meta name="custom" content="meta" />

Si vous souhaitez générer plusieurs balises meta avec la même clé, vous pouvez utiliser une valeur de tableau.

layout.js | page.js
export const metadata = {
  other: {
    custom: ['meta1', 'meta2'],
  },
}
<head> output
<meta name="custom" content="meta1" /> <meta name="custom" content="meta2" />

Métadonnées non prises en charge

Les types de métadonnées suivants ne sont actuellement pas pris en charge nativement. Cependant, ils peuvent toujours être rendus dans la mise en page ou la page elle-même.

MétadonnéeRecommandation
<meta http-equiv="...">Utilisez les en-têtes HTTP appropriés via redirect(), Middleware, En-têtes de sécurité
<base>Affichez la balise dans la mise en page ou la page elle-même.
<noscript>Affichez la balise dans la mise en page ou la page elle-même.
<style>En savoir plus sur le style dans Next.js.
<script>En savoir plus sur l'utilisation des scripts.
<link rel="stylesheet" />importez directement les feuilles de style dans la mise en page ou la page elle-même.
<link rel="preload />Utilisez la méthode preload de ReactDOM
<link rel="preconnect" />Utilisez la méthode preconnect de ReactDOM
<link rel="dns-prefetch" />Utilisez la méthode prefetchDNS de ReactDOM

Indices de ressources

L'élément <link> possède plusieurs mots-clés rel qui peuvent être utilisés pour indiquer au navigateur qu'une ressource externe est susceptible d'être nécessaire. Le navigateur utilise ces informations pour appliquer des optimisations de préchargement en fonction du mot-clé.

Bien que l'API Metadata ne prenne pas directement en charge ces indices, vous pouvez utiliser les nouvelles méthodes ReactDOM pour les insérer en toute sécurité dans le <head> du document.

'use client'

import ReactDOM from 'react-dom'

export function PreloadResources() {
  ReactDOM.preload('...', { as: '...' })
  ReactDOM.preconnect('...', { crossOrigin: '...' })
  ReactDOM.prefetchDNS('...')

  return null
}
'use client'

import ReactDOM from 'react-dom'

export function PreloadResources() {
  ReactDOM.preload('...', { as: '...' })
  ReactDOM.preconnect('...', { crossOrigin: '...' })
  ReactDOM.prefetchDNS('...')

  return null
}

Commencez à charger une ressource tôt dans le cycle de rendu de la page (navigateur). Documentation MDN.

ReactDOM.preload(href: string, options: { as: string })
<head> output
<link rel="preload" href="..." as="..." />

Initiez préventivement une connexion à une origine. Documentation MDN.

ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })
<head> output
<link rel="preconnect" href="..." crossorigin />

Tentez de résoudre un nom de domaine avant que les ressources ne soient demandées. Documentation MDN.

ReactDOM.prefetchDNS(href: string)
<head> output
<link rel="dns-prefetch" href="..." />

Bon à savoir :

  • Ces méthodes ne sont actuellement prises en charge que dans les composants clients, qui sont toujours rendus côté serveur lors du chargement initial de la page.
  • Les fonctionnalités intégrées de Next.js telles que next/font, next/image et next/script gèrent automatiquement les indices de ressources pertinents.
  • React 18.3 n'inclut pas encore les définitions de types pour ReactDOM.preload, ReactDOM.preconnect et ReactDOM.preconnectDNS. Vous pouvez utiliser // @ts-ignore comme solution temporaire pour éviter les erreurs de type.

Types

Vous pouvez ajouter une sécurité de type à vos métadonnées en utilisant le type Metadata. Si vous utilisez le plugin TypeScript intégré dans votre IDE, vous n'avez pas besoin d'ajouter manuellement le type, mais vous pouvez toujours l'ajouter explicitement si vous le souhaitez.

Objet metadata

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js',
}

Fonction generateMetadata

Fonction régulière

import type { Metadata } from 'next'

export function generateMetadata(): Metadata {
  return {
    title: 'Next.js',
  }
}

Fonction asynchrone

import type { Metadata } from 'next'

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: 'Next.js',
  }
}

Avec les props de segment

import type { Metadata } from 'next'

type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export function generateMetadata({ params, searchParams }: Props): Metadata {
  return {
    title: 'Next.js',
  }
}

export default function Page({ params, searchParams }: Props) {}

Avec les métadonnées parentes

import type { Metadata, ResolvingMetadata } from 'next'

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  return {
    title: 'Next.js',
  }
}

Projets JavaScript

Pour les projets JavaScript, vous pouvez utiliser JSDoc pour ajouter une sécurité de type.

/** @type {import("next").Metadata} */
export const metadata = {
  title: 'Next.js',
}

Historique des versions

VersionModifications
v13.2.0viewport, themeColor et colorScheme dépréciés en faveur de la configuration viewport.
v13.2.0metadata et generateMetadata introduits.

Fichiers de métadonnées

Documentation de l'API pour les conventions des fichiers de métadonnées.

generateViewport

Référence API pour la fonction generateViewport.

generateImageMetadata

Apprenez à générer plusieurs images dans un seul fichier spécial de l'API Metadata.

generateSitemaps

Apprenez à utiliser la fonction generateSiteMaps pour créer plusieurs sitemaps pour votre application.