← Blog

Open Graph Tags in Next.js: de ontwikkelaarsgids van 2026

Next.js maakt OG-tags eenvoudig met de Metadata API. Hier vindt u alles wat u moet weten: van statische tot dynamische OG-afbeeldingen.

Weet je niet zeker of je Next.js OG-tags correct zijn?

Controleer uw Open Graph-tags gratis met Proovd — plak een URL en zie precies hoe deze eruit ziet op X, LinkedIn, Slack, Discord, WhatsApp en Reddit.

Snel antwoord

  • Next.js 13+ gebruikt de Metadata API voor OG-tags
  • Statische pagina's: exporteer metadata object
  • Dynamische pagina's: gebruik generateMetadata()
  • Dynamische OG-afbeeldingen: gebruik @vercel/og

Next.js App-router — Statische metadata

In Next.js 13+ (App Router) is de eenvoudigste manier om OG-tags in te stellen de metadata export in uw lay-out of paginabestand:

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'],
  },
};

Hierdoor worden automatisch de juiste tags op uw pagina gegenereerd. Next.js zorgt voor de rest.

Next.js App-router — Dynamische metadata

Voor dynamische pagina's (blogposts, productpagina's) gebruikt u 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],
    },
  };
}

Dynamische OG-afbeeldingen met @vercel/og

Voor aangepaste OG-afbeeldingen (met uw merkkleuren, berichttitels, enz.) gebruikt u @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,
    }
  );
}

Verwijs vervolgens naar deze API-route in uw metadata:

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 Paginarouter

Als u de oudere Pages Router gebruikt, gebruikt u next/head of het pakket 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>
  );
}

Of gebruik next-seo voor een schonere API:

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',
  }}
/>

Controlelijst voor snelle reparatie

  1. Gebruik de Metadata API voor statische pagina's
  2. Gebruik generateMetadata() voor dynamische pagina's
  3. Stel zowel de eigenschappen openGraph als twitter in
  4. Gebruik @vercel/og voor dynamische OG-afbeeldingen
  5. Test met Proovd om te verifiëren op alle platforms

Veelgestelde vragen

Geeft Next.js automatisch OG-tags weer in de HTML?

Ja. Next.js injecteert de metagegevens als tags in de door de server weergegeven HTML, zodat crawlers ze zonder JavaScript kunnen zien.

Kan ik dynamische OG-afbeeldingen gebruiken met Vercel Edge Functions?

Ja. @vercel/og draait op Vercel Edge en genereert on-the-fly afbeeldingen. Er wordt naar de afbeeldings-URL verwezen in uw metadata, en platforms halen deze op wanneer ze uw pagina crawlen.

Gerelateerde artikelen

Verifieer uw Next.js OG-tags op alle platforms

Controleer uw Open Graph-tags gratis met Proovd — plak een URL en bekijk het voorbeeld op X, LinkedIn, Slack, Discord, WhatsApp en Reddit.