SEO with Next.js 13 - Dynamic Sitemaps, OG Images and Metadata API

In this video you will learn everything you need to know about SEO with Next.js 13. All the new features such as dynamic sitemaps, Opengraph image generation and metadata API covered in the video.
- timestamps -
00:00 - Intro
00:26 - Overview
01:18 - Static Metadata
04:37 - Dynamic Metadata
09:41 - Templates
12:19 - Canonical URL and Alternates
16:38 - Other features of Metadata API
19:55 - Robots.txt
24:48 - Sitemap
31:29 - Static OG Image
32:48 - Dynamic OG Image
37:05 - Lighthouse Score
Source Code: github.com/batuhanbilginn/nex...
#nextjs #typescript #seo #development #developer #sitemapxml #sitemap

[@manjeshkumarsharma]

The most important video for any developer working as a Next JS dev in any company

[@doguarunbayraktar]

Ya cok tesekkurler boyle guzel bilgilendirmen icin. Amerikadan selamlar, sevgiler.

[@heroiulacio2345]

Thank you for speaking so slowly, I speak very little English and I understand you perfectly with the help of the subtitles, greetings from Venezuela

[@makrdev]

I’m glad you find it helpful!

[@SanchitArora-my6re]

The best and most helpful video related to meta tags😍❣

[@yauul]

Thank you for the video! I have been struggling with the dynamic opengraph part for a while now. This video definitely solve that part for me. You got a subscriber friend. Keep it going!

[@makrdev]

I’m glad it solved your problem 🤞 Thanks!

[@nikolayt.5054]

Wow! Went through this video in January 2024! Your presentation is excellent! Thank you!

[@makrdev]

Glad it was helpful!

[@mohammadmalek5042]

Thank you for speaking fluently ❤ This video is very helpful

[@lottexy]

THANK YOU, YOU ARE AWESOME. I deployed my website and wasn't getting indexed by Google. I tried reading nextJS document on SEO but damn, it's so confusing... so many examples, I just want to deploy my site and make it searchable lol such a simple thing and they have so much explanation. They should feature your video, you explained it all so well and in simple terms. Thanks again!

[@javadrip]

One of the few videos that ACTUALLY tackles the important yet often overlooked stuff! Thank you! And I've subscribed!

[@mihaillepadatu8256]

Same here!

[@makrdev]

Thank you guys! I'm really glad you liked it 🫶

[@veliea5160]

i feel the same

[@loydcose2780]

You're trully great man! keep it up and thank you so much!

[@kamrant8915]

Really useful tutorial. Thanks a lot

[@baljka17]

What a gem bro, you are a life saver. Keep up your good work!

Exactly what I was looking for. Thank you. Instant follow 👍

[@makrdev]

Glad it helped!

[@borisbarzotto5785]

nice work makrdev! Greetings from Venezuela!!

[@makrdev]

Thanks bro 🫶🏼

[@sahilverma_dev]

DAMN bro such a great and informative video you saved my time. keep it up

[@paulmothapo]

Thank you for knowledge brother.

[@nicksmith5306]

Great video thank you as I was struggling with SEO in Next13 👍 *Subscribed*

[@makrdev]

Glad it was helpful!

[@mdshohidulislam5836]

That was really good thanks, *Subscribed*

[@dogfrogfog]

Love the video. Really deep and visual

[@makrdev]

Thank you so much!

[@codewithguillaume]

Hello my friend. This is an amazing video, please continue to teach online :) Of course I subscribed :)

[@makrdev]

Hey there! Thank you 🙏 I’m working on a project at the moment I’ll be posting new videos soon ✌️ I subscribed your channel as well!

[@ibrahimacanada]

Very helpfull thanks ! i recommend !!

[@makrdev]

You're welcome!

[@Fuk5-]

great video, thanks mate

[@makrdev]

Thanks 🙏

[@samyeksonawane]

Loved your Content. Subscribed :) It would be great if you create a tutorial on creating this nextjs blog!

[@eavoutdom190]

It will be great if you make a e-commerce course with this practice!

[@exploit.6848]

Amazingg video very helpful

[@makrdev]

Thank you 🙏

[@wassup102]

thank u

[@SamHartmannCom]

30:50 Thanks a lot for showing how to generate sitemaps dynamically. It's so badly documented in Next.js

[@cagataysafak8619]

Thanks for clean explanation. In the dynamic sitemap generation, we generate a new ```lastModified``` parameter each time, isn't this problematic? I mean, I think we should write the actual last modified timestamp for each URL.

[@burger23II]

Thank you for this amazing tutorial. My question is how do we set up fallback og images when we use this method

[@Nextjs13-kq5cm]

Dope! :)

[@makrdev]

Thanks 🙏

[@phieuantrinh2273]

hello my friend from Viet Nam. Your video help me a lots for my project. But i'm just a newbie and i have a question. For example, if i add a new post, will the sitemap automatically update or i must rebuild the project Thank you very much 😍

[@user-ej3ok5en5f]

Amazing video☺☺. Can you upload next 13 crash course video?

[@makrdev]

I’ll be doing for Supabase first but I’ll definitely create for Next.js 13 too. Do you have anything specific in your mind that you want to learn?

[@basith237]

nice

[@makrdev]

Thanks!

[@EliandroViana-ty3hl]

Thank you for your awesome video! whats you think about Drizzle ORM? Can u create a tutorial with supabase + Drizzle integration?

[@makrdev]

Thank you! Yeah, I’ll create a video about Drizzle soon 🤞

[@franciskintungi]

Great work my guy. I have noticed some change on the opengraph-image.tsx file from the documentation. Can you please leave a comment here to reflect the changes. Thanks!

[@makrdev]

Thanks 🙏 I’ll check it out 🤞

[@user-zf8bp7sj8z]

hello sir, what about the new post after building the nextjs app. If I add new blog post after building the nextjs app with static genaration. Can you please give me this ans.

[@Sam-wp2zh]

Nice job, Sitemap: How do you deal with sitemap limitations: 50Mb and less than 50,000 URLs? We have over 300,000 pages.

[@makrdev]

You can create different sitemaps.

[@srirams60]

Hey bro Make a video about Atomic Structure in Next Js

[@AndriyNosov]

Hi, thanks for your tutorial. Can you explain how can I generateMetadata on my [slug] page, if it's a client page? In this page I use useEffect and useState...

[@makrdev]

I think you can return legacy Head component with related metadata however I do not recommend making the whole page client component. You should divide interactive parts into separate client components and put it in a server component.

[@macpakkapon9237]

Hi, Thanks for the tutorial video this is very helpful. I'm still struggle with implementing opengraph-image.tsx file with searchParams. since it's a server component I'm struggle to find ways to directly access searchParams. Any suggestion?

[@makrdev]

Can you join our discord? I can help you over there 👍

[@QuarterBite]

I still don't understand about sitemap. So I have to rebuild every time I want to update sitemap, even though I use a dynamic sitemap?

[@SamHartmannCom]

Is it possible to generate a sitemap index and sub-sitemaps?

[@user-se6gp5ml9k]

i generate meta from server side and get , it is cool but i want to remove from my source page , please share suggestion

[@bora6277]

How can i use priority and changefreq in dynamic sitemap?

[@alperengultekin9857]

Hi Batuhan I reach you from Turkiye. Firstly "Nasılsın?", is there any way to keep our site map up to date, when I add a new product or category. I need to redeploy my project to update sitemap. Like revalidate = 0 ;

[@gabrielherrera7914]

What's the name of that tool where you can see the web perfomance and SEO score?

[@user-eu3ur2ft6o]

it's seem dynamic sitemap was generated at build time, if we create new post/category sitemap will not update then next build right?

[@makrdev]

When you create dynamic sitemap it will fetch the latest data every time you refresh the sitemap. So, when you add new page it will be displayed in the list.

[@anowarulhassan5117]

31:11 after build, the sitemap getting freeze and not populating new data at sitemap. It is getting freeze with the data till the yarn build. Please raise this issue with nextjs. It is not a good practice that I have to access my server and need to run yarn build after every new post.... Please🙏🙏🙏🙏🙏🙏🙏🙏

[@akarshanmishra2351]

hey man how do I go about making a dynamic sitemap that updates everytime new content from sanity cms is added ?

[@makrdev]

Just create a server-side sitemap. It will fetch new posts on every visit you or Google make.

[@farhad__adhir4570]

You are just too Awesome,,Sir.. I learned a lot from this Video..I appreciate your hard work..Thank you so much again.. Take love from Bangladesh..🤍🤍..

[@makrdev]

Thank you Farhad! I’m glad you liked ❤️

[@aldofematWorkout]

HI Sir, Can I use the same sitemap with the páges directory?

[@makrdev]

Yeah as far as I remember they were same. Even if they are not, the idea is same.

[@RajeshSingh-nu1iz]

How can we use google fonts in og image creation with tailwindcss, pls share the info

[@makrdev]

You just need to import the font you need. Check the docs and you will find an example.

[@user-ev5ll9tu6u]

section about sitemap makes no sense, to geerate sitemap i need your blogs?

[@KiloSierra1]

Only useful if you're using the app folder

[@logannguyen9512]

What is that application to check your website at 0:50?

[@makrdev]

Pagespeed Insgights from Google

[@amaechinaikechukwu8266]

How can i change image in metadata please

[@makrdev]

You need to create OG image. You can see the details in the related part.

[@topnatop]

ngo