How To Define Heading Tags Hierarchy For Complex Website

- 1 answer

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:

enter image description here

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.