← Blog

Open Graph Balises dans Next.js : Le guide du développeur 2026

Next.js facilite les balises OG avec l'API de métadonnées. Voici tout ce que vous devez savoir, des images OG statiques aux images dynamiques.

Vous ne savez pas si vos balises Next.js OG sont correctes ?

Vérifiez gratuitement vos balises Open Graph avec Proovd — collez une URL et voyez exactement à quoi elle ressemble sur X, LinkedIn, Slack, Discord, WhatsApp et Reddit.

Réponse rapide

  • Next.js 13+ utilise l'API de métadonnées pour les balises OG
  • Pages statiques : exporter l'objet métadonnées
  • Pages dynamiques : utilisez generateMetadata()
  • Images OG dynamiques : utilisez @vercel/og

Next.js Routeur d'applications — Métadonnées statiques

Dans Next.js 13+ (App Router), le moyen le plus simple de définir les balises OG est l'exportation metadata dans votre mise en page ou votre fichier de page :

export const metadata = {
  title: 'My Next.js App',
  description: 'A Next.js app with OG tags',
  openGraph: {
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
  },
};

Cela génère automatiquement les balises correctes dans votre page . Next.js gère le reste.

Next.js Routeur d'applications — Métadonnées dynamiques

Pour les pages dynamiques (articles de blog, pages produits), utilisez generateMetadata() :

import { notFound } from 'next/navigation';
import { getPost } from '@/lib/posts';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Images OG dynamiques avec @vercel/og

Pour les images OG personnalisées (avec les couleurs de votre marque, les titres des articles, etc.), utilisez @vercel/og :

// app/api/og/route.ts
import { ImageResponse } from '@vercel/og';

export function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      

        

          {title}
        

      

    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Référencez ensuite cette route API dans vos métadonnées :

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
    twitter: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
  };
}

Next.js Routeur de pages

Si vous utilisez l'ancien Pages Router, utilisez next/head ou le package next-seo :

import Head from 'next/head';

export default function PostPage() {
  return (
    <Head>
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.coverImage} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={post.title} />
      <meta name="twitter:image" content={post.coverImage} />
    </Head>
  );
}

Ou utilisez next-seo pour une API plus propre :

import { NextSeo } from 'next-seo';

<NextSeo
  title={post.title}
  description={post.excerpt}
  openGraph={{
    title: post.title,
    description: post.excerpt,
    images: [{ url: post.coverImage }],
    type: 'article',
  }}
  twitter={{
    type: 'summary_large_image',
  }}
/>

Liste de contrôle des solutions rapides

  1. Utiliser l'API de métadonnées pour les pages statiques
  2. Utilisez generateMetadata() pour les pages dynamiques
  3. Définissez les propriétés openGraph et twitter
  4. Utilisez @vercel/og pour les images OG dynamiques
  5. Testez avec Proovd pour vérifier sur toutes les plateformes

Foire aux questions

Next.js affiche-t-il automatiquement les balises OG dans le HTML ?

Oui. Next.js injecte les métadonnées sous forme de balises dans le code HTML rendu par le serveur, afin que les robots d'exploration les voient sans JavaScript.

Puis-je utiliser des images OG dynamiques avec Vercel Edge Functions ?

Oui. @vercel/og fonctionne sur Vercel Edge et génère des images à la volée. L'URL de l'image est référencée dans vos métadonnées et les plateformes la récupèrent lorsqu'elles explorent votre page.

Articles connexes

Vérifiez vos Next.js balises OG sur toutes les plateformes

Vérifiez gratuitement vos balises Open Graph avec Proovd — collez une URL et voyez l'aperçu sur X, LinkedIn, Slack, Discord, WhatsApp et Reddit.