How To Define Heading Tags Hierarchy For Complex Website
I need advice to design the best possible heading tags with respect to SEO optimization and with good results.
RED menu is main menu. Is still visible and the same.
BLUE menu is submenu
MAGENTA is visible only under certain circumstances
GREEN is title for section, list or item etc.
Here are possible scenarios:
Which would be better?
<h1> for RED, <h2> for BLUE, <h3> for MAGENTA and <h4> for GREEN
<h4> for RED, <h3> for BLUE, <h2> for MAGENTA and <h1> for GREEN
Thank you for the clarification
None of two proposed solutions is actually correct usage of heading elements.
So it will not be useful in SEO either.
Like it's said here
Heading elements implement six levels of document headings,
<h1>is the most important and
<h6>is the least. A heading element briefly describes the topic of the section it introduces.
Use heading elements for what they are created.
If you use them just to boost SEO on wrong data/elements you can just make it worse.
Lot of people already tried that (and still trying) and don't think that their intents are not recognized by search engines.
Like John Mueller from Google said here, heading gives a slight boost to page if there is clear and correct heading regarding topic but extensive usage is not recommended.
So in your case red, blue and magenta are menus so use some standard navigation elements that you would use anyway. Adding heading elements there, in my opinion, is counterproductive.
But green is good candidate for heading tag. I would say
<h1> but it depends on rest of content and type of page.
For example product title on ebay product page is in
<h1> tag and your bottom right page looks like good candidate for that.
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → laravel blade templating error
- → should I choose reactjs+f7 or f7+vue.js?
- → How to dynamically add class to parent div of focused input field?
- → Setting the maxlength of text in an element that is displayed
- → Expanding search bar not expanding before search
- → Get the calling element with vue.js
- → Blade: how to include a section in one page but not in another
- → How to print/log reactjs rendered dom?
- → how to write react component to construct HTML DOM