SEO in Next.js 14 - 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.
Project files:
Starting code: github.com/codinginflow/nextj...
opengraph-image: github.com/codinginflow/nextj...
⭐ Get my full-stack Next.js with Express & TypeScript course: codinginflow.com/nextjs
✅ Get my free React Best Practices course: www.codinginflow.com/reactbes...
💌 Join my newsletter for regular web dev tips: codinginflow.com/newsletter
💬 Join our developer community on Discord: codinginflow.com/discord
📣 Follow Coding in Flow on social media:
Twitter: / codinginflow
Instagram: / codinginflow
TikTok: / codinginflow
Facebook: / 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

Пікірлер: 152

  • @benb1987
    @benb19874 ай бұрын

    Brilliant guide, probably the most informative and clearly explained youtube video I have watched. Great work!

  • @codinginflow

    @codinginflow

    4 ай бұрын

    Thank you so much brother

  • @JosephOpio
    @JosephOpioАй бұрын

    One of the best SEO videos you can ever watch. Don't skip any steps. I have watched this over and over and over and still can't get enough of it.

  • @codinginflow

    @codinginflow

    Ай бұрын

    Glad you liked it!

  • @JosephOpio

    @JosephOpio

    Ай бұрын

    @@codinginflow Can you please make a video on the Opengraph image generator?

  • @asappi3110
    @asappi31105 ай бұрын

    Awesome guide! I'm a big fan of the way you show examples of everything. Thanks a lot!

  • @codinginflow

    @codinginflow

    5 ай бұрын

    Thanks man! Glad you liked it!

  • @riscode
    @riscodeАй бұрын

    I was hooked like I was watching a blockbuster 😂 Learning many things without getting overwhelmed. Really great video!

  • @codinginflow

    @codinginflow

    Ай бұрын

    Glad you enjoyed it!

  • @sammy3362
    @sammy33625 ай бұрын

    Absolutely loved this! Very insightful

  • @codinginflow

    @codinginflow

    5 ай бұрын

    Thanks a lot! Very happy to hear that!

  • @HousseynBelhadja
    @HousseynBelhadjaАй бұрын

    This video on SEO is truly exceptional - a must-watch! Each step is crucial, so make sure not to miss any. I've revisited it countless times and still find it incredibly valuable.

  • @codinginflow

    @codinginflow

    Ай бұрын

    thank you 💚

  • @user-uv6ow1db9z
    @user-uv6ow1db9z2 ай бұрын

    Thank you for such easy to follow and in depth tutorial

  • @codingwithlucy
    @codingwithlucy29 күн бұрын

    Your explanation is so clear, thank you!

  • @sirbacharach1
    @sirbacharach1Ай бұрын

    What a fantastic video, I've been struggling with SEO with React and Next.js as I'm new to web development, but this video has been such a great help, even the icon and the opengraph image has been helpful

  • @pitsonborellio7463
    @pitsonborellio746325 күн бұрын

    Awesome video, very detailed with lot of useful tips. Thank you very much !

  • @kamrant8915
    @kamrant89155 күн бұрын

    Great tutorial. Thank you very much. Really appreciate it.

  • @aminahb4307
    @aminahb4307Ай бұрын

    Absolutely fantastic walk through! Thank you!

  • @codinginflow

    @codinginflow

    Ай бұрын

    thank you

  • @TheLarynx
    @TheLarynxАй бұрын

    Amazing work, very well delivered. Thank you!

  • @codinginflow

    @codinginflow

    Ай бұрын

    Glad you liked it!

  • @juanspada4852
    @juanspada48526 күн бұрын

    Thanks for your content!

  • @pamphilemkp
    @pamphilemkp4 ай бұрын

    Thank you for this amazing tutorial, you deserve my subscription I hope many more people find this channel, I have been trying to understand how to add the metadata in nextjs, I have read the official doc and watch a couple of videos on some channels I could not find any relevant content like, thank you for the hard work for the dev community I am so happy because I have been able to solve many issues after watching this tutorial and also understand may SEO concepts. keep up the good work.

  • @codinginflow

    @codinginflow

    4 ай бұрын

    Thank you for the kind words 😊 Glad you liked it

  • @Leesdjo
    @Leesdjo4 ай бұрын

    Thank you so much for the detailed video. This video deserves more than just a like and a subscription.

  • @codinginflow

    @codinginflow

    4 ай бұрын

    Much appreciated!

  • @panwar9848
    @panwar9848Ай бұрын

    Really well made video. Thanks keep making such videos

  • @usamecoban2582
    @usamecoban258227 күн бұрын

    Thanks for the guide !!

  • @kousseilameniche6246
    @kousseilameniche62464 ай бұрын

    Thank you! you really helped me a lot! keep up the good work

  • @codinginflow

    @codinginflow

    4 ай бұрын

    Glad to hear that!

  • @asifkhan-rb8tl
    @asifkhan-rb8tl3 ай бұрын

    good explained in less time thank bro

  • @ivandamyanov
    @ivandamyanov25 күн бұрын

    All I needed thank you!

  • @mahammedsarfaraznawazpagal5018
    @mahammedsarfaraznawazpagal50184 ай бұрын

    Thank you so much for uploading 🎉 Subscribed right away.

  • @codinginflow

    @codinginflow

    4 ай бұрын

    Thank you bro

  • @realstoman
    @realstoman3 ай бұрын

    Super useful tutorial 👍

  • @matheusgwg
    @matheusgwgАй бұрын

    youre incredible, thank you so much!

  • @Marc-fj3kd
    @Marc-fj3kd2 ай бұрын

    Excellent video, thank you!

  • @codinginflow

    @codinginflow

    2 ай бұрын

    Glad you liked it!

  • @Ethan_404
    @Ethan_4045 ай бұрын

    Thank you so much for the new advanced knowledge and resources. 😍😍

  • @codinginflow

    @codinginflow

    5 ай бұрын

    You're welcome!

  • @soniclasses7841
    @soniclasses78418 күн бұрын

    First time i saw ur channel with this video. And i can say amazing knowledge on seo u have Want some more tutorials based on nextjs with typescript seo advance 😊

  • @mohammadDeveloper2431
    @mohammadDeveloper24315 ай бұрын

    This knowledge every developer needed thank you so much for this tutorial please more video like this new features in next js

  • @codinginflow

    @codinginflow

    5 ай бұрын

    More to come! Thank you very much!

  • @veggtips.shorts
    @veggtips.shortsАй бұрын

    just amazing content, new subscriber and will keep watching your videos!

  • @codinginflow

    @codinginflow

    Ай бұрын

    Glad to hear that!

  • @tiavina-mika
    @tiavina-mika2 ай бұрын

    Very useful video, thanks

  • @codinginflow

    @codinginflow

    2 ай бұрын

    You are welcome

  • @tareksellami7346
    @tareksellami734620 күн бұрын

    The best mentor ever. I followed you when you were doing Android and you helped me get my first job. Now I am learning Next.js and you making it easy for me again. I cant thank you enough for your wonderful videos ❤. You are better than GPT 😂. You are literally answering all the questions that cross my mind. Gooold

  • @codinginflow

    @codinginflow

    20 күн бұрын

    Thank you bretheren

  • @lightoflifegames7227
    @lightoflifegames72273 ай бұрын

    thank you very muchm very useful and enjoyed watching

  • @codinginflow

    @codinginflow

    3 ай бұрын

    My pleasure!

  • @RAJUSARKAR-zo7om
    @RAJUSARKAR-zo7om5 ай бұрын

    That's great!! Thank you

  • @codinginflow

    @codinginflow

    5 ай бұрын

    Thank you for watching!

  • @alvin3171997
    @alvin31719975 ай бұрын

    Supern tutorial! All things SEO related are answered.

  • @codinginflow

    @codinginflow

    5 ай бұрын

    Glad you liked it 👌

  • @alvin3171997

    @alvin3171997

    5 ай бұрын

    @@codinginflow I think one thing that is not covered is scheme markup for each dynamic product pages

  • @ChusenOne
    @ChusenOneАй бұрын

    Great video! Helped me a lot improving the SEO for a project I was working on. One quesion though: I found that vercel's analytics tool gets blocked by most adblockers and on their documentation doesn't mention much or anything about it. Do you know a work around this?

  • @BBocho
    @BBocho3 ай бұрын

    Thank you very much!

  • @codinginflow

    @codinginflow

    3 ай бұрын

    You're welcome!

  • @MichaelShingo
    @MichaelShingo2 ай бұрын

    thank you this is a goldmine of info

  • @codinginflow

    @codinginflow

    2 ай бұрын

    You're very welcome!

  • @paschalkings8184
    @paschalkings81843 ай бұрын

    this is awesome.

  • @codinginflow

    @codinginflow

    3 ай бұрын

    Thank you!

  • @RFbcc
    @RFbcc5 ай бұрын

    Wow a new t-shirt and a wireless earpiece 😀, Great video as always , Arigato my sensei !

  • @codinginflow

    @codinginflow

    5 ай бұрын

    Very attentive 😆

  • @EmanuelCovelli
    @EmanuelCovelli25 күн бұрын

    Hello do you know why con cloudflare pages on dynamic routes I have to use export const runtime = 'edge'; so even if I use generateStaticParams the pages will be note served with SSG but dynamically ? Thanks very much for this video!

  • @lmlTimolml
    @lmlTimolml21 күн бұрын

    Hey! Great stuff! One question though, I have a project that uses next-intl to serve different locales, how can I pass the locale variable to the dynamically generated sitemap so it will take into account which locale to map?

  • @canra245
    @canra2453 ай бұрын

    thank you🙏

  • @CharlesAE
    @CharlesAE3 ай бұрын

    Very in depth vid , could you do one on integrating Google AdSense into Next14?

  • @sulaimandev
    @sulaimandev3 ай бұрын

    Thank you :)

  • @davidlintin
    @davidlintin2 ай бұрын

    Great tutorial!! So much info. One question. How would we create a site map with internationalization also how to generate the seo metadata based on the lang param ? ✌🏻

  • @radshodam
    @radshodam4 ай бұрын

    great tutorial 🍻

  • @codinginflow

    @codinginflow

    4 ай бұрын

    thanks brother

  • @hbela1000
    @hbela10005 ай бұрын

    outstanding,thx.

  • @codinginflow

    @codinginflow

    5 ай бұрын

    Thank you so much 😊

  • @tejasyoutuber
    @tejasyoutuber5 ай бұрын

    Do you know how to resolve the data dump in the content type of text/x-component on the UI. I am using aws cloud front as cdn

  • @preisner528
    @preisner5284 ай бұрын

    thank you!

  • @SMarGwanS
    @SMarGwanSАй бұрын

    Hey, thank you for anamazing video. I wanted to ask in case I have [locale] folder, where should my sitemap file go and how should it look to support different locales?

  • @monahewidy3748
    @monahewidy37483 ай бұрын

    thank you

  • @albertoenriquez2440
    @albertoenriquez24404 ай бұрын

    This is what I was looking for. Thanks. I still have an error in GSC that says "page with redirect", but I think its a google thing more than my code...

  • @apitelrgramapitry7609
    @apitelrgramapitry760917 күн бұрын

    Thanks for this awesome guide. and how to make sitelink on google search?

  • @asifuzzamanbappy1297
    @asifuzzamanbappy12974 ай бұрын

    another question, if i may.... can i use disallow props in robots.ts file with some wild cards in them?(i.e. disallow: ["/author/*/list", "/groups/name/*"]) thanks and happy coding :)

  • @athardavid
    @athardavid3 ай бұрын

    Beautiful

  • @codinginflow

    @codinginflow

    3 ай бұрын

    Thank you

  • @younesessaadani9303
    @younesessaadani930323 күн бұрын

    Great video, I have one question if i'm using vercel with the free domain that vercel provide. How can i verify the domain when using google search

  • @codinginflow

    @codinginflow

    23 күн бұрын

    I think you can't because you don't have access to the DNS settings

  • @younesessaadani9303

    @younesessaadani9303

    23 күн бұрын

    @@codinginflow Yeah that's one, thank you ❤️

  • @maxilkiv
    @maxilkiv5 ай бұрын

    15:11 - I think there's a feature in VS Code which allows you to forward localhost, it's called port forwarding

  • @codinginflow

    @codinginflow

    5 ай бұрын

    Right, I forgot about this. I think it's new.

  • @avigdev
    @avigdev3 ай бұрын

    greet. i loved it

  • @ElijahScott10x
    @ElijahScott10x4 ай бұрын

    This video is a Godsend. The docs sucks compare to your video. I appreciate it.

  • @codinginflow

    @codinginflow

    4 ай бұрын

    Glad you liked it 😊

  • @sohrabkhan101
    @sohrabkhan1015 ай бұрын

    I have encountered an issue where my Open Graph images are no longer appearing when I share my page. Interestingly when I view source in chrome, the images are present in the HTML code. After spending few hours I realize that open graph image is not public. Do you know how do i fix this

  • @ste9890
    @ste98903 ай бұрын

    Excellent run-through, thanks for this! The tip to convert the blog post to SSG is great, but my blog index is also dynamic at the moment - I think because I'm using search params for pagination. Is there a way I can make the index (or at least the first page) static as well?

  • @codinginflow

    @codinginflow

    3 ай бұрын

    I think it's fine for this section to be dynamic because it doesn't show up much in Google. However, you can move your page number into a URL path param ("/blog/1") and this way cache them too.

  • @ste9890

    @ste9890

    3 ай бұрын

    @@codinginflow Thanks for the quick response, appreciate it!

  • @HigherStudyAspirant
    @HigherStudyAspirant3 ай бұрын

    Thank you , I have a page where list of products are shown. I am getting SEO related data from API, the main page has SEO like title, author, but in addition, for each product, they have separate SEO, so how can I return those in generateMetadata as it has only one return and I am already returning the page SEO (i-e title, author), but how to return list for each product where product related SEO is keyword, description, etc

  • @codinginflow

    @codinginflow

    3 ай бұрын

    You do that on he product details page

  • @HigherStudyAspirant

    @HigherStudyAspirant

    3 ай бұрын

    thanks, but I also want to do SEO of each product on main page instead of product-detail page, is there any way @@codinginflow

  • @yusuftezel9273
    @yusuftezel927329 күн бұрын

    Nice video, thanks a lot. Is keyword not important, i am just newbie for SEO and want to know if there is anything that is not mentioned in this video (the first thing that comes in my mind is keywords). Again thanks for this video.

  • @RFbcc
    @RFbcc5 ай бұрын

    Hi Florian , why is it that the previous notes ai tutorial and the ecommerce tutorial after running "npm run build" all the pages are shown with lambda as dynamically rendered ? Thanks !

  • @codinginflow

    @codinginflow

    5 ай бұрын

    In both cases, it's because of authentication. We get the current user server-side on each page which requires dynamic rendering. In the notes app, we don't care about static rendering because we don't have any public pages. In the e-commerce app, static rendering for product pages would be great. But I think this would require us to handle auth client-side.

  • @RFbcc

    @RFbcc

    5 ай бұрын

    @@codinginflow thanks for the clarification, I was going through your tutorial right at this moment :)

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd7 күн бұрын

    THank You

  • @ashfaquemamdu4582
    @ashfaquemamdu4582Ай бұрын

    This has helped me a lot. i have one doubt regarding sitemap generation. for one of our project we are using next js 14 app router and currently our site is completely static we are using export to build to static site. I am not able to generate dynamic sitemaps can any one help me with this or provide some resources which will help me . that will be a great help thanks

  • @asifuzzamanbappy1297
    @asifuzzamanbappy12974 ай бұрын

    hello, awesome content, really appreciated it, a question, if i may......... how about if we have to fetch data from "internal api" (i.e. localhost:3000/api) endpoints, during "npm run build" it seems to throw error saying "fetch failed" is there any work around it? thanks and happy coding :)

  • @codinginflow

    @codinginflow

    4 ай бұрын

    Don't fetch from a route handler in your server components. You can access the DB directly.

  • @asifuzzamanbappy1297

    @asifuzzamanbappy1297

    4 ай бұрын

    thanks a lot :) , thats exactly what i did, just wanted to be sure if thats correct way of doing it or not, much appreciated ♥ @@codinginflow

  • @harveyezihe
    @harveyezihe4 ай бұрын

    i'm not sure if it's just me, but the form to subscribe to the newsletter doesn't show up on chrome, but it did on edge. Maybe it's one of my numerous addons mistakenly blocking it perhaps.

  • @codinginflow

    @codinginflow

    4 ай бұрын

    Thanks for letting me know. The form is loaded from a third-party provider so I guess something in your browser is blocking it.

  • @ITRebels
    @ITRebelsАй бұрын

    awesome

  • @Beast80K
    @Beast80K2 ай бұрын

    *Respected Sir,* I'm experiencing a weird problem with API route handlers, my API route gets data from external API (locally hosted using mockoon tool), I'm using *{ next: { revalidate: 60} }* to get fresh data after 60 seconds & also *'force-dynamic'* to prevent it from becoming static during build. External API returns errors like 404, 429, 503 but API route handler responds with cached data & never returns a error, even other errors caught in catch block are ignored. Any suggestions ?

  • @knuseski
    @knuseski3 ай бұрын

    About caching: What if the content changes? Will 31st know that there is new content and invalidate the cache, or it will render outdated data ?

  • @codinginflow

    @codinginflow

    3 ай бұрын

    Either build the project again or look into incremental static regeneration

  • 4 ай бұрын

    Thanks so much for that video. It has clarified me a bunch of things. 🙂 May I ask one question? If I fetch data from a server component and I need to render it in a deep nested component how I would do that? If I place the data in the Context API (use client) I lose all the server features but I also do not want to drill it down so many levels. Thanks in advance. 🙏🏻

  • @codinginflow

    @codinginflow

    4 ай бұрын

    I would fetch it in the lowest server component and then just pass it as a prop

  • 4 ай бұрын

    @@codinginflow I really appreciate your insight. 🏆So as I suspected either or another, not a third choice then. Your approach makes sense since passing props down is better than losing the SSR feature. 🥇🔥

  • @codinginflow

    @codinginflow

    4 ай бұрын

    ​@ Yea I think that's the right way

  • @nathanodonnell2409
    @nathanodonnell240928 күн бұрын

    How do you deal with too many results? I have a listing page with 100k listings, sitemaps are limited to 50k or so

  • @maker._
    @maker._Ай бұрын

    I liked this video so much I clicked on its ads

  • @parthibanramachandran2878
    @parthibanramachandran28782 ай бұрын

    I can't export out folder my nextjs 14 application with nextauth, If have faced this issue please hepl me

  • @AliEbadi-99
    @AliEbadi-994 ай бұрын

    thank u

  • @codinginflow

    @codinginflow

    4 ай бұрын

    You're welcome!

  • @TikTokTrendsCompilation
    @TikTokTrendsCompilation5 ай бұрын

    Just what i needed to learn, great tutorial! thank you

  • @codinginflow

    @codinginflow

    5 ай бұрын

    You're welcome!

  • @canra245
    @canra2453 ай бұрын

    i really confuse, how to verify the DNS google search console in vercel :/

  • @mihirsharma3857
    @mihirsharma38575 ай бұрын

    How to add script tag in head tag? Can you please help me. Thanks in advance.

  • @codinginflow

    @codinginflow

    5 ай бұрын

    With next/Script. You use it with an uppercase S:

  • @iammtw
    @iammtw3 ай бұрын

    Can you please add the microdata in next js?

  • @kualta
    @kualta2 ай бұрын

    thank you sweetheart

  • @turjoysaha4991
    @turjoysaha49914 ай бұрын

    Google not accepting sitemap. What to do?

  • @user-jf6co4ph4i
    @user-jf6co4ph4i5 ай бұрын

    please make a detailed video on API creation using NEXT Js

  • @codinginflow

    @codinginflow

    5 ай бұрын

    What exactly do you want to learn?

  • @user-jf6co4ph4i

    @user-jf6co4ph4i

    5 ай бұрын

    @@codinginflow I dont want to learn express and other stuff, i just want to learn API creations and JWT etc using NEXT JS Only, Please make a detailed video on this, Hope this is Your Next Video🙏🙏

  • @doguarunbayraktar
    @doguarunbayraktar27 күн бұрын

    Beautiful tutorial, but I don’t think you have mentioned about keywords.

  • @codinginflow

    @codinginflow

    26 күн бұрын

    Keywords are related to the content. This tutorial covers the technical parts.

  • @LeAmbrosioFiadone
    @LeAmbrosioFiadone5 ай бұрын

    Hola Amigo

  • @codinginflow

    @codinginflow

    5 ай бұрын

    Hola

  • @Moonday475
    @Moonday4755 ай бұрын

    I've been following you for a long time. I hope you talk about Gaza you are famous and your voice is heard

  • @rishiraj2548
    @rishiraj25485 ай бұрын

    👍🙏

  • @Chernov1984
    @Chernov19845 ай бұрын

    +

  • @gofudgeyourselves9024
    @gofudgeyourselves90245 ай бұрын

    WHat's the first word u said? Kodachima? What does it mean?Is it german?

  • @codinginflow

    @codinginflow

    5 ай бұрын

    Konichiwa, it means "hello" in Japanese

  • @gofudgeyourselves9024

    @gofudgeyourselves9024

    5 ай бұрын

    @@codinginflow cool

  • @gofudgeyourselves9024

    @gofudgeyourselves9024

    5 ай бұрын

    @@codinginflow Anime fan, huh?

  • @codinginflow

    @codinginflow

    5 ай бұрын

    ​@@gofudgeyourselves9024 Nah. I just use a greeting in a different language in every video.

  • @AliEbadi-99
    @AliEbadi-994 ай бұрын

    thank u

  • @codinginflow

    @codinginflow

    4 ай бұрын

    You're welcome!