Comment ajouter des métadonnées et créer des images OG

Les API de métadonnées peuvent être utilisées pour définir les métadonnées de votre application afin d'améliorer le SEO et la partageabilité sur le web. Elles incluent :

L'objet statique metadata
La fonction dynamique generateMetadata
Des conventions de fichiers spéciales qui peuvent être utilisées pour ajouter des favicons et des images OG statiques ou générés dynamiquement.

Avec toutes ces options, Next.js générera automatiquement les balises <head> pertinentes pour votre page, qui peuvent être inspectées dans les outils de développement du navigateur.

Champs par défaut

Il existe deux balises meta par défaut qui sont toujours ajoutées, même si une route ne définit pas de métadonnées :

La balise meta charset définit l'encodage des caractères du site.
La balise meta viewport définit la largeur et l'échelle de la fenêtre d'affichage pour s'adapter à différents appareils.

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Les autres champs de métadonnées peuvent être définis avec l'objet Metadata (pour les métadonnées statiques) ou la fonction generateMetadata (pour les métadonnées générées).

Métadonnées statiques

Pour définir des métadonnées statiques, exportez un objet Metadata depuis un fichier layout.js ou page.js statique. Par exemple, pour ajouter un titre et une description à la route du blog :

import type { Metadata } from 'next'

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

export default function Page() {}

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

export default function Page() {}

Vous pouvez consulter la liste complète des options disponibles dans la documentation de generateMetadata.

Métadonnées générées

Vous pouvez utiliser la fonction generateMetadata pour récupérer des métadonnées qui dépendent de données. Par exemple, pour récupérer le titre et la description d'un article de blog spécifique :

import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const slug = (await params).slug

  // Récupérer les informations de l'article
  const post = await fetch(`https://api.vercel.app/blog/${slug}`).then((res) =>
    res.json()
  )

  return {
    title: post.title,
    description: post.description,
  }
}

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

En arrière-plan, Next.js diffusera les métadonnées séparément de l'interface utilisateur et les injectera dans le HTML dès qu'elles seront résolues.

Mémorisation des requêtes de données

Il peut y avoir des cas où vous devez récupérer les mêmes données pour les métadonnées et la page elle-même. Pour éviter les requêtes en double, vous pouvez utiliser la fonction cache de React pour mémoriser la valeur de retour et ne récupérer les données qu'une seule fois. Par exemple, pour récupérer les informations d'un article de blog à la fois pour les métadonnées et la page :

import { cache } from 'react'
import { db } from '@/app/lib/db'

// getPost sera utilisé deux fois, mais exécuté une seule fois
export const getPost = cache(async (slug: string) => {
  const res = await db.query.posts.findFirst({ where: eq(posts.slug, slug) })
  return res
})

Métadonnées basées sur des fichiers

Les fichiers spéciaux suivants sont disponibles pour les métadonnées :

Vous pouvez les utiliser pour des métadonnées statiques, ou générer ces fichiers dynamiquement avec du code.

Favicons

Les favicons sont de petites icônes qui représentent votre site dans les favoris et les résultats de recherche. Pour ajouter un favicon à votre application, créez un fichier favicon.ico et placez-le à la racine du dossier app.

Fichier spécial Favicon dans le dossier App avec les fichiers layout et page

Vous pouvez également générer des favicons dynamiquement avec du code. Consultez la documentation sur les favicons pour plus d'informations.

Images Open Graph statiques

Les images Open Graph (OG) sont des images qui représentent votre site sur les réseaux sociaux. Pour ajouter une image OG statique à votre application, créez un fichier opengraph-image.png à la racine du dossier app.

Fichier spécial d'image OG dans le dossier App avec les fichiers layout et page

Vous pouvez également ajouter des images OG pour des routes spécifiques en créant un fichier opengraph-image.png plus profondément dans la structure des dossiers. Par exemple, pour créer une image OG spécifique à la route /blog, ajoutez un fichier opengraph-image.jpg dans le dossier blog.

Fichier spécial d'image OG dans le dossier blog

L'image la plus spécifique prendra le pas sur toute image OG située au-dessus dans la structure des dossiers.

D'autres formats d'image tels que jpeg, png et webp sont également pris en charge. Consultez la documentation sur les images Open Graph pour plus d'informations.

Images Open Graph générées dynamiquement

Le constructeur ImageResponse vous permet de générer des images dynamiques en utilisant JSX et CSS. Ceci est utile pour les images OG qui dépendent de données.

Par exemple, pour générer une image OG unique pour chaque article de blog, ajoutez un fichier opengraph-image.ts dans le dossier blog et importez le constructeur ImageResponse depuis next/og :

import { ImageResponse } from 'next/og'
import { getPost } from '@/app/lib/data'

// Métadonnées de l'image
export const size = {
  width: 1200,
  height: 630,
}

export const contentType = 'image/png'

// Génération de l'image
export default async function Image({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)

  return new ImageResponse(
    (
      // Élément JSX ImageResponse
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {post.title}
      </div>
    )
  )
}

ImageResponse prend en charge les propriétés CSS courantes, y compris flexbox et le positionnement absolu, les polices personnalisées, le retour à la ligne du texte, le centrage et les images imbriquées. Consultez la liste complète des propriétés CSS prises en charge.

Bon à savoir :

Des exemples sont disponibles dans le Vercel OG Playground.

ImageResponse utilise @vercel/og, satori et resvg pour convertir HTML et CSS en PNG.

Seuls flexbox et un sous-ensemble de propriétés CSS sont pris en charge. Les mises en page avancées (par exemple display: grid) ne fonctionneront pas.

Comment ajouter des métadonnées et créer des images OG

Champs par défaut

Métadonnées statiques

Métadonnées générées

Mémorisation des requêtes de données

Métadonnées basées sur des fichiers

Favicons

Images Open Graph statiques

Images Open Graph générées dynamiquement

generateMetadata

generateViewport

ImageResponse

Fichiers de métadonnées

favicon, icon et apple-icon

opengraph-image et twitter-image

robots.txt

sitemap.xml

On this page