 For anybody that builds websites It's essential and super important that we also start to learn the basics and fundamentals of SEO That way we could apply the best practices to the sites we build making sure they're SEO friendly And most importantly to make sure we don't make SEO errors and mistakes that have a negative impact on the sites we build for our clients or for ourselves And that's why I'm starting this new series SEO for WordPress and I'm going to be teaching exactly just that What's up everyone? I'm Jeffrey at Lightbox and I'm really excited about this new series This is something I've been planning for a while. I have a special passion for SEO now This isn't about becoming an SEO expert We are web designers and developers and that is who this video is for or anybody making their own website Because we're gonna start with the basics and fundamentals and we're gonna make it really easy to understand going step by step Today, we're gonna start with something easy that you could apply on your website We're gonna be starting with HTML 5 semantic tags I'm gonna show you what those are and how to apply them in your element or and your bricks website And yeah, I am gonna be doing bricks along with elements who are going forward Because I'm starting to use both of them in my own workflow Now there are timestamps inside the description if you want to skip to the page builder you're using but I suggest to stick around for the whole video because I Found a very surprising difference between the two and it'll all make sense at the end. Alright, so let's go ahead and get started I want to show you the HTML 5 Semantic tags and how to apply them to both your element or and bricks website the HTML 5 Semantic tags. These are the tags that wrap your web pages main components So here is the structure of a regular web page and these tags right here. These are your semantic tags These tags they wrap around the main components of your website Now if we start from the top and work our way down We see we got our body tag that wraps up everything that is already included in every website that we built So we don't have to worry about that but these are the tags that we do need to apply it going forward So we got our header tag and this wraps around the top part of our website Then right here we have our nav tag and this needs to wrap around our menu And then I want to skip down to the bottom because on the bottom We got our footer which needs to be wrapped inside our footer tag now in between our footer and our header We have our main tag and the main tag this wraps around the content That is on our web page and in that content the content should be broken up into sections Wrapped inside section tags now the reason why this is so important is this tells Google What parts of the website are what and then if we go down over here to our blog pages You're gonna see that things are a little bit different I mean our header tag our nav and footer are all the same But our blog post article the article the information should all be wrapped inside an article tag and then if We are using a sidebar the sidebar should be wrapped inside of an aside tag now What I want to do is I want to show you on Elementor a very simple way where we could apply all these and make sure These tags are all inside the right place We want to make sure our header tag our nav our footer our article our main Aside all those are inside the right locations that are going to let Google know that this is how the website is structured This is where the content is at so let's go over to Elementor and then after that I'm going to show you how to do it inside bricks now. I thought bricks and Elementor would be the same There are some surprising differences though. You'll see at the end and here is the Elementor website We're gonna use now. I set some of it up and some of it I didn't so we could do it together We're gonna start from the top to the bottom So let's go ahead and start with our header first and make sure our header has the right tags in place So I'm going to go here to edit my header We're going to go to the main section that has our menu right here now this section We got a logo. We got a menu and I am doing some WooCommerce testing right now So I got a WooCommerce cart here. So let's go to the section and Go down here to HTML tag and this is where we're going to find all of our schematic tags So we click on it and you see we got all these options header footer Main article section aside and nav everything we just shown right there inside the diagram for this one we're going to click on header and That is going to make this whole thing wrapped in a header tag now It's really important that when we're adding a menu right now The only really good option that we could do for SEO is to add the nav menu widget by Elementor because that's the only way we're going to get that nav Tag at least by default element or an element or pro. I'm not sure about third party We're just looking at L and L pro But as long as you add the nav menu widget, it's already going to wrap it around with the nav tag So let's go ahead and take a look in the front end and We're going to look at our inspect element and if we go here to our section you see right here We have the header and now let me move this over so we can look at our menu and I'm going to Open it up for a menu and then you can see right here The menu is wrapped inside the nav tag and you want your menu to look like this You want it to be nav and then right underneath the nav you want a ul Li a this is the right structure right here the right HTML structure for your menu If you ever wonder why on some websites when you do a Google search and you see the main name But then you see a couple other pages showing a lot of the times it's reading from this And if you ever get a client that says hey weird pages are popping up, you know underneath here. It doesn't look right Inside our Google search results or no other pages are coming up almost every time I've had a client Have this error I went in and looked and their menu was not set up right It was set up with divs or it was set up with another tag It didn't have the nav tag along with the right structure underneath it next up Let's jump all the way down to the footer because this one is super easy right here Let's go and edit our footer and It's going to be the same thing We're going to go to the section that is wrapping our entire footer and we're going to go to our HTML tag right here And then we're just going to select on footer That's going to make sure that if we look in the front end a footer tag is wrapping the entire footer Now let's look at the main part of our site the content and wrapping that up in a main and section tag Now the main tag should wrap around everything That means if you got images titles text all these different sections No matter how long your web page is the main tag is supposed to wrap around all that now with elements or that's not so simple I'll show you why right now So to do this and I did find a workaround to do this We go to create a main section and on the main section right here that wraps everything Over here in the HTML tag. We'd add main so to make sure it's a main tag and Then inside of it I'd add intersections or the same thing with containers It could be inner containers as well and then we put an intersection and then inside each one of these intersections We'd add an HTML tag over here as a section now This for me is not ideal. It's a workaround the only one that I could find in order to do it the right way and Well, the thing is I personally don't like using intersections I don't like it I like to try to keep it as light as possible And I really hope that this gets fixed later on in the future for me It's just not the way I want to structure my build on the web page And so I don't really wrap up all my content in a main tag I would like to and if I had to really optimize a website for SEO like we're doing some higher level SEO Services, then I would and don't worry if you don't either because it's not going to be a deal breaker or harm your SEO It's just better to have it. It's not a huge deal, but You know, it's something that should be there and I really hope that elementary address is this and really quick Let me show you what it looks like. So if we go to the front end And if I go to my inspect element here Let me move this over. We're going to go and see our tag So we see we got the main tag right here and that's wrapping everything in between the header and footer And if we open up that main tag You see and this is why I don't like we got all these divs right here But if we open it, you see we have the sections inside which is good because this is telling Google that Here is the content broken up inside this way. Alright, so that is it for the homepage Let's jump over to the blog post really quick And here is a blog post right here and everything in the middle is part of the content This is part of the blog right here and then here on the side We have two sidebars. I got one here and I got one over here So what we need to do is we got to wrap up all the content here into an article So that way is letting Google know this is the blog content And then we're going to wrap up these two sidebars into a side tags That's going to let Google know these are sidebars So let's go over here to edit with Elementor and for this right here If you only have content and no sidebar, you would go into your section Right here that wraps up everything and you go to your HTML tag and you would go ahead and select article But I got the sidebar, so I want to do something a little bit different I want to set mine to section right here And then I'm going to go over to my main content in the column and in the column I could create the tag as well. So and right here in the column I'm going to go to my HTML tag and I'm going to put article and Then here inside these two columns I'm going to make these a side tags. So here's an aside and then this one here on the right I'm also going to make an aside And then let's go ahead and update it and take a look in the front end Alright, let's take a look at the code right here in the inspect element Take a look at our HTML and we're going to see here our article So we got everything wrapped up in the article We got our sidebar right here in the aside and our other sidebar here And that is it for applying the right somatic tags for your elements or website It's really easy But there were a few challenges that I found doing this with elements or one of them is a home page Being able to add a main tag that wraps around all the content It's not ideal having to rely on using intersections and inner columns And I really hope this is something that gets addressed and fixed later on The other challenge that I found was the header Now if we go back to the header over here, let me open up this Inspect element here and if we go and hover over our header You see we can only wrap that up in one section But the header technically is everything above the full everything above the content Anything above say the banner should be the header which would include Like a section like this a top bar Maybe your client has a top bar that has some social media icons or a phone number Like that all should be wrapped up now There are workarounds, but it's a pain to do and to be honest. I only do it if It is an SEO project where I got to really optimize it now as a workaround I just make sure my section with the menus are done But ideally the entire header should be wrapped around because if we go here and let me open up my inspect element And this is for all those that do know HTML and code that want to geek out a bit I did find this right here if we go To our top header right here, you see we got our header Let me move this up and they wrap it up in a div It would be much easier if Elementor were to create this and just put a header tag already That way the whole entire thing could be a header and then same thing with the footer as well If we go to our footer, we inspect the element here This is cool because it's one section, but if you use multiple sections in your footer Again, we're going to run across the same error. You don't want to use two footer tags Or you don't want to use two header tags So if you are going to optimize it you got to keep everything inside one section So again these these little things right here there They're small, but they should be things that should be easily addressed Which is the surprise that I found when I was using bricks now Let's take a look at bricks because bricks is similar, but it's also different I'm going to show you how on both of them. So we'll start with our header And if we go to edit with bricks, I'm going to edit the header now if I go to a section so I'm going to go to a section the top section and HTML tag we have it as a section But I'm going to make this a div right here for the top bar And then the next section underneath it. I'm going to do the same I'm also going to make this a div now I think a div or a section should be okay But remember when we did this inside elements or we wrapped it up inside of a header But there is no header here now I could add a custom and put my own tag that I want right there But I'm not going to do that right now. I'm going to put this inside a div And I'm going to go ahead and save it and let's take a look at it in the front end So I'm going to inspect element and this is Something that I really like and this was the pleasant surprise that I found when I use this with bricks And that was it already wraps up your header inside a header tag So everything both parts both sections or however you want to break it down to sections or divs They're wrapped inside header tags already Now let's go ahead go to the footer and take a look at it and the footer is the same as well So I'm going to go here to my section and If I go here and check my HTML tag There is no footer here inside there if I take a look in the front end Inspect element. It's already wrapped up in a footer So this was something I was really happy to see this is way more SEO friendly and then one more thing Now let's look at the main page right here And if we look at it now remember we got a want to wrap it up with a main that would be ideal Wrap up everything between the header and the footer and the main tag That is the ideal way of doing it and everything else in sections now if I go here to the main Just like how we had it in elements or if we go to the HTML tags here Again, the main tag is just not here. I mean we could do a custom one But let's take a look what's happening in The front end so I'm going to go ahead and take a look at the front end Let me go to inspect element and look at that the main tag is already there So by default and already built in here You have the header tag the main tag and the footer tag already there Serious semantic tags are already there inside bricks And that was the big surprise that I found when doing it on bricks as well with element or there is a work They're all working rounds with it. It's just a bit more work and hopefully That could change in the future. I am going to bring this up. I'm going to run some suggestions I still love element or this isn't a element or verse bricks video not at all The main thing about this video is learning how to apply These somatic tags to your website to make sure you're not making any SEO errors and this is just the beginning I want to go ahead and do these SEO videos little bits at a time because I find Learning little bits at a time with them is really more helpful. It's easier to digest Well, I hope this video helped out I hope you learned something new and that the next time you build your element or or bricks website That you are applying these tags on there And I challenge everybody if you are currently building a website to go back to that website and start fixing up your tags The right way it is going to be much better for your SEO and I got a lot more of these SEO Videos for WordPress coming out and these are just for the web creators a web designers and web developers Because here's the thing when you start to apply these and make your websites truly SEO friendly You are adding more value in what you are putting out and given to your clients and the more value You are giving to your clients the better you get That's when we started raising our prices and earning more the best way to earn more that I always felt is to add more value and Definitely making sure the websites are SEO friendly You're applying best practices You are taking that time to learn and develop the skills and knowledge while you are adding more value to your clients Well, if this helped out don't forget all that good YouTube stuff like and subscribe That way you can get notified for the next one coming out because I have a lot more of these in the works right now I'm going to be pumping them out steadily So if you have any questions drop them in the comments and I'll be back again soon. All right. Thank you