Mobile app version of vmapp.org
Login or Join
Hamm4606531

: Headings order in HTML semantics and SEO Google uses this HTML code in its Adwords pt-BR page: <section class="..." id="..."> <h4 class="..."> Preços </h4> <h2>

@Hamm4606531

Posted in: #Heading #Html5 #Seo

Google uses this HTML code in its Adwords pt-BR page:

<section class="..." id="...">
<h4 class="...">
Preços
</h4>
<h2>
Você paga somente pelos resultados.
</h2>
<h3>
Quando não há acessos, não há cobrança.
</h3>
<p>
...
</p>
<h3>
Comece com qualquer orçamento.
</h3>
<p>
...
</p>
</section>


Visually, it makes sense. But the problem, I think, is that they use <h4> as section heading and <h2> and <h3>'s in the same <section>, breaking the hierarchy of the page.

So, I want to know if this is a valid markup semantically speaking (and, if not, why does it matters). Also, how does this affect SEO?

Do I need to care about that?

PS: I've found this question but it didn't answer mine.

10.03% popularity Vote Up Vote Down

Login to follow query

More posts by @Hamm4606531

Login to post a comment!

3 Comments

Sorted by latest first Latest Oldest Best

 

@Berumen354

@yuri Yes, they do. Best advice is to try a screen reader and the w3c validator to see the difference between heading hiearchy and document outline.

10% popularity Vote Up Vote Down

 

@Moriarity557

Google uses the H tags structure to semantically evaluate and index pages. Having a correct H tags structure means that Google will be able to better assess your content, topic and will eventually give more ranking power to keywords related to it.

I read this example somewhere else, I don't remember where to give credit, sorry.

Let's say that you have a website about the band Rolling Stones, so your H tags structure will look like this:

<body>
<h1>Rolling Stones</h1>
Ipsum lorem
<h2>Keith Richards</h2>
Ipsum lorem
<h3>Guitar</h3>
Ipsum loren
<h4>Model</h4>
<h2>Mick Jagger</h2>
<h3>...
<h4>...
</body>


This is more and more important, especially if you're using structured data and plan to have some nice rich cards displayed on Google SERPs.

This way Google may pick your content to show it to someone looking for "Keith Richards guitar model" if you have that info in your post for example, or even show it inside a rich card.

Also, as Yuri said, H tags structure is important for accessibility, which is one of the hundreds rankings factors.

Coding guidelines and hierarchy aside, having well-structured H tags is important for your organic rankings so you need to care about it.

10% popularity Vote Up Vote Down

 

@Heady270

Google doesn't even use headings as a ranking signal anymore. It pays attention to how the text is rendered on the page. Big bold text at the top of the page may be weighted more regardless of using h1, h2, h3, etc or styling it that way with CSS.

Making page mark up "semantically correct" doesn't matter in any way at all. Users almost never look at your source code. They only care about how your page renders in their browser. Google has long said that it doesn't give ranking boosts for semantically correct or validating HTML.

You have better ways to spend your time than worrying about which heading tags to use and in what order.

EDIT (based on comment discussion): Screen readers these days have a feature that speaks just the headings of the page, allowing a user to jump to the correct one. For screen reading users, it would help to use heading tags just on the sections to which they should jump and to use them in an appropriate order.

One way of testing how a screen reader would "see" your page is installing a simulator like Fang (for Firefox). It has a help document that explains how to use it and some common problems with markup for screen readers.

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme