What's the point of spending months building your NexJS website if when it goes live, no one can find it on Google?

The reason why this happens is because developers often skip the crucial parts of making your website rank high in SEO because they're either scared of it or too lazy. If you're in either one of those groups, by the end of this article, you'll be able to make your website rank as number one on Google and get all of that beautiful organic growth.

let's get started, I have

Project Setup and Approach

I'm just going to use a sample project as the example that we're going to be demonstrate. So, imagine you want to make your website rank higher on the different search engines. How would you start? Well, the first thing you would do is make sure that you are always using server components to distinguish them if you're a beginner in next.js, it's just a client component will have “use client“ at the top, and that will turn the entire page into a client side rendered page. But when there's nothing there, it means that it is a server rendered component. Now, whenever you do need to have client side functionality, for example, a button that you want to have an event whenever the user clicks on it, or maybe you want to use a hook from React like a use state or a use ref. Then you make a separate component. You don't turn the whole page into it. And in that component, you'll make it into a client component. So the first major thing is you need to have most of your project being server side rendered. Now you might be asking yourself why. Well, the first thing is when a search engine bot like the Google bot or the Bing bot, whatever website you're using to search, when it visits your URL, it will try to read the HTML right away to understand the page content structure, links, metadata, all of that. However, if your page is client side rendered, then information won't be there because what a client side rendered component does it actually requests the JavaScript to download the UI. So, initially this won't have the HTML tags because it needs the JavaScript to download it first. And since the Google bot and bing bot are actually optimized for HTML content that arrives immediately in the response, So what happens to a server side rendered page. So when the bot enters this page, when the bot finds this URL, it will see the fully rendered HTML with all of the text with all of the heading metadata, links, all of that in place. So automatically, this is going to increase the ranking of this page because it will know all of the keywords and text that is inside of it. But if you're familiar with how React works on itself because it's client side rendered, you know that on the client components such as the navigation, this won't be the case because it has to wait for the bundle to download. So this is the first main concept you need to understand in order to get SEO in Nextjs. The whole point why NexJS even exists and why we created server side rendered components and why you avoid client side rendered components is because of this. It's because search engines are not optimized for client side rendering from React because its entire lifetime uh websites were always built with the server in mind and that's just how it is. So you need to make sure that you keep a minimal amount of client side functionality and only make client components when necessary. Now the second thing you need to understand is how to implement metadata into your pages. Well,

What is metadata?

Metadata is just information that you provide at the <head> section. So if you go to your layout.tsx, you know that we have the structure of the HTML. It's way more understandable. But when you add a head tag then you add information to this head tag and that information will tell search engines and social media platforms what your page is about. So in Nextjs instead of having to add your head. You want to add specific metadata for each individual page. The way you do this is through a very easy way. you go to every single one of your routes. And as long as It is a server side rendered component, you can export a const called metadata and it has to be of type metadata just like this. you import that from next and you have to maintain the name because if you don't do that then uh nextj won't know that this is the metadata you're trying to insert and then in here you can add a bunch of information about this page now what kind of information can you put on this metadata object the first one is the most basic one is just a title you need to define what the title of this page is for example if this page is I don't know a website that you can uh see recipes. You can put here uh recipes or amazing recipes, I don't know. And then the name of your page of your website, I don't know, recipes.com. Uh you can put a title, and this is what's going to appear at the top of your page. Now, not only it will appear at the top of your browser tab, but also it's what's going to show up in search results and social media previews. The next thing is crucial for SEO. It's the description. So, in the description, you can set a meta description. Uh, and it's what's going to also show up when you search for this website. So, you can put something very detailed like find the best recipes in the world on this website. I don't know. But you can put a good description over here and that's really going to impact your click-through rate. Now, the next thing is also crucial. It's keywords. You can pass a list of keywords that is going to help search engine crawlers to understand how to read your page. So in here we can put recipes, we can put uh food, we can put I don't know best recipes, uh whatever you want, anything that would help whenever someone is searching for whatever these keywords are, uh it will help the bots recognize that this page might be related to that.

Open Graph Metadata

Now if you're not familiar what open graph is is basically uh when you use a platform such as Facebook, LinkedIn, Slack, whatever platform he is and you search a URL in those platforms that URL will show up in a certain way. Now you want might want to customize how that URL will show up. So how do you do this? Well, there's this website called opengraph.xyz. And in here, you can enter your full URL. For example, I have a website. It's called webdev ultra. It's my course platform. And if I were to click here on webdvtra.com and click on check website, it is going to show what is shown whenever I try to share my webdevtra link on one of those platforms. So, for example, if I were to share this on Twitter or on LinkedIn, this is what itwould show up. And I customized it to uh look exactly like this. Uh it has on Discord as well, all of the social media platforms. Now, you might want to change this. I might actually want to change this cuz I made this a while ago. Uh you want to make it very specific to what you specifically want to be seen whenever you share your website. Now to customize this kind of stuff, what you do is you come over here and you add an open graph field and inside of it you can specify everything related to sharing such as even the title. Uh you can put something a little bit more concise maybe best recipes in the world. I don't know. Description, same thing. I'm just going to copy the same description, but you can put something more specific. Then you can even specify what the URL is. You can specify the name of the site, the overall name of the site. So I can put something like webdev ultra. Actually in this case it's amazing recipes. So I'll say

recipes.com. I don't know. And then uh you can put images. So you notice that when I had my webdevo form showing up over here, there is an image that is shown.

That's because I assigned an image as kind of like the logo uh or the image that I want to show whenever someone shares my website. You can edit by passing an array over here, not an object, an an array of objects that contain the URL of the image uh just like this with the width, the height, and whatever else you want to put related to the image. Now, I'm not going to add it. I'm just showing you as an example and I think that it's going to help a lot. Now when you are adding open graph I always recommend you to also specify the local which is the place in which you're sharing this or you're creating this. In this case I can put that it's in English and it's in the US for example. And the last thing is what kind of type of website or what kind of type of link you're sharing. It can just be a website uh just like this. It can be an article. Uh there's a bunch of options. You can see all the options just like this. You can be sharing a song, a book, an album, but you have to be specific because again, if you want to rank high in SEO, you got to give the bots everything that you have.

Now, the next field that I want to talk about is the Twitter field. So, for Twitter, it's

a bit different. Obviously this applies for Twitter as well but because Twitter came back came before uh most of the other social media platforms in the sense of sharing websites. This uh is part of how you structure your metadata as well. You can specify very very clearly how you want your Twitter card to show up when someone shares your website. And this is how it would look like. So you just add a Twitter object. You can add a card value. You can pass a title, a description, the actual tag of the Twitter creator who uh is the owner of this website and again any images that are related to your website. Now the next thing that is part of a metadata object is the robots. So you can specify in Nex.js how you want robots to behave and treat your page. So whenever I have a page like this, here is the kind of properties I would apply to a robots. I'll go over each of them individually. So when you think of robots, the first thing you need is the robot to be able to index your page. And the reason for that is because you want your page to appear in search results. If this is set to false, then it will block the index and your page won't show up on search results, which would just go against everything that we've been talking about. So you want to set this to true. This will control whether or not search engines can include your page in their index. The second one is follow. I recommend that you set it to true because this will tell bots whether or not they should follow links on this page. And you only should set it to false if you for some reason want to hide some linked contents from the crawler. Now the next one is the no cache. This will prevent search engines from storing a cached version of this page. So you want to set this to true uh if you want search engines to not cach it and you want to set it to false if you want it to allow caching. Now why does this matter? If your page changes frequently or it contains sensitive dynamic content disabling caching will ensure that search engines will always serve the latest version. But that on the other hand if they are not caching uh there's going to be a little bit of a delay in them finding your page. If they cach it it's instant. If not then there's a bit of a delay. So that's the thing. Uh I would recommend uh caching if your page is not dynamic and not caching if your page changes a lot. Now there are different types of bots that you can specify information for. The the best example is Google bot just because everyone uses Google. And with Google bot there's a couple things you can specify. All the things that we've mentioned before like specifying that you want the Google bot to be able to index and follow applies here as well. but also some other things like when someone is searching your website on Google or this page specifically is found on Google, you can specify the maximum number of characters that Google is allowed to display in the search result snippet. So, this can be useful for some situations. I'm going be honest, I don't really mind. Uh I always set it to negative one, which basically says that there is no limit. And this is the default and recommended way. If you set it to zero, then no text is shown. But if you set it to something like 200, then only 200 characters will be shown on the search results. Again, I recommend to set it to negative one. Now, the next one is max image preview. This this together with this uh just specifies u how you want images to be shown. Uh this is honestly I would recommend putting large if you are uh having a blog post or a marketing page. Uh same thing with the video. We set it to negative one which basically it just controls the length of a video. If you have a video on your page and you want to uh not show the entire video uh or just show I don't know a preview snippet of the video on the search results, you can put a value here as well. Now, we're pretty much done talking about the most important fields that goes inside of a metadata object. I would recommend you to go and put this metadata object on every single one of your routes. Every single one of them. No exceptions. Why? because this is what's going to differentiate your pages from being seen and not seen on Google. Now, it is annoying for you to do this everything manually. So, my biggest tip for you is use an AI bot or an AI code helper like cursor or tragic PT. The thing is I don't recommend coding everything with AI. I've always talked about this. However, with metadata, it's a lot of repetitive work in my opinion. Just go ahead, copy your entire page, post it on, paste it on whatever AI model you're using, and ask for it to generate a good metadata object. When it generates, you can then go ahead and change the small little parts that you don't want or you want to change, and then it will work best for you. So, go ahead and add all of the metadata to every single route. And now, let's talk about the next concept, which is dynamic metadata. Now,

Dynamic Metadata

it's easy for you to generate metadata for static pages like the about page where the content in it doesn't really change, right? It's just the same thing. So, you know exactly what this page is about. But what if you were for example on this page over here? Now, if you don't know what this page is, this is an individual products page. So, if I were to run this project, I'm just going to run it so you guys see npm rundev. This website is extremely ugly. It was completely AI generated just for the sakes of me uh making this video. But if you go to the products page, you see there's a list of products. If I click view details, this is a page that is dependent on the URL, right? It's dependent on the params. Meaning that how do I know what product is inside of here? uh in order to make that metadata object the information about the product depends highly on whatever this value is because this is a dynamic PM. If you look at our code over here and I go to the products page, you see it depends on this ID value. So what would you do in here? Well, this is a great opportunity for you to implement what is known as dynamic metadata. So in this page which is a serverside rendered component I am going to export an async function not an object and call it generate metadata. It has to be called that or else this won't work. This is a function that is going to allow you to generate a metadata object and utilize information about the URL such as the params because with the params we can get the uh the ID of the product. So you can access that directly from here. Now what is this going to return? Well, this is an async function. So it's going to return a promise that resolves a metadata object. So the idea here is we still want to generate a metadata object just like we did on the other pages. However, in here because the page is dynamic because there's an ID that comes from the params and that determines the whole UI of the page. Then we want to actually use this function to access the params and generate the metadata based on that. So the first thing we would do is get the params that makes this dynamic, right? Just get that and look at your page to see how you would interact with this. So first of all, if the product doesn't exist, then we're just returning basically nothing. We're not returning a real page. So the metadata should reflect on that. How do you do that? Well, you do the check here. If product doesn't exist, then maybe return the following UI. You return a an object that says the title is product not found and the description is requested product could not be found. So we specify the metadata of this page even though uh the product isn't found. So to to add the metadata, you just return an object just like you would uh exporting the metadata object previously. Now what if the product is valid? Well, here's a great way for you to make this page be fully dynamic with its metadata. For the title, for example, maybe include the product's name as part of the title. The way you do this is instead of just adding something generic like products page, you can do this. You can put the name of the product by inserting it. So, product.name. And then do I don't know maybe the brand of the product. Product.brand. and then just say the name of your website like uh I think we call it metadata website I don't even remember we're we're actually using recipes as an example but in here we'll do this so we just included the uh name and brand of the product as part of the title for description a good example would be doing something like this uh this is a little bit more complicated but we included the product description the price the if the product is on stock or not or even the rating of the product as part of the description. Many websites do this exact thing. If you go and search for a store on Google and search for a product, if you find the website link for that product on Google, you'll see all of this information. And you might think, "Oh, that's all Google doing." No, it's actually the person who built the website specifying how they want the metadata to show up. Now, I'd recommend going ahead and adding way more things like you could add the keywords and utilize the product information for the keywords as well. You could go ahead and add all the stuff that we added on the other uh metadata object, but I don't want to repeat everything. So this is the idea of dynamic metadata. It's very useful for situations like this where the product has a param and it depends on that. Uh and in this example, we also have a blog post here. This would also be a great example of a page that would benefit from having dynamic metadata. Now, the next concept I want to talk about is related to robots. And we've talked a

Robots.txt in Next.js

little bit about robots so far when we implemented this uh piece of configuration in our metadata objects, but there's a lot more that you can do. So there is a file that you can add to your project called the robots.txt. The robots.txt is a file that will tell web crawlers like the Googlebot which pages they can and cannot crawl on your website. And it's extremely important for SEO control. Now, usually in normal websites without Nex.js, you would make a .txt file. But since we are using Nex.js, NexJS has support for generating that file for you. All you need to do instead is to create a robots.ts file at the root of your project. So, at the app. Now, why does this even matter? Well, the first thing is you will have SEO control. Direct search engines to important pages whenever you want them to. you will be able to prevent uh web crawlers from wasting time on irrelevant pages that you don't want them to find on your website. Maybe for example, the terms and conditions or the uh privacy policy pages, those are not important for Google searches, right? So, you can basically block them. Also, if you have specific pages that you don't want information to leak out because of security or anything like that, you can block those sensitive areas. And if you don't have a robots.ts, TS I would say that your website will suffer from not having this granular control over how you interact with the robots. So what do you do in your robots.tcs? Well, the first thing I would always recommend is first of all make it simple. I'm just going to import this metadata route object and I'm going to export default a function called robots. Again, it has to

be called this because this is how NextJS will know how to get your JavaScript or your TypeScript and

generate the txt file. What this will return is a metadata route robots.

Inside of here, we're just going to return an object that contains the different rules uh for the robots. So,

what is the first thing that you can do here? Well, you can actually specify what you want to do depending on which

kind of robot you're talking about. There is this user agents field over here. If you want to make changes to

every single robot, you just apply an all field over there. Then you can pass

uh routes that you want to allow the robot to interact with. For example, the homepage. And you can pass a list of

pages you want the robot to disallow. So basically, if for some reason, if we're looking over here, we don't want the the

bot to look at the contact page. I don't know for what reason you would put here the contact page with a slash at the end

as well because then it will include everything after the contact page as well. Now if you you also might have an

API uh route in your project. If you have that definitely include the API route there as well. Now you can go more

in details. You can also pass a list of the ones you allow instead of just passing an empty slash over here. You

can increase the amount of uh lines you or routes you want to disallow. But also what you can do is instead of passing

here just an object you can make this into an array. And this array allows you to give rules for different uh user

agents. Like maybe for Google bot you want to disallow a route that you didn't

specify here and it's specific for Google bot. I don't know you can put here the terms and conditions routes.

And now I would recommend if you want to be very very uh detailed about this kind

of stuff to search up all of the different search engine bots and see which ones you want to interact with

your uh website because if you think about it these bots are really making requests to your website. So sometimes

uh if you uh have a lot of bots, some of them might be very aggressive in uh crawling your information. So they might

impact your website. Uh there's for example a bot called MJ12bot uh that I think is is pretty pretty

aggressive when it searches and crawls for your information. So you might want to for example disallow that bot from

reaching out to certain pages that would impact your performance. So you might want to specify that kind of information

over here. Now the next concept that I want to talk about actually plays into

Sitemaps for Better Crawling

what we're doing over here which is a sitemap to your website. Now, what is a sitemap? Well, a sitemap is a file that

tells search engines about the pages on your website, helping them discover, crawl, and index your content more

easily. So, when you create your site map, you can specify how search engines

will find all your pages, the priority of each of the pages, how frequent they change, when they were less modified,

and because of all of that, your SEO will improve. Now, to make a site map, you have to create a file similar to

this robots.ts. ts. You come over here and actually I'll just copy and paste this because it will be very similar.

We'll create a sitemap.ts which will generate the sitemap for our file because uh in reality a sitemap file is

not a ts file. It's an XML file. But using Nex.js we can just make it like this. We'll create a sitemap and in here

we can get the sitemap as the return type. Now how does a sitemap looks like?

Well, it looks like this. You can pass a list on this return and on this list you

need to pass a URL. Now in reality put the real URL of your website here. So in

my case for example with my website I would put webdev ultra and the thing is

or webdevultra.com I would recommend getting this as a base URL and

extracting it because you will be changing as we go through this list. Now what do I mean by that? Well, the first

one is just your base route. So, it's your main pages. If I go to my website

here, it would be uh whatever is over here. And you might want to rank this in

a different way. But what you would do is for each route, you would put a last modified field, which for example, I'm

modifying it right now, so I'm going to say today. Then the second one is you would pass a change frequency. How often

does this page specifically changes? Maybe it's all the time. Maybe it's daily, maybe it's always, maybe it's

hourly, I don't know. I'm going to put weekly just as an example. Then what

else can we put? We can put a priority. Most times the landing page is super important for a website. So maybe the

priority is number one. So we'll make this be number one. Now let's go and add

another page. Let's go into the about page because we have the base URL. The about page is just the base URL plus we

can add the value here slashabout at the end. We can pass a less modified just

the same way. We can change this to maybe monthly and the priority to something below one like 0.8. What you

would see in a real website is something on the lines of this. every single uh URL would be specified with their own

priority and uh frequency and this will help uh search engine crawlers get our

website more easily. Now you can also create dynamic site maps. However, I won't go into details about this.

Dynamic sitemaps are basically the exact same concept as what we learned through dynamic metadata over here but with site

maps. If you have pages like this, you can specify the priority of the different items uh depending on some

sort of a program. Now, because we created this site map, we have to uh specify to the bots where our site map

is. So, in our robots over here, we can actually add a field called sitemap and

just link our website which has this base URL. I'm just going to copy this, paste it over here, and then I can go

ahead and say sitemap base URL/sitemap.xml.

If you go to any website, you should be able to see this. If I were to go to my own website, right, this is webdev

ultra. You can see that if I go to sitemap.xml, this page is public for everyone because obviously it needs to

be public for um the bots to be able to access it. And you can see in most websites there is a sitemap.xml XML

associated with it. Now, in here, we're just setting the sitemap URL to be this.

So, this is basically it for sitemaps and robots. I understand that at this

point you might be like, "Okay, I've it feels like we're just adding the same thing over and over again, right? We're

just adding so much detail for no reason." But trust me, this is why I recommended you to use maybe an AI bot

to to at least generate the structure of this kind of stuff. But you really need to be good at knowing the different

fields and what they do because then you will be able to fully control the SEO of your website. And I know this sounds

this all sounds like why am I even wasting time doing this? Well, the reason is you built a website for other

people to use. So, you really should be spending a lot of time trying to get the real players out there like Google to

rank your website high. And all of this kind of uh stuff will just help you with that. So, now it's time for us to go to

Canonical URLs and JSON-LD

our next concept, which is canonical URLs. So, a canonical URL is the

preferred version of a web page when multiple URLs point to the same or very similar content. So it will tell search

engines which URL should be considered the let's say authoritative version of a

page like the the main version of the page. And it is really good because when you have a big website like this there

might be some duplicate content. So you're going to uh be penalized uh by

the SEO gods like the the search engines if you have duplicate content. So you want to prevent that. Also, it will

combine ranking signals from multiple URLs which will end up ranking your page

higher. Also, similar to what we've been doing all along, we want to help search engines focused and uh improve its

efficiency. And by using canonical URLs, you will have that. Now, what is a scenario in which this might be an

issue? So, imagine here we have this products page, right? We have each individual product and the uh ID of the

URL, right? the PM changes, right? Depending on what product we're in. Maybe if I go to uh let me go to this

website, I go to products and I were to click on this product. It's a laptop pro, right? Now, imagine that on this

URL, I would add search params. If you're not familiar with search params, basically imagine I could come here and

put black or actually no, I can put something like color is equal to black.

This is a search param that if this was implemented on this website, maybe this laptop could have different uh colors.

And because I'm on the URL that says color equals to black, it will default the page to show the laptop that has

that color. That's done all the time on different uh websites and they usually

have different filters as well. Just the same way how they have a color equal to black, they might have a size equal to

15, I don't know, something like that. But the thing is there's no difference between this URL and the one with the

caller. There's no difference based on a search engine. And we have to explain to the bots that there is no difference. So

in a real scenario, you might find yourself with something like this. I'm just going to use this as a place for me

to write some comments. You might see something like this. A bunch of different uh URLs that are kind of the

same thing um but they are slightly different. So the bots will treat them

as different unless you prevent them. So here is what can URLs do. To implement a

simple one, I would recommend going to all of your pages. For example, the about page and somewhere in here just

adding an alternates field and passing a canonical field with the exact URL of

this page. So if this page is I think we used a recipe example for this one. We said recipe.com.

Let's just do that. recipes.com/about. Just just do this. This is all you need to do for a static page like the about

page. But for a dynamic page such as the example that we talked about, this one

over here in the generate metadata, which is the uh dynamic uh function that

will generate different metadata depending on uh which uh param you have. What you can do is do this. you add the

alternatives and here you can add I'll keep the same example with recipes.com

but what you do is you insert the params to this so you just do this you insert

the params id directly into this also you have to put products here and now we

should have dynamic canonical urls also make sure that you always use absolute

urls never something like this always put directly the base URL as well so

that it can work better. Now the next thing I want to talk about is the concept of JSON for linked data. Now I

don't want to go too much into detail because I feel like the other things are more important and this is a little bit more advanced but basically JSON for

linked data also known as

JSON-LD.

It's basically a method for encoding

structured data using JSON as a format. It will help search engines understand the content and the context of your

pages which will help you with everything ranging from having better search results uh better ratings uh page

like search engines will understand your pages more and and even new things like AI assistance and uh voice search. So

normally you would use a script tag in a normal website and specify that uh it's a script tag for a link data JSON

object. However, we are in Nex.js and Nex.js has great support for this. So, how would you do this? Well, I'm going

to go here to our products file and this is would be a great example for this. The whole idea here is that JSON is a

very used format of data, right? And when we have JSON in our page in some

way or another, that page become more becomes more valuable because web crawlers can read JSON very easily. So

in here, this is our products page. It has a bunch of HTML depending on the UI,

but it has no JSON in it obviously. So one thing we can do is somewhere in here

we can create this uh object. We'll call it structured

data and then set it equal to um a JSON

that will include a bunch of informations about um what this page is.

So, I'm actually going to copy and paste how I would create the JSONLDD structure data for this page. It would look a bit

like this. Now, I recommend you going to schema.org and looking at um how you

would structure this kind of information, but the idea here is you're giving a very concrete and clear example

of what this page is. So, for example, what is this page? What is the name of the product? What is the description?

the brand, the category, the offers, the rating, all this kind of stuff. You're

just adding it to here. Now, just having this object is not enough. We actually want to insert this uh script or we want

to insert this object into our um HTML. So what I do is above the nav anywhere

in your page actually you add a script tag and you put a type for this script

call it application slashldd plus JSON which will stand for

link data JSON and then you're going to have to use a dangerously set inner HTML

because obviously we're inserting into the script and you add an HTML field

with a JSON dot stringify of the structured data and

that's it. You do this for the pages that you find valuable to have this and you will benefit from it. Now, I

wouldn't recommend doing this on every page. I think on the products page, on the blogs page, it should make sense,

but on the other ones, it's it seems totally fine. So, I would only add this if you find absolutely necessary. Now

Semantic HTML and testing

it's time for us to talk about the last topic. And this is actually a bit easier

from the other one compared to the other ones. And I left this for last just because uh I wanted to talk about the

more in detail ones, the more specific ones. And this one is more of like uh something that you should already know

if you start building Nex.js, JS even if you're not at the point where you're worrying about SEO, which is when you

build your pages, you make sure to use um HTML elements that pages understand.

So, what is a great example of this? So, let's go here to our um I'll go to the

components here to the navigation. First of all, you see how we're using this nav component over here. This has no like

there's no difference in the utility of it compared to me just using a div. But why did I use a nav? I used a nav

because on HTML nav stands for navigation and this is a navbar or a navigation component. So when a web

crawler crawls our website and it sees there is a nav, it knows for a fact that this is this is a navbar. If it saw a

div, it would have to understand the page first in order to get that this is a navbar. So you want to use components

like that. Another great example is on the blog post. If I go to this page over here, this should render a blog post. If

I go to the uh let me go to the blog. So you guys see there's three blogs. If I were to click on this, you see this is a

blog post. Even though it's super ugly, again, I don't really care about that. It is a blog post. Now, if you come over

here, you might have noticed that I have an article tag surrounding this entire

blog post. Now, why do I have that? Well, because again this is an article

and even though this does nothing to the page, if I were to delete this, you'll see that it doesn't change the UI of the

page. Having this helps um search engines to understand what we are

dealing with. Same thing with making the header be a header instead of just a div because it is the header. So, might be a

good idea to add the header tag. So I would make sure you always are using

this kind of component structure so that uh search engine crawlers will understand how your page looks like.

Now, on top of that, if you want to test to see how good your website is, I would recommend you going to your website and

then clicking inspect, not view page source, inspect, and then just open up your Google Chrome, going to the

lighthouse, and then literally doing this, just go ahead and click analyze page load. This might take, I don't

know, like like a minute, and it will give you a score of how your website ranks. Now, this is on my local host, so

I personally don't think this is the best example. And also we don't have any database calls here. So it might be a

perfect website. However, when I started building my website, my course platform,

WebDev Ultra, and I was going to have that platform work for uh thousands and

thousands of users, I was really really worried about this. So you see the result of this gave us a 99% score. Uh

it gave us 99 for performance, accessibility, and best practices, but only a 91 for SEO. So this is the kind

of thing that you need to account for because when you click on SEO you'll see that it will give you information on why

this is the score and I purposefully uh made sure to make this mistake so that

you guys would see how easy it is to fix those issues. So you see it gave it gave us a 91% score. But why is it? It says

that our robots.txt is not valid. Now let's go to our robots.txt txt and I

want you guys to see if there's an issue at least an issue that would be clear on this uh analyze page load over here.

Well, the issue is that the base URL is set to web devotra instead of for

example localhost 3000. Now, in reality, make this base

URL be an environment variable. So, it's different in the local host and it's different on um production. But if I

click here, you should see that yeah, this is exactly the error. If I were to analyze this again, this should be fixed. But what I recommend is every

time you have a website uh and you want to produce it, go to your website and analyze the page load consistently. For

example, in here, I could I would constantly go into the course pages and I would just analyze the page load. And

in the first run, it wasn't the best, but then I just kept fixing it, especially with SEO, until I got a

perfect score. So, this is what I recommend. And this is the basic idea of

this video. If you feel like you learned a lot from SEO in Nex.js in this video

and you want to learn a lot more, don't forget to check out my Nex.js course for beginners. It is this course over here.

We recently launched. We're still in early bird pricing. So, if you want to get it before it gets more expensive,

feel free to do so. Um, I will teach you everything from the beginning up until being able to build a full stack

application. We build a Twitter clone that has all of the important features

that Twitter has and will teach you not only how to build them, but how to optimize them to be able to run as fast

as possible and deploy the application. So, if you're interested in learning XJS and you are a beginner, feel free to

check out the code will be the link for the website will be in the description. And again, we are in early bird pricing.

So, if you want to learn XJS and you're having a hard time, this is the best time to do so. So, thank you so much for

watching this video. If you enjoyed it, leave a like down below and comment which you want to see next. Subscribe cuz I'm posting every week or every

other week and I would massively appreciate it. And I see you guys next time.

NextJS 16 SEO Crash Course - Metadata, Robots, Sitemap, OpenGraph...