SEO in Next.js – The Ultimate Guide (Metadata, Sitemap, Robots, Google Search Console, Caching)

In this tutorial, you will learn everything you need to know about SEO (search engine optimization) in Next.js and the app router. This will work for all major versions from Next.js 13+.

Project files:
Starting code: https://github.com/codinginflow/nextjs-seo/tree/Starting-Point
opengraph-image: https://github.com/codinginflow/nextjs-seo/blob/Finished/src/app/opengraph-image.png

⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs
✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices
💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter
💬 Join our developer community on Discord: https://codinginflow.com/discord

📣 Follow Coding in Flow on social media:
Twitter: https://twitter.com/codinginflow
Instagram: https://instagram.com/codinginflow
TikTok: https://tiktok.com/@codinginflow
Facebook: https://facebook.com/codinginflow

Timestamps:
0:00 – Intro & prerequisites
2:28 – Static metadata, title template, favicon, opengraph-image, next/Font, next/Image
18:24 – Dynamic metadata (generateMetadata), React cache
28:38 – Static rendering & caching, generateStaticParams, notFound
40:48 – Server components (SSR) vs client components (CSR)
43:35 – Dynamic sitemap (sitemap.ts)
50:42 – Robots.txt & robots meta tag
55:59 – Google Search Console & Vercel Analytics connection