Mastering the basics of SEO in React and Next.js

Hello how are you doing? I'm Lee Halladay and we're going to cover SEO and

react

specifically to SEO and then Jas, I have this beautiful app right now. This is a grumpy llama with a picture of a grumpy llama that I found by Googling the term grumpy. call so you know it's going to be great and we're going to start from the beginning and we're going to have kind of an idea of ​​where our SEO is at right now so we're going to go into Google Developer Tools to audit and I'm going to specifically look at accessibility and the SEO right now.

You'll probably want to worry about all of them in your app, but we're talking about SEO, so we'll have it running, so if I do an audit on this. app, it will come back and tell me what my SEO is like, so I guess a 73 is a passing grade, but it's not great and my accessibility is worse, so we can go down and see what it tells us, things like we don't have a degree in the one here in HTML we don't have an alt in our image and the reason I included both accessibility and SEO is because a lot of the things you do to make your website SEO friendly will also make it accessible and vice versa, so let's go into our

next

j/s application and try to get them both to a hundred, so I'll move on to the vs code.

I have an upcoming basic j/s application that literally only has this. page showing a div in h2 and image and the only packages I've installed besides

react

and react tom are the following so it's as basic as it comes and the first thing you want to do that really has nothing to do with it What we can to do with react or the following j/s is to simply use semantic HTML that is structured correctly, so what we could do is change this div to a parent. You should only have one main tag per document, but this represents the main content of your page and you wouldn't start with h1 even if you want to change its size, you should do it with CSS, not by changing the semantic meaning of HTML, so this should be in h1 because it represents the number one header on our page and the

next

thing you want to do is add an alt and all the attributes to this image tag so we can say here that this is a grumpy flame, so just by doing those couple of things We should improve our SEO a little. look what we come back with, yeah we bumped it up from 70, whatever, to 82, accessibility also bumped up to 82, so we're moving in the right direction, the next thing we're going to do is make sure that I have a title element in our page, so the title element goes inside the head, but you'll notice that here I don't actually have a head.

I don't have HTML today. I don't have a body tag. I won't have any of that next. Yes, it's handled by the framework itself and then I'll show you how to override it so you can customize things at that level, but there's another way to do it when you're customizing content. that goes in the header of every page so the next j/s comes with a component that you can import called next header header and we can just put this here like this and anything we want to go in the header of this page we can just put it inside this parent component to mean the title, so we can say Grumpy Llama homepage, whatever you want the title to be, and whatever other tags you want to put in the header, so if I come back here, you'll be able to see Now that I've actually taken it and put in the title, it's displaying correctly, so let's get into some SEO specific tags.

I like any programmer. I looked for good seo tags who like the seo tag guide and they told me that there are some that you should always have. should have this kind of meta content, so we'll take it and put it in our head, it says we should have a title, well we've got that done, we should have a meta description, so there's a document here that talks about the good what is it. The description is: I'm not going to worry too much about it today, but we're going to add a meta with a description name and a content of an image of a grumpy Lum or whatever its correct description is, it goes here, so by doing that, start getting the necessary tags for SEO and Google and your ranking and all that to be happy, the last one that they consider a good tag that you should have is the meta viewport, so the meta viewport basically helps to fix the size of the browser correctly when on a mobile device and I guess this helps with SEO so we'll include it too.

They have an error. I forgot the quotes. There we go, so we have our three meta tags and we can do an auto close. one and let's run our audit again and see what we're getting now, hopefully we'll start courting, so we're actually at 100% SEO, which is great. I thought we wouldn't be there, but we're still missing accessibility, so it says the HTML element doesn't have a Lang attribute, so this is the first time we want to jump from something that's specific to a page and we want to start change it for our entire website and we can actually move a couple of these. meta tags like this and the viewport and the content type, we can move them off the individual page and into a global area because you don't want to have to repeat that on every page, it won't change things like the title and description will change on every page, for so you should keep it inside this page component and any way to change the global HTML tag or do things globally in the next j/s we are going to create a file called dot JSX underline document, so this is a filename special that Jess is looking for next that allows you to override how they call the document, so this is sort of changing the content of the entire HTML frame level.

I'm going to go and link this in the description, but They have a section under Advanced where you have your custom document. I'm going to copy and paste this because you don't want to see me, I'm trying to remember all of these things, so we have inside this underline document. I have an override called my document, we don't really need to mess with the initial props, so what we have here is just returning a special HTML component from the next j/s, the same header that we've been using on the page. level now we have this at the document level, so it will be reused on every page within our body with our parent.

This is what each individual page represents that we will have in our next j/s up and then the next one. script they use internally. I'm not even sure what it does, but it doesn't matter, so if we go into this document, we can remove things that should be global, so we'll change this to open in a closing tag, we'll add that meta tag there, we'll add this meta tag here and that should be good, it should be global now, so we'll just clean up this code again on our page and the last thing I'm going to do is add a language to the HTML.

I've seen that sometimes you have some problems when you modify the document in the next yes, but we will update it and hopefully it will be good, we can inspect our yes, I see that you don't have. the HTML here, so I think you need to restart your server that way, so it actually doesn't like this Dom http-equiv property, maybe we need to do the react special way to do it like that, to see if it's happy now , it looks like it's I'm happy because it's in react and not pure HTML JSX, it actually wants this province to be dead, so we fixed it because I reset it.

Now I can see the language here in the HTML, we have all our correct types of meta tags. Here it probably looks like we don't even need this one because we have the character set here, but I don't think it's hurting anything, we have our description, so the last thing we need to do is why don't we run this again? and see if we have increased our accessibility and our SEO to 100%, so we have gone from starting with no special SEO code that we have written by just adding some tags, we have upgraded this page up to a hundred SEO and a hundred accessibility and it was as simple as in each page, just making sure to put the title in the meta description, making sure we use proper US semantically structured HTML, meaning each one comes first, then h2, etc., adding alt tags to our image and then We looked at customizing the document, allowing us to dive in and change the Lang attribute in HTML, but also place some meta tags that will be used on each page of our website.

Now is the last thing I wanted to show you. is that one of the beauties of next Jas is that it's server-side rendering and that actually helps a lot with SEO because as far as I understand it, Google has two types of crawlers, one where it just grabs Raj. TM l of the page and they do this later or more often and that only happens correctly when you have server side rendering, so if we were to curve the website that we were viewing on port 3001, you can see that the server produces The full HTML is needed for the page so we can go in here and we can find here is our h1 area.

We could search for our title. It has to be here somewhere. Here is our Meta description. Anyway, the title should be here. Just blind title, here we go. it's generating all the HTML needed for Google's crawler, which is kind of a dumber crawler that doesn't actually display the page, it just grabs the HTML. They also have another crawler that will scan the page more like a real browser and I believe. That's the future, but for now it's nice to support server-side rendering when you're really concerned about getting the best SEO. That's all for today. I hope you like this video.

I have another one on the way. Let's do the same. thing but inside Gatsby and that will be out shortly have a good day everyone take care bye