Next.jsSEO

Métadonnées

Next.js dispose d’une API de métadonnées qui peut être utilisée pour définir les métadonnées de votre application (par exemple, les balises meta et link à l’intérieur de l’élément head de votre HTML) afin d’améliorer le référencement (SEO) et la partageabilité sur le web.

Il existe deux façons d’ajouter des métadonnées à votre application :

  1. Métadonnées basées sur la configuration : Exportez un objet de métadonnées statiques ou une fonction dynamique generateMetadata dans un fichier layout.js ou page.js.
  2. Métadonnées basées sur des fichiers : Ajoutez des fichiers spéciaux, statiques ou générés dynamiquement, aux segments de route.

Avec ces deux options, Next.js générera automatiquement les éléments <head> pertinents pour vos pages. Vous pouvez également créer des images OG dynamiques en utilisant le constructeur ImageResponse.

Métadonnées Statiques

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

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

Métadonnées Dynamiques

Vous pouvez utiliser la fonction generateMetadata pour récupérer des métadonnées nécessitant des valeurs dynamiques.

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = (await params).id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  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) {}

Avec ces outils, vous pouvez facilement gérer les métadonnées de votre application Next.js pour améliorer son référencement et son partage sur les réseaux sociaux.

LayoutServer component