How to SEO Optimize Your Elementor Headers & Menus
Vložit
- čas přidán 30. 07. 2024
- ✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
Learn how to create SEO-optimized Elementor headers
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
TIMESTAMPS:
1:07 What does Google look for in headers and menus?
3:07 Header 1
5:42 Header 2
9:57 Header 3
12:09 Header 4
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementor #elementortutorial #elementorwordpress #wordpressseo - Jak na to + styl
The moment I get notifications and see your name in the mix then I know it’s always worth it. I do follow all your tuts
Wow that’s so awesome to hear. It means a lot to me thanks!🙏
This video is still handy to this day. But the 3rd option has already been taken care of by Elementor by adding an Off-Canvas widget which you can use directly inside your page or header template. So that means the off-canvas menu can now be seen as part of the page..
super helpful, thanks
thanks for tutorial, thats very helpful. i hope u create another tutorial about HTML tag elementor. 😁
Thank you and yes indeed! I have plans for lots of SEO for Elementor videos 😎
Always clear and relevant, Jeffrey. Thanks a lot!
Thanks! 🙏
You've talked about Elementor's menu nav SEO before. I paid attention to this and followed these tips and it really helped. Today, I believe that a hamburger menu popup on a desktop is not a good design practice. So I have no problem with the old widget menu. Those with large websites have it worse. Great content. Thanks.
That’s great and thanks! And yes, I agree, a hamburger on desktop is not a good design and UI practice. I actually used this on my old agency site but now am rebuilding it with a normal menu easy to use and SEO friendly
It's really fun to watch you. There's always great value, and you can really tell that you love what you do. Keep it up!
For sure! Nothing better than waking up, having coffee, and getting into something creative like web design. Beats my last job 🤣🤣🤣
Jeffrey, thank you so much. Great video. Very helpful and well explained 😊
Thank you so much that🙏
Thanks Jeffrey, another great tutorial. All the best, Rip.
Cheers and thanks Rip!
Hi! Yours videos are The best!
Can you do a content about breadcrumbs on Elementor without plugins (Yoast)?
this will be a good content
Thanks for all your very helpfull tutorials, they are extremely usefull and well explained.
I am wondering if a work around for missing SEO in mega menus would be to nest a normal wordpress menu in the top in the header, but set it as hidden om PC, tablet and mobile? Or will the hidden state hide the markup as well?
Great question. If you set a menu but hide it for all screen sizes, it’ll still show in the source code but Google can catch and penalize that. I wouldn’t risk it. Back in the days there used to be hacks like hiding keywords to get better rankings but Google caught on and can detect when elements are purposely hidden.
If you already are using the mega menu, it won’t crush your SEO. Elementor uses a mega menu on their site that’s the same, all divs and no proper HTML mark up but still gets good results. It is possible to still rank well. It’s just not good SEO practice and for a site like El with a really high ranking they can get away with it.
Thanks for another great post Jeffrey. Interested in the non-standard WP menu item/cta, I'm trying to put together a nav that is colourful with pill-shaped buttons each of a different colour. Do you have any tips on this sort of nav layout? At the moment I'm playing with individual buttons, each a different colour, linking to each page.
Hey thanks!
The best way to do this is with the WordPress Menu widget and creating a menu in your dashboard.
You can achieve the pull effect in Elementor without CSS but they will all be the same color.
You can then give each menu item a class and use css to target the link and give them their own individual colors.
I’m sure of you can set it up, create the menu and give classes to each menu item like I show in this video, someone can send you a css snippet in one of our communities
Great Content! Your the best.
You're the best!
Great vid. I wish elementor would improve the navigator contrast in dark mode. Moving layers around is pretty bad UX currently. They should do something like photoshop layer adjustments ,and also allow labeling of containers so can see which is which.
Well done 👍 as always
Thanks!🙏
great job . thanks :)
Awesome and thanks!🙏
Thank you!
Yo @fatjay you got it!
Can you please create a video on how you create the second Header please? The responsiveness and also the layout settings you're using (for Hello Elementor theme) whether it's Elementor Canvas, Theme, or Elementor Full Width.
Thanks
I have plans for more in depth tutorials.
I’m using Hello with containers and full width.
If you really want to learn Elementor check out the Design with Elementor Program 😉
lytboxacademy.com/design-with-elementor/
Great tips!
Cool thanks!
before that was possible with Elementor, I used Max Mega menu on some of my projects, and it worked perfect. ( I've just inspected the page and it's correct HTML) Also I used Astra mega menu with Astra theme, that just fine as well. What do thing about Max mega menu could be a solution ? Thank you for the content, it helps a lot!
Great video
Thanks!
First of all, I want to thank you for this great content, I also read the text content you made on your site. I also checked most of the CZcams comments and did not get my answer. According to what you said, when we have two containers, we put the entire format of the header tag on the header, and the tag of those two containers should remain the default?
In the meantime, I saw that you answered almost all the comments, as always and this is great, thank you again
If you are setting the header tag in the template settings that wraps around the entire template, then you can leave the containers on default or set the tag to div.
tnx for your answer@@LytboxStudio
Thank you for this tutorial Jeffrey. So, isn't there any solution for a popup menu?
Popup menu is ok for tablet and mobile only as long as there’s a normal desktop menu. But not for all 3.
If wanting to use a hamburger slide out menu for desktop, it’s best to either code it or look into a off-canvas menu widget
@@LytboxStudio Thank you Jeffrey. I think the easiest and fastest way is to find an off canvas widget . Thanks
Hey, great video. I've been thinking about the POPUP-only version.. What if we add the WordPress menu widget and hide it in all versions? For the user, it will not be visible, but for Google, it will.
Good question. That can be risky. Google might catch h it and penalize your SEO. There used to be hacks hiding keywords and elements to improve SEO and Google found ways to detect and penalize. It would be better to either custom build a slide out or use an off canvas menu widget in an add on.
Thanks Jeffrey! It’s really helpful! But I have one question… what about a situation with two menus? One on the left side, one on the right side and the logo in the middle? Can it be also designed in SEO friendly way?
Thanks once again for your movies. They helped me a lot! Almost all other “specialist” go in complicated, you show that almost everything is possible keeping the site simple and clean.
Good question. In this case I’d look at 2 options.
You can either use a Wordpress Menu Widget for both and create 2 menus in your dashboard.
Or you can use a Wordpress Menu widget on one side and an icon list on the other.
This will depend on how important the pages are on the split menu. If it’s possible to keep all primary pages on 1 side, and then non-primary on the other, you can do this with just 1 Wordpress nav widget so there’s only 1 nav tag.
But if both are super important, then will have to go with Wordpress menu widgets for both. 2 nav tags in the header isn’t a bad thing, but it’s much better to only have 1 in the header.
@@LytboxStudio Thank you! Yeah, the point is that both sides are important, at least now and in the nearest future, until I realize where to focus.
Anyway - I will go with two wordpress menus as you wrote and see how it works.
Thanks once again!
Actually I've just got an idea - complete Menu i have in the footer - is it possible to point Footer Menu as the most important one? What if I mark Elementor Footer with Header tag and Elementor Header with Footer tag?
@@lukaszandreabilski5022 I would not use this approach. The reason Google prioritizes well built menus that are in the header is because that's going to be best for the user. Google wants us to put the primary pages in the header right at top easy for the user to navigate with.
Hi, do you think Gutenberg would do a better job in building out menus?, for SEO..
Do you also think maybe Gutenberg is better for building out all your website?, better markup, less messy and SEO.?.
Thanks appreciate any feedback
Ooh I was waiting for a question like this to be asked. Great question.
Clean code and DOM is always going to be better for SEO and Elementor can't compete with Gutenberg's clean code. If SEO is a vital part of the project and huge investments were going into SEO, then an option like Gutenberg or even Bricks is something to look at. We just had an SEO vital project and used Bricks for that purpose.
But through the years we've had high ranking sites built with Elementor and even though El can't come close to the clean code in GB, if it's done right, it can still be lean, fast, and get great SEO results.
Personally, I'm not planning to switch to Gutenberg anytime soon. I go by a philosophy of mastering 1 thing at a time and I've already mastered Elementor and now learning Bricks. By using tools I mastered in my business I'm more efficient and that's what I teach others. Every builder has it's pros and cons including GB, what matters is mastering one of them and then leveraging that expertise.
@@LytboxStudio Hi, I really want to say a big thankyou👍👍😊 for your kind reply, honest, straight foward, no bullshit. To be quite honest your very refreshing as most here don't even reply. I watched your video and I am still considering which way to go, but I did think that elemntor slide out or pop up menus were kinda not seo friendly, so I guess the best way is to build a seo menu with "less is more" and lose the popups or slide.. Get users from A-B quickly and easily...
Once again a massive thankyou... You got yourself another subscriber👍👍👍👍😊😊😊great content, not the usual waffle... Cheers 🍺
Hi, I’m due to launch my website with Word Press/ Elementor and need both SEO and a mega menu. Can you help create a bespoke menu for me? (I’d rather that than trawl through fiverr etc)
Happy to help! You can reach me at lytboxacademy.com/contact
@@LytboxStudio Done :)
Please how do I get emoji keys option on my windows system for Elementor. I saw that option as a feeback in one of your videos. I have been checking all your video feedback section to find it. Please help me out with the shortcut keys.
It’s in your keyboard - support.microsoft.com/en-us/windows/windows-keyboard-tips-and-tricks-588e0b72-0fff-6d3f-aeee-6e5116097942
May I ask for what reason is there now a "wordpress menu" and a "menu" widget available?
Good question. I personally think this was a bad UX decision…The Nav Menu widget was changed to WordPress Menu and the mega menu widget is just called ‘menu’. Kinda confusing 🫤
I would have left the Nav Menu alone so people don’t get confused in tutorials and then call the mega menu ‘Mega Menu’ so it’s clear and easy to understand.
@@LytboxStudio thanks for your explanation :)!
nice
Thanks!
Helpful stuff, good tutorial. Keep up the good work. Those bonus div's though! "Its not that many though." lol. Way to keep under control. Im wondering when you will lean into Bricks full time, where it all makes more sense. Especially for someone who values doing things the right way. Come on already.
Haha I feel ya. It is hard to see 12 nested divs after experiencing the power of Bricks 🤣
Wait the Elementor Header builder doesn’t use a semantic header tag ? Same with footer then I bet. Trying to sort through the Elementor page source code makes my brain spin. Those classes 😵💫trying to select an element with css and not using [selector] is soo difficult to match specificity.
None of the proper semantics are set by default 🥲 You might want to give Bricks a try if clean code is your thing. It's incredible how clean the HTML is it.
@@LytboxStudio my client went to renew elementor annual subscription and discovered they are Israeli owned and even though they were sp committed and loved the software, now theyre backtracking amd said they "never liked it anyway"....so exploring other options. Thanks for the suggestion, bricks breakdance and oxygen are on my list to check out. I
I've been trying to select a file upload button (on a different elementor site) but I can't seem to override their styles, even with selector + IDs and/or the :file-selector-button pseudo-class 😵💫
@@clevermissfox first I gotta say I know many of the people at Elementor and they're good people. Some I consider friends.
I have a feeling you're going to love Bricks. Give it a try and look at Adanced Themer with either ACSS or CoreFramworks. It's an amazing site building stack. Breakdance is good and more of a middle ground between ELementor and Bricks. But for sure, Bricks instead of Oxygen. Bricks is growing fast while Oxygen is going in the other direction.
Did you try !important to override the CSS
@@LytboxStudio not yet on !important, I really try to avoid using it. Have a couple more selectors to try first.
And I have no doubt the people at elementor are good ppl and while I don’t want to get into politics I think it was a bizarre uneducated and emotional decision to stop using it just because of the country the developers live in. However not an argument I would win with this client, I will not be able to change their mind so I didn’t even try.
Thanks for your reply. Hopefully your presence back in the comments means another video soon, great content!!!!
Very new to this and trying to optimize my menu, what menu is shown at 2:05 to input the tags? Am I just adding an html inside the header? Thank you, your videos are great for beginners like me
Great video
Thanks and I’ll take the double comment 🤣😉 cheers for the algorithm boost 😎