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 a very stylised piece of content which I want to use as the <h1> tag on a page. I have two choices, either use complex, non semantic markup or an image. Is there any SEO benefit to either of the following approaches:

<h1>
    <span class="left">
        This is my <em>long</em><br>
        <small>example</small>
    </span>
    <span class="right">
        <span class="one">heading</span> text
    </span>
</h1>

or simply:

<h1><img src="/img.jpg" alt="This is my long example heading text." /></h1>
share|improve this question

3 Answers 3

It’s totally fine (and often useful, and of course valid) to have an image as heading. You could even use audio or video as heading. HTML is content agnostic in that sense. However, in every case you should provide alternative text content (for user-agents that don’t support the media (e.g. search engines) and/or for users that can’t access them).

A typical example for an image as site heading would be a site logo that contains the site name (or the logo is that prominent that a name is not needed in addition). Example:

<h1><img src="nike-logo.png" alt="Nike Inc." /></h1>

It should be added in HTML (with img) and not via CSS (with content resp. background), because it’s content and not decoration.

Now, if you should use a heading or text depends on your actual case, of course. For example, if it’s a company logo, I’d use an image (→ others might want to download it and re-use it, e.g. in a presentation; image search engines might index it etc). If the heading is only some specially designed text, I’d try to provide text and style it with CSS.

Regarding your markup: As I don’t know your real content, this might not be relevant, but you are probably using the br element in a wrong way here. You should only use br for meaningful line breaks (e.g. in addresses or poems). If your line break is for design only, you should use CSS instead (and span+class as hook element). Same with the small element: only use it if it contains "side comments such as small print".

share|improve this answer
    
Your assuming the ALT tag is treated as the same weight as a text based H1.... Google prefers text based headers, thats why the CSS background and textual method is preferred - though there are negatives with this method too. There are hundreds of studies that can be found online which support this claim e.g robhammond.co/blog/how-google-handles-alt-text-in-h1-tags and many more on Google Search. –  bybe Jun 21 '13 at 17:01
    
@bybe: As this question is not about Google specifically, I think "best practices" (from HTML and WCAG) are relevant/important for this question, because that‘s what search engines in general try to accomplish: rank pages without disadvantaging semantic/accessible markup. First there are web pages, then there are search engines. It might (!) be true that Google weights alternative text differently than text (for some time), but other factors might be relevant here (e.g. there might be a difference between alternative text of a photo and of a textual graphic). –  unor Jun 21 '13 at 17:46
    
I know what your saying its minor but its true you shouldn't consider alt text a true text replacement, that's my point. Also this applys to all search engines, and the fact the OP used the SEO tag within the question makes it relevant. –  bybe Jun 21 '13 at 20:10
    
Ideally if you can you should avoid both indent and h1 img unless absolutely required to do so, and personally for Logos a simple <span><img alt="our logo"></span> is Enough because there's no need to use H1 Nike INC Img on every page, Google isn't dumb and can associate your site without bashing at the engine. –  bybe Jun 21 '13 at 20:13

Images are not headers and generally using <h1><img src="" alt=""/></h1> is bad practice, you could opt to use a text-indent: -9999em but this is becoming unfavourable and the best practice is just to use a H1 as intended.

The text indent method is pretty easy to do you just do something like this in the HTML/CSS:

HTML

<h1><a class="headerimg" name="#">Header text for search engines</a></h1>

CSS

.headerimg{
background:url("../img/header.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
margin-top:0;
text-indent:-9999em;
width:240px;
}

At least with using the above method your using text for the search engines, but ultimately you need to note that images are not valid headers.

share|improve this answer
    
"Images are not headers" - Why not? There are several cases where an image is the only sensible heading, e.g. site heading = site logo (of course with appropriate alt value). h1 is not restricted to text. You could even have an audio heading. –  unor Jun 21 '13 at 12:59
    
<h1><img src=""> is not preferred since your assuming the alt tag is the same as the H1.... this is not true –  bybe Jun 21 '13 at 16:54
    
Accessibility and markup you should use proper text as the H1 and use the background element in the CSS. –  bybe Jun 21 '13 at 16:56
    
@bybe "the alt tag is the same as the H1" What are you basing this on? Do you have a source that isn't half a decade old? Even the W3C implements their H1 as an image with an alt tag. –  Django Reinhardt Nov 14 at 13:22
    
Additionally, Matt Cutts specifically says you should NOT use the above method: youtube.com/watch?v=fBLvn_WkDJ4 –  Django Reinhardt Nov 14 at 13:32

You may use image with the "alt" attribute, but, as bybe says, it will not be valid as heading.

text-indent:-9999em; It is bad practice, search engines do not like when you hide something.

patnz in your choice you should see at the speed your site load (very stylised piece of content vs image).

The faster way will be the best.

share|improve this answer
    
text-indent:-9999em; It is bad practice, search engines do not like when you hide something. not true, 100,000's of sites use this method with no ranking problems. –  bybe Jun 21 '13 at 16:58
    
What goals do you pursuit by using text-indent:-9999em; ? –  Marian Jun 23 '13 at 15:48
    
lots.......... commonly used when using CSS sprites for page speed is a prime example when you include things like logos, social icons, and lots of other images and you then use a text fallback. –  bybe Jun 23 '13 at 18:40
    
Thanks for explanation. –  Marian Jun 24 '13 at 12:40

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.