React SEO with Next.js - Dynamic SEO Meta Tags Tutorial
Вставка
- Опубліковано 29 чер 2024
- Learn how to optimize your React app for search engines by using Next.js. We'll walk through how Next.js can take your SPA's SEO to another level with the Head component.
🧐 What's Inside
00:00 - Intro
00:10 - Sponsored by Snipcart
00:21 - React SPAs and challenges with SEO
02:11 - Importance of SEO
02:43 - Using Next.js for React apps to help with SEO
03:51 - How the Next.js Head component helps with SEO metadata
05:13 - Adding the Head component to a new Next.js page
06:43 - Creating dynamic page routes with prop-based SEO metadata
10:38 - Testing and monitoring SEO
11:20 - Outro
💝 Sponsored by Snipcart
Sign up with the link below to get your first month free!
spacejelly.dev/snipcart
🗒️ Read More
snipcart.com/blog/react-nextj...
🔔 Subscribe for more tech and developer videos
ua-cam.com/users/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: github.com/sponsors/colbyfayock
Other: hello@colbyfayock.com
👨🚀 Brought to by colbyfayock.com
www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
www.colbyfayock.com/what-i-use
🧰 More Resources
Next.js Head
nextjs.org/docs/api-reference...
Next.js getStaticProps
nextjs.org/docs/basic-feature...
Next.js getStaticPaths
nextjs.org/docs/basic-feature...
web.dev
web.dev/
Google Search Console
search.google.com/search-cons...
🎼 Music
Music from Uppbeat (free for Creators!):
uppbeat.io/t/sensho/glow
License code: 7TLOUIWTNSMGLLV0
#colbyfayock #seo #nextjs #reactjs #webdevelopment - Наука та технологія
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Not just an SEO tutorial, this was also a super quick NextJS crash course. Amazing! 💜
Thanks 😁
This is such a great tutorial. I added this to my e-commerce build, and my client was blown away. Thanks, Colby!
no problem, glad to hear it was helpful!
Love the content on your channel. Latest technologies and clear explanations. Great going!!
thanks Himanshu!
I WAS JUST LOOKING THIS UP! THANKS COLBY!
no problem :)
Yes Colby!! The content I didn’t know I needed
haha glad you found it helpful! 🙌
Awesome! Thanks for this video Colby. 😍
no problem! 🙌
it's so awesome. the first time i see something like this. thank you very much!
i agree, its super awesome! no problem :)
Very concise and helpful. Tnx Colby 🙏
no problem! 🙌
You helped me out a lot here. Thanks!
No prob. Happy to hear that! 🙌
I’ve recently taken upon learning the Jamstack and you are hands down one of the best teachers for it here on YT. Thanks for all your insight :D
Thanks for the kind words Stefan, glad to hear it's helped!
Thanks Colby!!
no problem! 🙌
Thanks for this video brother 👍
no problem!
I am really loving Next js. Building a project with Next.js Thanks for this it'll make it better
yesss Next.js is so good. hope it helps! also have a bunch of other Next.js if you wanna poke at any :) ua-cam.com/users/colbzsearch?query=nextjs
@@colbyfayock I am always excited for that content
Really good and elucidated video, thanks a lot for the content :)
No problem!
You’re the best bro keep up
thank you! 🙌
very informative, ty
no problem!
Very cool 👍
thank you!
thanks you, that's helpful :)
no problem!
thanks!! from japan
no problem!
Awesome!
🙌
just an extension to SEO. Plz make a video on how we can create a dynamic site map for next js applications
good idea, ill add it to my list!
Nice video sir
thank you!
Thanks for the great explanation, Colby!
A quick question on Next JS & SEO on it. How do we add Schema Markup on Next JS projects?
good question, here's how we're curently doing it on my NExt.js WordPress Starter, by just adding it as components to the page: github.com/colbyfayock/next-wordpress-starter/blob/main/src/pages/posts/%5Bslug%5D.js#L73
it seems to be properly validating: validator.schema.org/#url=https%3A%2F%2Fnext-wordpress-starter.spacejelly.dev%2Fposts%2Fhow-to-create-a-headless-wordpress-blog-with-next-js-wordpress-starter%2F
Loved the narration and the content! Thank you so much! Dynamic tags work perfectly inside the browser but unfortunately I can't make it work for crawlers. For example I'm trying to make it work the "twitter:image" tag and as soon as I make it dynamic it stops working.
The page source loads the HTML at first with "undefined" in place of the variable. If I wrap the tag like this { variable && } the whole tag is not included in the HTML when the crawler hits the page.
@@accretence hey! so as you've seen thats definitely the reason why it's not working. how are you building your site, statically? SSR? it would need to come with that first request in order to work for OG images. that means the dynamic data needs to be available at compile/request time for instance
@ll_kak check out one of recent videos which show you how to do just that! ua-cam.com/video/pjhjqUrG9O4/v-deo.html
Great video. 7:48 to save some peoples time :D
Thank you! 😁
Using next-seo makes this so much easier
Nice!
Hi Colby! I am able to get og meta tags dynamically as I could see the tags through inspect element on my browser. But I am having trouble getting the previews on Social Media when sharing links based on the tags. I ran a test on the facebook debugger tool and it says the og tags are missing. If you have any clue how to achieve this would be a great help. Thank You!
hey Nitin are you using the Next.js component? I recommend trying to run next build, then next serve, and then *viewing the source* instead of inspecting it in your browser, as the devtools will show the html rendered by JavaScript
Good video thanks. What VS theme is that? Im going to look into Next.JS with very dynamic content (imagine this tutorial - but there are 1 million products, which are in a database. Would this work for SEO from the database?)
hey thanks! Night Owl :) marketplace.visualstudio.com/items?itemName=sdras.night-owl
and yup this would work with any kind of dynamic data
@@colbyfayock Epic thanks going to apply theme and try out a test project now!
If I have tags on my posts, would I be able to do the same as you have done for the SEO tags?
the dynamic tags with should work with any page!
Is there a way that I would only have to update the `_app.js` file? So I could make it dynamic?
im not sure that you could. youd need a way to figure out which route you're on to display which metadata, and idk that the Router would let you get that inside for it to be server/static rendered, you could try though
there's also getInitialProps but its not recommended and opts you out of some automatic optimization
the idea is that in the pages where you're requesting dynamic data with the fetching methods, you can include the metadata right along with it
When I test the facebook shared debugger, the dynamics meta og tags are not rendered, so the share link don't receive any data. When I use getServerSideProps, it works, but for performance purposes I really want to use getStaticProps. Can you check this bug?
i would check the source code before javascript rendered in the browser to see what it shows there first. using getStaticProps shouldnt matter for showing the metadata as it's just the source of the data
how to add SEO on reactjs website without nextjs? we have a huge codebase on react and we cant shift suddenly to nextjs ,it takes a lot of time and efforts again to build the frontend from scratch in nextjs.
understood! that's why this video is specifically designed to cover the use case when using Next.js :) but for a pure React app you can try github.com/nfl/react-helmet but you need the tags to render in the original HTML request, not clientside
Love from Pakistan 😘
🤗
How to generate a sitemap for all dynamic pages in next.js?
there's not really a fantastic solution in the Pages Router, but if you're using the Next.js 13 App Router, it's pretty easy: ua-cam.com/video/6wD3AXZy71M/v-deo.html
I don't wanna keep copying and pasting my head tags, I wanna get them automatically and update only the parts that I want. For example, I want the same title for my website but add to it the product page title when I'm at the product page and so on without copying the title by hand, is that possible?
you can add default tags inside of a custom app.js file inside of a component and anytime you use them in page routes it will override them. you could also look into trying this: github.com/garmeeh/next-seo
@@colbyfayock thanks so much! This is a great plugin, makes it so easy to handle seo stuff.
I want SEO width landing page multi language, so how do I need to do? Thanks
you would need to provide a separate page for each language that would individually get indexed. i would recommend also looking at developers.google.com/search/docs/advanced/crawling/managing-multi-regional-sites
@@colbyfayock I use i18next to switch languages on a page . I have abc.com/en/, abc.com/fr. so how do i define a separate meta set for each url /en, /fr.. Thanks
@@thutrango100 i haven't used this before so not totally sure. can you not use it just like you would with typical page content?
I have 1000s of products. I cant load them as static paths. How do I do og tags for this scenario?
Are you using SSR? If so it would pretty much be the same
@@colbyfayock no im not using ssr. but i need to use meta tags. these meta tags should be loaded first and then the rest of tbe html.
@@jeriking6170 the meta tags need to come along with the first request of HTML, meaning it needs to be statically rendered or served via SSR. if you're only loading the tags dynamically in the client it's likely that won't work as the crawlers won't pick that up
Can we view dynamic meta tags are view page source
hey! I'm not totally sure what you're referring to, could you elaborate?
@@colbyfayock tq for the reply when we add dynamic meta tag we were unable to see meta tags by clicking on view page source menu in developer tools
@@manjunathamj3452 the data needs to be available at the time the application is rendered on the server whether during compilation to static files or on request
I have my website I have made using next js none of my dynamic url are getting crawled by Google or any other search engine bots i have head component for dynamic urls what am I doing wrong?
did you check the actual response from the server? the first HTML response needs to include those tags. you can see that by using View Source, not the devtools. all the tags need to be on the page using getStaticProps or getServerSideProps
@@colbyfayock titles and others parms in head are not appearing in view source but it's appearing in inspect element what should I do to make it fix?
@@vivekknShots right, as I was saying, all the tags need to be on the page using getStaticProps or getServerSideProps. this video might help ua-cam.com/video/pjhjqUrG9O4/v-deo.html
@@colbyfayock Oke i will try with this method
i added getServerSideProps to my site as u said to send but still my webpages are not getting indexed
what if the ids are dynamic?
do you mean if the product data is coming from an actual data source? this video might help which uses similar data fetching methods to grab data dynamically from an API and add the content to the page: ua-cam.com/video/pjhjqUrG9O4/v-deo.html
@@colbyfayock thanks for the reply. I already found a way to achieve that using getServerSideProps.