SEO in Next.js: Metadata, Sitemap, Robots, and Structured Data

SEO in Next.js isn't about installing plugins — it's just a few files and a few functions. But figuring out what does what can get confusing, and most guides are floating around with outdated info.

This post breaks down the SEO surfaces in the App Router one by one. All the examples are from the actual code running on this very site.

1. Metadata: Static and Generated

There are two formats. For static pages, the metadata object:

// app/studio/page.tsx
export const metadata: Metadata = {
	title: "Czay Studio",
	description: "Work I've delivered for companies and brands…",
	alternates: { canonical: "https://czay.dev/studio" },
	openGraph: {
		title: "Czay Studio | Furkan Özay",
		description: "…",
		url: "https://czay.dev/studio",
	},
};

For dynamic pages, generateMetadata:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
	const { slug } = await params;
	const post = getPost(slug);
	if (!post) return {};
 
	return {
		title: post.title,
		description: post.description,
		alternates: { canonical: `https://czay.dev/blog/${slug}` },
		openGraph: {
			title: `${post.title} | Furkan Özay`,
			description: post.description,
			url: `https://czay.dev/blog/${slug}`,
			type: "article",
			publishedTime: post.date,
			modifiedTime: post.updated ?? post.date,
			authors: ["Furkan Özay"],
			tags: post.tags,
		},
	};
}

Root template

If you define a title template in layout.tsx, you don't have to keep rewriting your brand name on every single page:

export const metadata: Metadata = {
	metadataBase: new URL("https://czay.dev"),
	title: {
		default: "Furkan Özay — Fullstack Developer & Teacher",
		template: "%s | Furkan Özay",
	},
};

metadataBase is especially important: without it, relative Open Graph image URLs aren't resolved to absolute URLs, and your social sharing cards will show up blank.

2. Canonical: The most overlooked field

Every page should declare its own canonical URL. When you don't define this, different paths leading to the same content (tracking parameters, trailing slashes, the www variant) are treated as separate pages, splitting your SEO signals.

alternates: { canonical: "https://czay.dev/studio/mobile" }

This is even more critical if you keep your blog's filter state in the address bar: a list loaded with ?topic=nextjs isn't a separate page, it's just a view of the same page.

3. sitemap.ts and robots.ts

Both are simply files; you don't write raw XML anymore.

// app/sitemap.ts
export default function sitemap(): MetadataRoute.Sitemap {
	const posts = getAllPosts().map((post) => ({
		url: `https://czay.dev/blog/${post.slug}`,
		lastModified: new Date(post.updated ?? post.date),
		changeFrequency: "monthly" as const,
		priority: 0.7,
	}));
 
	return [...staticPages, ...posts];
}

// app/robots.ts
export default function robots(): MetadataRoute.Robots {
	return {
		rules: { userAgent: "*", allow: "/" },
		sitemap: "https://czay.dev/sitemap.xml",
	};
}

Also, pay attention to which pages actually go into your sitemap. On this site, service detail pages exist to be found individually; leaving them out of the sitemap would defeat that purpose:

const servicePages = studioServices
	.filter((service) => service.detail)
	.map((service) => ({
		url: `https://czay.dev/studio/${service.id}`,
		changeFrequency: "monthly" as const,
		priority: 0.8,
	}));

4. Structured Data (JSON-LD)

Next.js doesn't have a built-in API for this; you render the script tag yourself.

const jsonLd = {
	"@context": "https://schema.org",
	"@type": "BlogPosting",
	headline: post.title,
	datePublished: post.date,
	dateModified: post.updated ?? post.date,
	author: { "@type": "Person", name: "Furkan Özay" },
};
 
export default function Page() {
	return (
		<>
			<script
				type="application/ld+json"
				dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
			/>
			{/* … */}
		</>
	);
}

Using JSON.stringify is crucial: if you try to stitch the text together manually, quotes and < characters in your content will break the schema.

Set up multiple schemas using @graph

If you need to define multiple entities on a single page, instead of using separate script tags, use a single @graph — this allows entities to reference each other using @id:

{
	"@context": "https://schema.org",
	"@graph": [
		{ "@type": "Service", "@id": `${url}#service`, name: "Mobile app", /* … */ },
		{ "@type": "BreadcrumbList", "@id": `${url}#breadcrumb`, /* … */ },
		{ "@type": "FAQPage", "@id": `${url}#faq`, /* … */ },
	],
}

Don't put off-screen content in the schema

Structured data describes the actual content on the page. Adding an FAQ to your schema that doesn't exist on the rendered page violates search engine policies and can get you penalized.

5. Static Generation and generateStaticParams

The invisible half of SEO is speed. If you don't write this for dynamic routes, every page gets rebuilt on every single request:

export async function generateStaticParams() {
	return getAllPosts().map((post) => ({ slug: post.slug }));
}

The same applies to service detail pages — if you have a finite and known list, all of them should be pre-rendered at build time.

6. Open Graph Images

Next.js can generate images dynamically using code; you don't need to manually design an image for every single post:

app/blog/[slug]/opengraph-image.tsx

This file returns a React component, and Next.js renders it into a 1200×630 image. You can inject the title, tags, and reading time directly into it.

7. RSS is Still Valuable

Generating a feed with app/rss.xml/route.ts takes just a few lines of code. Even if reader counts seem low, RSS is the easiest way to push your content to aggregators and newsletters — and those inbound links are real.

Checklist

I fixed two items on this list on my own site while writing this post. The hard part of SEO isn't not knowing; it's neglecting to look back at it once it's set up.

Related post: MDX with App Router: the right way to build a blog