Do heading tags out of order penalise SEO?

Question

I have always been in the belief that headings should always be in order - ie a h2 comes before a h3 but after a h1, unless it's within a separate section, then you can go back to a previous heading.

However, we have just teamed up with an external company to do our front end code and they have weird headings all over the place, for example, they have a widget like this:

<div class="widget-article__content">
    <div class="widget-article__header">
        <h4 class="widget-article__cat">@Model.Category</h4>
        <h3 class="widget-article__title">@Model.Title</h3>
    </div>
  <!-- other code -->
</div>

I was wondering, does this affect seo ranking having headings in the wrong order like this?

Answer 1

No, in all likelihood this will have zero impact on your SEO.

While it does offer some benefits in terms of accessibility (because it helps the screen readers), the order of your headings doesn't appear to be linked to your SEO.

Answer 2

There is no requirement that heading tags be sequential. You can intermix use of h1 through h6. as meets the syntactic (or display) needs of your site at will. The use of the numbers simply sets guidelines as to the importance of a given head relative to "most important--probably used at the top of a page" h1 on down.

It is worth reviewing the W3 spec (or a short summary, as in Jeremy Keith's "HTML5 for Web Designers") so that you better understand the use of the various elements and how they fit together to boost the semantic value of your pages.