 When you set up your SEO right on your Elementor headers, well, you can get really good results with your site links Things that look like this. You know those extra links showing extra pages underneath the search results Those are the site links But here's the thing when we are not following the SEO best practices and even Following some bad ones. Well, we're not letting Google know exactly how to index our website We're not telling Google that hey, here is our menu Here is how we want you to show our menu when people search for us. So inside this video, that's what I'm going to show you I'm going to break down how to best set up your Elementor Navigations your menus and your headers to get the best SEO results and I'm going to show you how to prevent Making some critical SEO errors. What's up everyone? I'm Jeffrey at Lightbox and if you geek out like I do on SEO and you love stuff like this Then let me know inside the comments. Also, don't forget that good YouTube stuff like and subscribe All right, let's go ahead and dive into Elementor and get started Before I could even break down each one of these menus is very important to understand What does Google even look for when they're crawling a website trying to figure out what the Navigations and menus are this is all inside the HTML markup. So back here Let me show you what this markup looks like and what we want to achieve First our entire header should be wrapped inside this header tag And it should look like this. Let me fix that up So this header tag right here is going to wrap around the entire header Everything that we have Above our content on the top of the page That is going to wrap around this top bar here and then even for this more complex one that has two different sections It has a top section here and this bottom section We're going to want the header to wrap around the entire thing Now next up what we're going to want is a nav tag This is going to let Google know that hey, this is where the navigation is our menu is Right between these tags between the nav tag. We want to have a UL tag This UL tag is going to wrap around our menu. This is telling Google This is our menu right here and then in between the UL tag We want to have an li tag the li tag is telling Google This is our menu item. So each one of these The service the prices our team resources each one of these elements. These are li's right here These are their own individual menu items and then between that we have the a tag Which is a link right here and that's just the link that goes to the page But what is really important is going to be this header this nav This UL and this li that is what we want to achieve. So let's take a look at menu number one I'm going to pull up the navigator. It'll make things a whole lot easier All we have is one container wrapping everything no inner containers We have the image which is our logo and then we're using the WordPress menu widget This is the same as a nav menu widget same exact widget Elementor just changed the names recently now this widget right here the WordPress menu widget is by far The most SEO optimized widget we could use and fact It's the only one that I use for my menus and because it has just done so well for SEO Let me show you I'm going to pull up my inspect element and show you what we have over here Now here is our menu see when I hover over it We could see it getting blue now. We have the nav tag. That's wrapping around everything We have the UL. We got the li and then followed by the rest of you guys. This is super clean This is perfect HTML markup that is best for SEO and that's the reason why I use this widget Everything is just the way it needs to be and what's best about this is there's not a bunch of divs and spans And there's not a bunch of other Tags and it's not messy. This is super super clean now using this right off the gate right off the gate right here It's going to get you great results There's only one thing that we need to do in this situation We need to get this header tag to wrap around it So to do that for this particular situation Because we only have one container right here wrapping around everything I would go to this container or if you're using the outer section the whole section is out of work as well Go here navigate down to additional options We're going to see the html tag from here select on header Go ahead and update this. Let's take a look at the front end I'll refresh that and If we look at it now, we have scroll up. You can see all those divs. It's not that many though It's not as bad. But here we go. We got our header And that's what google's looking for they know. Okay. This is our header. They go down here. They see our nav Like hey, that is our menu right here They see the ul and li and google's like that's the menu. Those are the main links inside the header Those are going to give you the best results when indexing your website and trying to get some really good site links Next up we have header number two now this one is very similar But it's also got some differences. The main difference is there's a lot more elements happening here We got more widgets more things going on. First, if we look over at our navigator We can see we got two main containers. We got this top bar right here You might want to use something like this for callouts promotions for you know to add socials things like that And then we got the other container down here that contains our menu Now we also have more elements inside this than our simple one and header number one We got our image, but we also got our WordPress menu widget, which is the good one the one we want to use But then we also got a call to action button right over here So let me show you what to do. There's two things we could do to optimize this right here First off, this is already optimized right here Just for the fact that we are using the WordPress menu widget But now we need to wrap this whole thing up inside the header just like we did in one Now in header number one, we put that down here in our container But we're not going to do that in this case because we have two containers here So we want that wrapped around both containers. So in this situation, we will go down here to your settings Over here to html tag And then we're going to navigate here to header Now we have a tag wrapping around the entire thing It might be wondering how come we don't do that on header number one Well, here's the reason why we don't do it on header number one If we go back and we look at that html markup, let's use the inspect element Well, you can see above the nav when we get these divs right over here and those divs start to add up There's quite a bit of them Now I want to reduce the number of divs between my header tag and my nav tag I want to keep it as clean as possible. It's just for best practices And it's going to help to give the best results that we possibly can get And that is the reason why if you're using just one container Put the header in the container if you're using multiple containers or multiple sections Then put it on the page settings that wrap around the whole thing But we're not done. We could still optimize this menu a bit more. So right here We got the nav menu widget or the wordpress menu widget and this is great This is going to show google that all of these are part of our main menu But this contact button Maybe you want the contact page to have a better chance Be an index inside those site links in that case Maybe using a button for a link is not the best option even if it's a call to action There is an alternative option now first take a look at this. All right our wordpress menu widget It's pulling this menu right here if we go up to our back end Here is our menu And that is what's being generated inside the front end now instead of using a button say for like a contact us But you do want that button inside your menu. What you could do is let me go to view all I'm going to add the contact here And if I go to the top in the screen options, I could turn on css classes And now over here inside my contact I could put in a class Uh, let me see. I'm going to call this menu Menu cta call to action And now I could use just a little bit of css to style it up I could create my own button with a little bit of css Now if you don't know css, you're not comfortable with it Maybe using a button widget would be a lot easier But you could also reach out to somebody inside one of our communities For Elementor and I'm sure somebody to be very happy to send you code snippet Including this guy just let me know inside the comments and we could hook you up But see doing this though you're keeping your menu altogether You're going to have perfect structure You're reducing the amount of divs you're keeping it super clean These are going to be your best options number one and number two Now let's look at menu number three. That is going to be our slide out menu with the pop-up Here is header number three and you can see here all we have is one container an image And our button that is our slide out menu if we look at it in the front end You know, we got our menu right here and it looks like it might be okay I mean I am using the WordPress nav menu widget right here, which is great for SEO But there is one problem for this it does not show inside the code In fact, Google will never see this right here. It will never know this exists To google this does not exist. All right. Check it out Let's go ahead and look at the code right here the source code that are html So we only see all of these divs div div div div a span i But then there is nothing else It does not show it and the reason is everything inside your pop-up whatever's in there does not populate Into the code until it's activated once it's activated then it shows But google is not going to look at your website like that So if you want to do a menu like what you see on awards and make it super dope and modern and clean But only use a slide out menu your pages aren't going to get indexed and google is going to look at it They're going to see like there's no there's no menu and whatever populates is going to be super random You're not really going to give your website the best opportunity to be indexed the best that it can now What about using this for mobile because I've seen a lot of people question that and saying using this for mobile is bad But i'm going to debunk that because as long as your desktop menu is optimized like what we did on header one and header two As long as you have that inside your desktop menu When you shrink it down to mobile and you hide that and show your slide out menu You're all good because google's still going to see that source code. It's there. It's clean. It's done right So I would reserve the slide out menu for mobile or for a website where sco really doesn't matter And you just want to have something that's more creative and not care about how google is indexing it Now let's take a look at menu number four using a mega menu. Here is the new mega menu I mean and the mega menu builder and elementor is dope. It makes it really easy to build some really cool websites I love mega menus. It makes it, uh It makes a ui and navigation more enjoyable more interesting You can get more creative, but let's take a look at this from an seo perspective All right first off when we look at this we have menu items right here It's not pulling out the menu From wordpress that we set up in our dashboard like the wordpress menu widget instead We are manually adding in our links and our titles right here And let's take a look at what it's like in the front end in the front end Let's open up our inspect element to see what's happening behind the scenes here All right. So first off when I open it, I could see the nav tag. That's good The nav tag automatically comes wrapping around the entire element But when I start to dig deeper I find problems I'm looking at problems right here. First. I'm seeing a bunch of divs With spans all right and spans are necessary for mega menus But then we just see more divs more divs More divs And I'm not seeing a u l or l i I'm not seeing anything that's going to indicate to google that this is a menu I'm not seeing proper html markup right here And let's take a look at our mega menu the actual drop down now for this mega menu I want us to get creative. So I added in some icon boxes but icon boxes. They're not menus They're not built for menus. All right. So when I look at let's let's uh Let's click on that to get to it. So when I look at it again It's just a bunch of divs being nested and this for me This is just too many divs for me right here for best practices We always want to reduce the number of divs. We want to keep everything as clean as possible It's the reason why we want to use the least amount of containers and try to build things in a very clean way This is the reason why I teach best practices And when I look at the source code inside the new mega menu, which the mega menu is dope It makes it super easy to build and it is a feature. I'm happy to see But for sco, this is not something I would use for a site that needs to be indexed correctly for google Now if you do want a mega menu for your elementary website But you also need to make sure your website is sco optimized like that is a very important factor For the website and the project what I would do is I would have one custom built If you know how to code it code it out yourself But if you can't code it I would look at somewhere like five or up work or even better I would go to elementary experts. I would find somebody who could code it and really to build one of these out and to Custom code it. It's not that big of a job. It could take maybe about five six eight hours It's about a day's work. It's not going to break your pockets Getting somebody to build it for you, but it is an investment just like sco. It's an investment So I hope all this makes a whole lot more sense Definitely options number one and two that I shown are going to get you the best sco results Now, why is this so important? And what can we expect to get by optimizing our menus and headers for sco? Here I have site links to my site right here. Now. I just newly launched my site So google's still figuring it out. All right. And the way these site links work right here is Thing is you can't control them. You can't really like do something said and google automatically creates the site links The way you want them to do google kind of does their own thing We can't control it But what we can do is optimize it to try to get the best results and they change they vary Like this is how it looks like on chrome. This is what I'm getting on brave This is what I'm getting on safari. And then on my ipad. I'm getting something a little bit different But still the right pages good pages that I do want people to go to Are being indexed underneath the site links and through time you can't learn how to optimize them But it all starts from the beginning and understanding which I hope this video accomplished I hope this one helped out and if you got questions about sco Anything dealing with sco when it comes to elementary and wordpress drop them inside the comments And if you do love stuff like this and again if you'd like to geek out like I do on sco and stuff like this when it comes to WordPress and elementary let me know inside the comments because I would be thrilled to make more videos like this All right. That's it for this video. Thank you for watching Also, don't forget to do that good youtube stuff like and subscribe. It is much appreciated and I will see you again soon