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>

  • What does class="hidden" do? If it's just display: none; I suspect the search bots will just completely ignore the content. Something like Bootstrap 3's .sr-only will make it invisible but available to text-only UAs (like screen readers and search bots). Oct 11, 2013 at 10:57
  • display: none;
    – Cameron
    Oct 11, 2013 at 11:03
  • In that case you're hiding it from everybody except browsers without CSS support. It'll probably have no effect on SEO because it's effectively not there :) The BS3 .sr-only approach will make it useful to both search engine bots and screen readers. Oct 11, 2013 at 11:10
  • Highly debatable but I'd personally avoid using any display:none in any header field and opt to use span or p for those elements, also its now considered unfavour to use a header tag for a tagline... see: w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head so you're best of using h1 then p or just use P with a BR ;) Oct 11, 2013 at 16:16
  • Also you could further develop the SEO/Markup by using <img itemprop="logo" on the logo using schema ;) Would look something like: <div itemscope itemtype="http://schema.org/Organization"> <a class="logo hidden" itemprop="url" href="<?php echo $appurl; ?>" title="All Together"><img itemprop="logo" src="<?php echo $appurl; ?>img/logo2.png" alt="All Together logo"/></a> </div> Oct 11, 2013 at 16:18

2 Answers 2


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.


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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.