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

Tony Thomás

Web3

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

This comprehensive guide covers everything you need to optimize your Next.js website for search engines. You will learn how to set static and dynamic metadata, create sitemaps and robots.txt files, configure caching for fast page loads, and connect your website to Google Search Console. The tutorial also includes tips for dynamically generating Open Graph images and using server and client components effectively.

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

<p>for me this was the best tutorial on seo for nextjs</p>
