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.
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
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
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.
This video is a gem💎, Loved it, ♥ Video suggestion, if you can create a part 2 explaining other aspects of SEO as a nextjs dev and covering tools and techniques that have help you to rank, would be appreciated.
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 😊
Thank you for your video, it helped me refactor my metadata with things I didn't know could be so concisely improved (like prefix/suffix default template)
Awesome very simple and easy to understand, hope that when NextJS 15 is more stable and has official React 19 Compiler you can make a video about the new features🥰
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
This video is informative. Thank you. However, I am confused with setting the lastmod for home page when there are dynamic data like from fetching from multiple APIs in sitemap and for other static pages. How do we deal with such stuffs as google crawler treats it as important?
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!
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?
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?
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?
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 ? ✌🏻
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...
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.
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
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 !
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.
@@codinginflow thanks for the clarification, I was going through your tutorial right at this moment :)
ปีที่แล้ว
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. 🙏🏻
I would fetch it in the lowest server component and then just pass it as a prop
ปีที่แล้ว +1
@@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. 🥇🔥
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 :)
Hello, I'm writing before watching the video, as I'm struggling with this metatag thing, see I need keywords and description, I already receive this information in an endpoint for every application I put in the state either with Redux or Zustand... But Next doesn't understand and to have the data again from keywords and description, it requires that I trigger the endpoint again to get the fields that in theory I already have, it asks to use this -> getServerSideProps, when it's static it works, when it's dynamic it doesn't work, even verifying that the values are passed, but Next requires that I trigger an endpoint again it's completely meaningless... Can someone give me a light - Next 14.2.3
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?
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.
one of the best videos out there , just one question if we are using try and catch method to import data from database twice does this mean it will duplicate request or will it work similarly like 'fetch' ?
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
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.
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 :)
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.
Glad you liked it!
@@codinginflow Can you please make a video on the Opengraph image generator?
Brilliant guide, probably the most informative and clearly explained youtube video I have watched. Great work!
Thank you so much brother
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.
thank you 💚
Such a clear and concise course. Worth every second. Just love it ❤
Thank you very much 💚
I was hooked like I was watching a blockbuster 😂 Learning many things without getting overwhelmed. Really great video!
Glad you enjoyed it!
I just want to say I really appreciate you for making these types of content. Thank you for your hard work
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
I new learning the Next.js. This video useful for me. Thank you so much.
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
Thank you bretheren
You are the only one who talk about these setting, my savior.
Pls subscribe friend
Awesome guide! I'm a big fan of the way you show examples of everything. Thanks a lot!
Thanks man! Glad you liked it!
This is probably the best guide. Thank you so much
Amazing video. At first I assumed the video would be slow and drawn out because of the length. But no, every second was valuable.
Thanks
Thank you for the kind words!
THANK YOU, THIS HELPED ME 43:36 to create a Dynamic Sitemap very easily. Please continue making more helpful videos. Loved it❤
Very happy to hear that!
The best SEO video I've ever watched. Keep it up!
One of the best SEO videos for Next JS
Thank you so much!
Your explanation is simply amazing. This is the best video I have watched to improve SEO in a Next.JS application.
Thank you!
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.
Thank you for the kind words 😊 Glad you liked it
This video is a gem💎,
Loved it, ♥
Video suggestion, if you can create a part 2 explaining other aspects of SEO as a nextjs dev and covering tools and techniques that have help you to rank, would be appreciated.
Very in depth vid , could you do one on integrating Google AdSense into Next14?
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 😊
23 sec in and i already like it. Let's go. Thank you for such a comprehensive content
you're welcome!
Thank you for your video, it helped me refactor my metadata with things I didn't know could be so concisely improved (like prefix/suffix default template)
You're welcome!
Absolutely loved this! Very insightful
Thanks a lot! Very happy to hear that!
Best and short tutorial with tremendous knowledge
thank you 💚
Thank you for this simple and fantastic tutorial .
Best video for SEO In Next Js 🔥🔥
thank you brother
Awesome very simple and easy to understand, hope that when NextJS 15 is more stable and has official React 19 Compiler you can make a video about the new features🥰
What amazing tutorial, keep up the good job
Thank you for such easy to follow and in depth tutorial
which tool use seo performance checking other plugin. how to connecte please say
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
Best SEO video that I ever watched !!
Glad you liked it!
Quality content. this really is helping me a lot! I will come back here with results in few months :)
thanks! but i have a question, i need to add the principal "public_base_url" to the sitemap?
or just the subpages?
Thank you I didn't know about that google search console thing. 👍🏽
Happy to help!
This video is informative. Thank you. However, I am confused with setting the lastmod for home page when there are dynamic data like from fetching from multiple APIs in sitemap and for other static pages. How do we deal with such stuffs as google crawler treats it as important?
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!
Thank you So much for this video tutorials. It saved a lot . :)
Wow a new t-shirt and a wireless earpiece 😀,
Great video as always , Arigato my sensei !
Very attentive 😆
Awesome video, very detailed with lot of useful tips. Thank you very much !
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?
Hey man, thank you so much for this video, I learned a lot
Thank you so much for the detailed video. This video deserves more than just a like and a subscription.
Much appreciated!
this is aweasome brother i learnt alot
Your explanation is so clear, thank you!
Thank you so much for uploading 🎉 Subscribed right away.
Thank you bro
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?
Really well made video. Thanks keep making such videos
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?
Absolutely fantastic walk through! Thank you!
thank you
I just loved it. It's so helpful. 😄
Glad you liked it!!
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 ? ✌🏻
This was really helpful, thank you!
Great tutorial. Thank you very much. Really appreciate it.
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
Amazing work, very well delivered. Thank you!
Glad you liked it!
Thanks for this awesome guide. and how to make sitelink on google search?
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...
Do you have any particular recommandation when working with Next.js internalization ? My web app is using 4 languages (EN, DE, FR, IT).
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
I think you can't because you don't have access to the DNS settings
@@codinginflow Yeah that's one, thank you ❤️
This knowledge every developer needed thank you so much for this tutorial please more video like this new features in next js
More to come! Thank you very much!
All I needed thank you!
quick question, is it possible for a protected route that fetches data from an API with authorization to be static instead of dynamic?
The parts that don't depend on the authorized content can be static. Or you can do the authorization in the middleware.
Supern tutorial!
All things SEO related are answered.
Glad you liked it 👌
@@codinginflow I think one thing that is not covered is scheme markup for each dynamic product pages
Thank you! you really helped me a lot! keep up the good work
Glad to hear that!
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.
Thanks for letting me know. The form is loaded from a third-party provider so I guess something in your browser is blocking it.
So If I have for example 300 elements and I am searching by Id I should generateStaticParams?
Okey you said in 37 min about that, but what do you recommend if the app has at least 300 records.
What should I do? 🙄
Could you please make a video about using google ads to promote the webside and show up on the first entries in google?
Thank you very informative and help at the same time.
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
You do that on he product details page
thanks, but I also want to do SEO of each product on main page instead of product-detail page, is there any way @@codinginflow
Super useful tutorial 👍
great video! Thank you so much!
good explained in less time thank bro
awesome video, where is the tutorial for the dynamic OG image with code?
just amazing content, new subscriber and will keep watching your videos!
Glad to hear that!
thank you this is a goldmine of info
You're very welcome!
Thanks for your content!
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 !
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.
@@codinginflow thanks for the clarification, I was going through your tutorial right at this moment :)
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. 🙏🏻
I would fetch it in the lowest server component and then just pass it as a prop
@@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. 🥇🔥
@ Yea I think that's the right way
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 :)
Thank you so much for the new advanced knowledge and resources. 😍😍
You're welcome!
Thanks for the guide !!
Excellent video, thank you!
Glad you liked it!
thanks man, great video
why do you use delay 1000? is there a reason or just fo testing purose? In a real case scenario you would remove it?
Yes just for testing. Don't do it in production.
Thnaks a lot mate. I have a question.
How often will the sitemap be generated?
Every time you compile your project
Hello, I'm writing before watching the video, as I'm struggling with this metatag thing, see I need keywords and description, I already receive this information in an endpoint for every application I put in the state either with Redux or Zustand... But Next doesn't understand and to have the data again from keywords and description, it requires that I trigger the endpoint again to get the fields that in theory I already have, it asks to use this -> getServerSideProps, when it's static it works, when it's dynamic it doesn't work, even verifying that the values are passed, but Next requires that I trigger an endpoint again it's completely meaningless... Can someone give me a light - Next 14.2.3
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 ?
Either build the project again or look into incremental static regeneration
15:11 - I think there's a feature in VS Code which allows you to forward localhost, it's called port forwarding
Right, I forgot about this. I think it's new.
How do you deal with too many results? I have a listing page with 100k listings, sitemaps are limited to 50k or so
I vatched this on my potato machine. Excellent stuff.
youre incredible, thank you so much!
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?
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.
@@codinginflow Thanks for the quick response, appreciate it!
I can't export out folder my nextjs 14 application with nextauth, If have faced this issue please hepl me
This video is a Godsend. The docs sucks compare to your video. I appreciate it.
Glad you liked it 😊
one of the best videos out there , just one question if we are using try and catch method to import data from database twice does this mean it will duplicate request or will it work similarly like 'fetch' ?
When you don't use fetch you have to wrap it into cache. In Next 15, fetch won't be cached anymore either.
@@codinginflow thank-you
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
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.
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 :)
Don't fetch from a route handler in your server components. You can access the DB directly.
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