Next.js App Router SEO: Metadata, Structured Data, and i18n
Key takeaway
In one line: Technical SEO is a crawl → index → render → experience pipeline. On the Next.js App Router, aligning the Metadata API, static HTML, hreflang, and Core Web Vitals matters especially for marketing sites like itemSCV.
| Axis | Check |
|---|---|
| Crawl | sitemap, robots, internal links |
| Index | canonical, duplicate URLs |
| Render | RSC/SSG for visible body content |
Introduction
Search engine optimization (SEO) is central to a site’s visibility and reach. This post summarizes the SEO approach we applied while building the itemSCV site on Next.js—how we implemented metadata, structured data, and multilingual support—with code at each step.
1. Server-side rendering (SSR) optimization
Using Server Components
From Next.js 13 onward, React Server Components help improve initial load and make crawling more predictable.
2. Metadata optimization
Dynamic metadata
Per-page metadata improves search results and social previews.
3. Structured data
Schema.org markup
Structured data enriches how pages can appear in search.
4. Internationalization
Language detection via middleware
Middleware detects the user’s preferred language and redirects to the right locale.
5. Performance
Image optimization
We use the Next.js Image component for responsive, optimized images.
6. Semantic HTML and accessibility
ARIA labels and landmarks
Semantic HTML and ARIA improve accessibility and clarify page structure.
7. Technical SEO building blocks
Sitemap generation
A dynamic sitemap helps crawlers discover URLs.
RSS feed
An RSS feed keeps subscribers updated on new posts.
What we gained
1. Search
- Richer snippets in results
- Structured data for enhanced listings
- Faster loads supporting ranking signals
2. User experience
- Faster first paint
- Smoother navigation
- Better accessibility for all users
3. Internationalization
- Automatic detection and routing for locales
- Per-language metadata
- Clearer language targeting for indexing
Conclusion
SEO is not only technical plumbing—it is part of the user experience. Next.js gives you the pieces to align search engines and users. We will keep monitoring and iterating on these patterns.