SEO-friendly masthead with a hidden <h1> and <h2>

Question

I have built a website and the masthead uses an SVG that contains the site title, logo and support graphics.

The masthead still contains the logo as an inline image, and <h1>, <h2> tags. However the logo and header tags are all hidden using CSS in favour of the masthead graphic.

The HTML shown below may not have been uploaded to the website at the time of writing this question, just in case you're wondering why the source code of the URL is different. But that's what it will look like.

Does this affect SEO? As the HTML does match the masthead content and doesn't contain spam or fake keywords. It also matches the page title in the browser window.

<div class="masthead-inner container">

    <a class="logo hidden" href="<?php echo $appurl; ?>" title="All Together"><img src="<?php echo $appurl; ?>img/logo2.png" alt="All Together logo"></a>

    <h1 class="hidden">All Together - Work Placement Software</h1>

    <h2 class="hidden">Online software for efficient placement management</h2>

</div>

Answer 1

Hiding text as an accessibility measure is absolutely fine. As long as you're doing it ethically - i.e. your plain text faithfully represents what's in the image, isn't being used to "stuff" keywords, etc. - you should have no problem.

From Google:

[...] not all hidden text is considered deceptive. For example, if your site includes technologies that search engines have difficulty accessing, like JavaScript, images, or Flash files, using descriptive text for these items can improve the accessibility of your site.

https://support.google.com/webmasters/answer/66353?hl=en

You may want to consider dynamically switching that <h1> to something of lower semantic value for pages other than the homepage, leaving that element free for your inner page headings.

Multiple <h1>s on a page is completely valid, even in HTML 4, and Google are on record saying they have no problem with is as long as it's done per the spec (i.e., section headings), but effects for SEO aren't well documented, so many in the industry recommend sticking with the old "one per page" approach for now.

Answer 2

Even if text isn't too spammy, I wouldn't risk risk hiding it. If text can't be visible to users, it should be removed.

<h1> and <h2> tags don't have the impact today that they had a few years ago. You won't get much SEO boost from keywords in those tags. But when you hide them you are putting all your rankings in jeopardy. The reward is not worth the risk.