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

Поделиться
HTML-код
  • Опубликовано: 10 сен 2024

Комментарии • 198

  • @JosephOpio
    @JosephOpio 5 месяцев назад +12

    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  5 месяцев назад +2

      Glad you liked it!

    • @JosephOpio
      @JosephOpio 4 месяца назад +1

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

  • @benb1987
    @benb1987 8 месяцев назад +29

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

    • @codinginflow
      @codinginflow  8 месяцев назад +2

      Thank you so much brother

  • @alpha7s708
    @alpha7s708 25 дней назад +3

    Such a clear and concise course. Worth every second. Just love it ❤

  • @raves_r3177
    @raves_r3177 Месяц назад

    I just want to say I really appreciate you for making these types of content. Thank you for your hard work

  • @HousseynBelhadja
    @HousseynBelhadja 4 месяца назад +1

    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.

  • @Anushkai1
    @Anushkai1 2 месяца назад +1

    One of the best SEO videos for Next JS

  • @riscode
    @riscode 4 месяца назад +1

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

  • @yhr4052
    @yhr4052 3 дня назад

    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)

  • @tareksellami7346
    @tareksellami7346 4 месяца назад

    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

  • @sirbacharach1
    @sirbacharach1 4 месяца назад +2

    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

  • @manavatshyam
    @manavatshyam Месяц назад

    Your explanation is simply amazing. This is the best video I have watched to improve SEO in a Next.JS application.

  • @nadeking1530
    @nadeking1530 2 месяца назад

    Best and short tutorial with tremendous knowledge

  • @kjedsbhfsjhgxfkhgfs
    @kjedsbhfsjhgxfkhgfs 2 месяца назад

    I vatched this on my potato machine. Excellent stuff.

  • @musipto
    @musipto Месяц назад +1

    Thank you I didn't know about that google search console thing. 👍🏽

  • @asappi1
    @asappi1 9 месяцев назад +4

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

    • @codinginflow
      @codinginflow  9 месяцев назад

      Thanks man! Glad you liked it!

  • @timmytimeo
    @timmytimeo Месяц назад

    Quality content. this really is helping me a lot! I will come back here with results in few months :)

  • @interceptorghost1149
    @interceptorghost1149 21 день назад

    "konichiwa" and his face starts acting like a robot even the way of he speaking🤣. Nice video btw

  • @pamphilemkp
    @pamphilemkp 7 месяцев назад +1

    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  7 месяцев назад

      Thank you for the kind words 😊 Glad you liked it

  • @soniclasses7841
    @soniclasses7841 3 месяца назад

    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 😊

  • @alvin3171997
    @alvin3171997 8 месяцев назад +1

    Supern tutorial!
    All things SEO related are answered.

    • @codinginflow
      @codinginflow  8 месяцев назад

      Glad you liked it 👌

    • @alvin3171997
      @alvin3171997 8 месяцев назад

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

  • @mahammedsarfaraznawazpagal5018
    @mahammedsarfaraznawazpagal5018 7 месяцев назад +1

    Thank you so much for uploading 🎉 Subscribed right away.

  • @CharlesAE
    @CharlesAE 7 месяцев назад +1

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

  • @ElijahScott10x
    @ElijahScott10x 7 месяцев назад

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

  • @sammy3362
    @sammy3362 9 месяцев назад +2

    Absolutely loved this! Very insightful

    • @codinginflow
      @codinginflow  9 месяцев назад +1

      Thanks a lot! Very happy to hear that!

  • @codingwithlucy
    @codingwithlucy 4 месяца назад

    Your explanation is so clear, thank you!

  • @MichaelShingo
    @MichaelShingo 5 месяцев назад

    thank you this is a goldmine of info

  • @MuhammadOwais-ue4jb
    @MuhammadOwais-ue4jb 2 месяца назад

    Thank you very informative and help at the same time.

  • @aminahb4307
    @aminahb4307 5 месяцев назад

    Absolutely fantastic walk through! Thank you!

  • @user-uv6ow1db9z
    @user-uv6ow1db9z 5 месяцев назад

    Thank you for such easy to follow and in depth tutorial

  • @pitsonborellio7463
    @pitsonborellio7463 4 месяца назад

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

  • @hymerrathebarbarian
    @hymerrathebarbarian 18 дней назад

    Thank you very much, you are awesome

  • @kamrant8915
    @kamrant8915 3 месяца назад

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

  • @mohammadDeveloper2431
    @mohammadDeveloper2431 9 месяцев назад

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

    • @codinginflow
      @codinginflow  9 месяцев назад

      More to come! Thank you very much!

  • @RFbcc
    @RFbcc 9 месяцев назад

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

  • @maker._
    @maker._ 4 месяца назад

    I liked this video so much I clicked on its ads

  • @Leesdjo
    @Leesdjo 7 месяцев назад

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

  • @panwar9848
    @panwar9848 4 месяца назад

    Really well made video. Thanks keep making such videos

  • @TheLarynx
    @TheLarynx 5 месяцев назад

    Amazing work, very well delivered. Thank you!

  • @rameshrajendran3006
    @rameshrajendran3006 3 месяца назад

    This was really helpful, thank you!

  • @sohrabkhan101
    @sohrabkhan101 8 месяцев назад +1

    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

  • @RealEstateandTechnology
    @RealEstateandTechnology 26 дней назад

    very well done ..

  • @ivandamyanov
    @ivandamyanov 4 месяца назад

    All I needed thank you!

  • @matheusgwg
    @matheusgwg 5 месяцев назад

    youre incredible, thank you so much!

  • @asifkhan-rb8tl
    @asifkhan-rb8tl 7 месяцев назад

    good explained in less time thank bro

  • @pykfit
    @pykfit Месяц назад

    Perfect!

  • @juanspada4852
    @juanspada4852 3 месяца назад

    Thanks for your content!

  • @Ethan_404
    @Ethan_404 9 месяцев назад

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

  • @nihalnclt
    @nihalnclt 18 дней назад

    Awesome 💫

  • @usamecoban2582
    @usamecoban2582 4 месяца назад

    Thanks for the guide !!

  • @Marc-fj3kd
    @Marc-fj3kd 6 месяцев назад

    Excellent video, thank you!

  • @kousseilameniche6246
    @kousseilameniche6246 8 месяцев назад

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

  • @issa.garcia
    @issa.garcia 5 месяцев назад

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

  • @leopolddelassence5224
    @leopolddelassence5224 3 месяца назад

    thanks man, great video

  • @EmanuelCovelli
    @EmanuelCovelli 4 месяца назад

    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!

  • @nvbkdowb
    @nvbkdowb 21 день назад

    Do you have any particular recommandation when working with Next.js internalization ? My web app is using 4 languages (EN, DE, FR, IT).

  • @parthibanramachandran2878
    @parthibanramachandran2878 6 месяцев назад

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

  • @athardavid
    @athardavid 7 месяцев назад

    Beautiful

  • @lightoflifegames7227
    @lightoflifegames7227 6 месяцев назад

    thank you very muchm very useful and enjoyed watching

  • @davidlintin
    @davidlintin 5 месяцев назад

    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 ? ✌🏻

  • @tiavina-mika
    @tiavina-mika 6 месяцев назад

    Very useful video, thanks

  • @TikTokTrendsCompilation
    @TikTokTrendsCompilation 9 месяцев назад +1

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

  • @realstoman
    @realstoman 6 месяцев назад

    Super useful tutorial 👍

  • @nathanodonnell2409
    @nathanodonnell2409 4 месяца назад

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

  • @yusuftezel9273
    @yusuftezel9273 4 месяца назад

    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.

  • @ChusenOne
    @ChusenOne 4 месяца назад

    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?

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 3 месяца назад

    THank You

  • @BBocho
    @BBocho 7 месяцев назад

    Thank you very much!

  • @albertoenriquez2440
    @albertoenriquez2440 7 месяцев назад

    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...

  • @SMarGwanS
    @SMarGwanS 4 месяца назад

    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?

  • @RAJUSARKAR-zo7om
    @RAJUSARKAR-zo7om 9 месяцев назад

    That's great!! Thank you

  • @canra245
    @canra245 6 месяцев назад

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

  • @maxilkiv
    @maxilkiv 9 месяцев назад

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

    • @codinginflow
      @codinginflow  9 месяцев назад +2

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

  • @harveyezihe
    @harveyezihe 7 месяцев назад

    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  7 месяцев назад

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

  • @sametc001
    @sametc001 8 месяцев назад

    thank you!

  • @Radiotiq
    @Radiotiq 23 дня назад

    quick question, is it possible for a protected route that fetches data from an API with authorization to be static instead of dynamic?

    • @codinginflow
      @codinginflow  22 дня назад +1

      The parts that don't depend on the authorized content can be static. Or you can do the authorization in the middleware.

  • @sulaimandev
    @sulaimandev 6 месяцев назад

    Thank you :)

  • @monahewidy3748
    @monahewidy3748 7 месяцев назад

    thank you

  • @ITRebels
    @ITRebels 5 месяцев назад

    awesome

  • @lmlTimolml
    @lmlTimolml 4 месяца назад

    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?

  • @vanhelsingx69x
    @vanhelsingx69x 19 дней назад

    why do you use delay 1000? is there a reason or just fo testing purose? In a real case scenario you would remove it?

    • @codinginflow
      @codinginflow  18 дней назад

      Yes just for testing. Don't do it in production.

  • @paschalkings8184
    @paschalkings8184 7 месяцев назад

    this is awesome.

  • @ashfaquemamdu4582
    @ashfaquemamdu4582 4 месяца назад

    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

  • @tejasyoutuber
    @tejasyoutuber 9 месяцев назад

    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

  • @szerkan778
    @szerkan778 3 месяца назад

    So If I have for example 300 elements and I am searching by Id I should generateStaticParams?

    • @szerkan778
      @szerkan778 3 месяца назад

      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? 🙄

  • @AliEbadi-99
    @AliEbadi-99 8 месяцев назад

    thank u

  • @radshodam
    @radshodam 8 месяцев назад

    great tutorial 🍻

  • @asifuzzamanbappy1297
    @asifuzzamanbappy1297 7 месяцев назад

    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 :)

  • @avigdev
    @avigdev 7 месяцев назад

    greet. i loved it

  • @hbela1000
    @hbela1000 9 месяцев назад

    outstanding,thx.

  • @HigherStudyAspirant
    @HigherStudyAspirant 6 месяцев назад

    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  6 месяцев назад

      You do that on he product details page

    • @HigherStudyAspirant
      @HigherStudyAspirant 6 месяцев назад

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

  • @knuseski
    @knuseski 6 месяцев назад

    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  6 месяцев назад +1

      Either build the project again or look into incremental static regeneration

  • @apitelrgramapitry7609
    @apitelrgramapitry7609 4 месяца назад

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

  • @divyanshurawat2422
    @divyanshurawat2422 3 месяца назад

    I have successuly made the sitemap , but not fetched by google in search console, it has been weeks now

  • @Risjaiswal
    @Risjaiswal 2 месяца назад

    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' ?

    • @codinginflow
      @codinginflow  2 месяца назад

      When you don't use fetch you have to wrap it into cache. In Next 15, fetch won't be cached anymore either.

    • @Risjaiswal
      @Risjaiswal 2 месяца назад

      @@codinginflow thank-you

  • @kualta
    @kualta 6 месяцев назад

    thank you sweetheart

  • @younesessaadani9303
    @younesessaadani9303 4 месяца назад

    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  4 месяца назад

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

    • @younesessaadani9303
      @younesessaadani9303 4 месяца назад

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

  • @RFbcc
    @RFbcc 8 месяцев назад

    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  8 месяцев назад

      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 8 месяцев назад

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

  • @iammtw
    @iammtw 6 месяцев назад

    Can you please add the microdata in next js?

  • @IbnFadlan2
    @IbnFadlan2 9 месяцев назад

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

  • @turjoysaha4991
    @turjoysaha4991 7 месяцев назад

    Google not accepting sitemap. What to do?