Open Graph tags in Next.js (App Router)
Next.js heeft sinds de App Router een ingebouwde Metadata API — geen losse head-tags meer schrijven, gewoon een object exporteren. Dit is de schoonste manier van alle frameworks, mits je twee valkuilen kent: metadataBase en het verschil tussen statische en dynamische metadata.
De gratis checker toont je previews voor X, LinkedIn, Facebook, Slack en Discord.
Statisch: exporteer metadata
In elke layout.js of page.js (server component!) exporteer je een metadata-object met openGraph- en twitter-velden. Next rendert daar automatisch de juiste meta-tags van. Zie het voorbeeld hieronder.
Zet metadataBase in je root layout
Met metadataBase (bijv. new URL("https://jouwsite.nl")) worden relatieve URLs in openGraph.url en afbeeldingen automatisch absoluut gemaakt. Vergeet je dit, dan zijn je og:image-URLs relatief en negeren scrapers ze.
Dynamisch: generateMetadata
Voor pagina's met dynamische data (producten, blogposts) exporteer je async function generateMetadata({ params }) die het object teruggeeft op basis van je data. Let op: in recente Next-versies is params een Promise — eerst awaiten.
OG-afbeeldingen via file conventions
Leg een opengraph-image.png (1200×630) naast je page.js en Next koppelt hem automatisch. Wil je gegenereerde afbeeldingen (titel als tekst in het plaatje), gebruik dan ImageResponse uit next/og in een opengraph-image.js.
Codevoorbeeld
// app/layout.js — site-brede defaults
export const metadata = {
metadataBase: new URL('https://jouwsite.nl'),
title: 'Jouw sitenaam',
description: 'Wat je site doet in één zin.',
openGraph: {
title: 'Jouw sitenaam',
description: 'Wat je site doet in één zin.',
type: 'website',
url: '/',
siteName: 'Jouw sitenaam',
},
twitter: { card: 'summary_large_image' },
};
// app/blog/[slug]/page.js — dynamisch per post
export async function generateMetadata({ params }) {
const { slug } = await params;
const post = await getPost(slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
type: 'article',
url: `/blog/${slug}`,
images: [{ url: post.ogImage, width: 1200, height: 630 }],
},
};
}Veelgemaakte fouten
- metadata exporteren uit een client componentEen bestand met "use client" kan geen metadata exporteren. Houd de pagina een server component en stop interactiviteit in een child-component.
- metadataBase vergetenZonder metadataBase blijven relatieve image-URLs relatief — en die worden door scrapers genegeerd. Zet hem één keer in je root layout.
- Pages Router is andersGebruik je nog de Pages Router, dan werk je met <Head> uit next/head en schrijf je de meta-tags zelf. De Metadata API is App Router-only.
Veelgestelde vragen
Hoe maak ik dynamische OG-afbeeldingen (titel in het plaatje)?
Met ImageResponse uit next/og in een opengraph-image.js file convention: je schrijft JSX dat als PNG gerenderd wordt op het moment dat een scraper de afbeelding opvraagt.
Worden layout- en page-metadata samengevoegd?
Ja — page-metadata overschrijft layout-metadata per veld. Defaults in de layout, specifieke waarden per pagina.
Werken mijn tags ook bij client-side navigatie?
Voor scrapers is alleen de server-response relevant, en die is bij Next altijd goed — scrapers doen een verse request per URL.
Plak je URL en zie binnen twee seconden of alles klopt — op elk platform.