H1 tag with dynamic text and image at once for SEO

Question

I found many posts about that but I still can't find a clear answer. I read many texts saying that the H1 tag must have text description and we can't used it with img like logo. However, in many projects, I've got problem to use H1 on the top of homepage or single page because of structure concept.

Other pages use many different solutions, like:

www.smashingmagazine.com/articles/

use many H1 tags on single page

widzialni.org

Use H1 that are placed immediately after header and is hidden (not display: none)

After all that I'm wondering on solution like below:

<h1>
<span>[page description]</span>
<a href="[home link]"><img src="[logo link]" alt="[short name]"></a>
</h1>

and css:

h1, a {
    display: inline-block;
    overflow: hidden;
    position: relative;
}
span {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    white-space: nowrap;
}

My website is based on WordPress, so this way I want to use on homepage, pages and categories (description will be dynamic not static) while on single post pages I want to remove H1 and span from logo and use H1 with post title in content area.

Is this good idea or bad (especially for SEO)?

Answer 1

Often people get into a quandry when they look at their HTML through the visual design of the web page. If you keep in mind that HTML deals with document structure only, you'll have far less problems. Especially if you read the HTML specification when you are unsure. There you will find that it is find to use more than one H1 on a page because H1 is used as a heading for a document section.

There is no issue including an image inside a H1 but many could rightly claim you should include it as part of CSS. SEO doesn't care. They look at the value and placement of the text alone, unfortunately.

I say "unfortunately" because now search engines are guessing at your intent but I understand the reasoning because so many amateurs who know nothing about creating HTML--along with the many scammers around--still need to be properly indexed or thrown away.

Answer 2

From semantical point of view the heading must contain text. Sure, search engines recognize even nested tags, like

<h1>
    <div>
        <p>
            <span>
                Yo!
                <img src="https://www.example.com/img.jpg" alt="Yo!">
            </span>
        </p>
    </div>
</h1>

But this is not a kind of best practice. Heading is <h1>Short descriptive text</h1>

Dynamic headings would work too, if you guarantee, that your javascripts load the text into <h1>{{Heading placeholder}}</h1> fast enough to get it indexed (until 5-6 seconds after onLoad is fired).