Back to Workshop resources
SEO · AEO · GEO1 min read
Open Graph in Next.js — preview cards that work.
Set once in your root layout, override per page. OG images, titles, descriptions, types.
Overview
Open Graph tags control how your URL appears when shared on LinkedIn, X, WhatsApp, and Slack. Next.js makes this trivial through the Metadata API's
openGraph field.The minimum set
• og:title (often same as page title).
• og:description (often same as meta description).
• og:url (Next.js fills this from metadataBase).
• og:image (1200×630 PNG is the safe pick).
• og:type (website for marketing pages, article for blog posts).
Generating per-page OG images
Use Next.js
ImageResponse API to generate OG images on the fly per page. Free, server-rendered, no design tool needed.Validate before you announce
LinkedIn Post Inspector and Twitter Card Validator are the two free tools to test with. Paste the URL, see the preview, iterate.
PreviousMeta tags for Next.js App Router — the Metadata API.Next JSON-LD in Next.js — structured data without a library.
Want to Apply This to Your Business?
We're a Singapore AI development and automation agency. Let's discuss how we can help solve your specific challenges.