Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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>
share|improve this question
    
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). –  Olly Hodgson Oct 11 '13 at 10:57
    
display: none; –  Cameron Oct 11 '13 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. –  Olly Hodgson Oct 11 '13 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 ;) –  bybe Oct 11 '13 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> –  bybe Oct 11 '13 at 16:18
add comment

2 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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