SEO with Next.js 13 - Dynamic Sitemaps, OG Images and Metadata API
Vložit
- čas přidán 28. 07. 2024
- 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 - Věda a technologie
The most important video for any developer working as a Next JS dev in any company
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
I’m glad you find it helpful!
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!
Thank you for speaking fluently ❤
This video is very helpful
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!
I’m glad it solved your problem 🤞 Thanks!
You're trully great man! keep it up and thank you so much!
Ya cok tesekkurler boyle guzel bilgilendirmen icin. Amerikadan selamlar, sevgiler.
The best and most helpful video related to meta tags😍❣
What a gem bro, you are a life saver. Keep up your good work!
Really useful tutorial. Thanks a lot
nice work makrdev! Greetings from Venezuela!!
Thanks bro 🫶🏼
One of the few videos that ACTUALLY tackles the important yet often overlooked stuff! Thank you! And I've subscribed!
Same here!
Thank you guys! I'm really glad you liked it 🫶
i feel the same
Thank you for knowledge brother.
DAMN bro such a great and informative video you saved my time. keep it up
Exactly what I was looking for. Thank you. Instant follow 👍
Glad it helped!
That was really good thanks, *Subscribed*
Great video thank you as I was struggling with SEO in Next13 👍 *Subscribed*
Glad it was helpful!
Wow! Went through this video in January 2024! Your presentation is excellent! Thank you!
Glad it was helpful!
Love the video. Really deep and visual
Thank you so much!
great video, thanks mate
Thanks 🙏
Amazingg video very helpful
Thank you 🙏
Very helpfull thanks ! i recommend !!
You're welcome!
Loved your Content. Subscribed :)
It would be great if you create a tutorial on creating this nextjs blog!
Hello my friend. This is an amazing video, please continue to teach online :) Of course I subscribed :)
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!
Dope! :)
Thanks 🙏
thank u
It will be great if you make a e-commerce course with this practice!
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.
Thank you for this amazing tutorial. My question is how do we set up fallback og images when we use this method
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 😍
nice
Thanks!
30:50 Thanks a lot for showing how to generate sitemaps dynamically. It's so badly documented in Next.js
Amazing video☺☺. Can you upload next 13 crash course video?
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?
Is it possible to generate a sitemap index and sub-sitemaps?
How can i use priority and changefreq in dynamic sitemap?
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.
Thank you for your awesome video! whats you think about Drizzle ORM? Can u create a tutorial with supabase + Drizzle integration?
Thank you! Yeah, I’ll create a video about Drizzle soon 🤞
Nice job, Sitemap: How do you deal with sitemap limitations: 50Mb and less than 50,000 URLs? We have over 300,000 pages.
You can create different sitemaps.
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...
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.
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?
What's the name of that tool where you can see the web perfomance and SEO score?
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!
Thanks 🙏 I’ll check it out 🤞
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?
Can you join our discord? I can help you over there 👍
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 ;
Hey bro Make a video about Atomic Structure in Next Js
it's seem dynamic sitemap was generated at build time, if we create new post/category sitemap will not update then next build right?
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.
HI Sir, Can I use the same sitemap with the páges directory?
Yeah as far as I remember they were same. Even if they are not, the idea is same.
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🙏🙏🙏🙏🙏🙏🙏🙏
section about sitemap makes no sense, to geerate sitemap i need your blogs?
How can we use google fonts in og image creation with tailwindcss, pls share the info
You just need to import the font you need. Check the docs and you will find an example.
hey man how do I go about making a dynamic sitemap that updates everytime new content from sanity cms is added ?
Just create a server-side sitemap. It will fetch new posts on every visit you or Google make.
What is that application to check your website at 0:50?
Pagespeed Insgights from Google
How can i change image in metadata please
You need to create OG image. You can see the details in the related part.
Only useful if you're using the app folder
ngo
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..🤍🤍..
Thank you Farhad! I’m glad you liked ❤️