How do you make Next.js applications SEO-friendly?
Short answer
Use the App Router with server-side rendering or static generation so content is in the initial HTML, add per-page metadata with canonical URLs, generate a sitemap and robots.txt, and use semantic HTML and structured data.
Serve real HTML: SSR or SSG via the App Router puts your content in the initial response, which is what crawlers and AI systems read. A client-only SPA leaves an empty shell in the HTML.
Set metadata per page: title, meta description, canonical URL, Open Graph, and Twitter cards. Use a template so every page title is consistent.
Generate a sitemap.xml and robots.txt so search engines discover every page, and keep URLs clean.
Use semantic HTML — one H1 per page, proper heading hierarchy, and descriptive alt text on images — and add structured data (JSON-LD) that matches visible content: Person, Article, BreadcrumbList, and SoftwareApplication.
This portfolio is built this way: every page is server-rendered, blog posts and case studies are statically generated, and structured data references one canonical Person entity.