Back to Workshop resources
SEO · AEO · GEO1 min read
Meta tags for Next.js App Router — the Metadata API.
Per-page title, description, OG, Twitter. The Metadata API in two pages.
Overview
The Next.js Metadata API generates the right
<head> tags from a TypeScript export. It's the cleanest way to manage SEO across a multi-page site.Root layout sets defaults
Export a
metadata: Metadata from src/app/layout.tsx. Set metadataBase, default title with template, default description, default Open Graph image.Per-page overrides
Each page exports its own
metadata. The title template (%s — Your Site) merges with the page title automatically.Dynamic pages use generateMetadata
For dynamic routes (e.g. /blog/[slug]), export
async function generateMetadata({params}) that returns the Metadata object. Read the slug, look up the post, return the right tags.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.