Styling h1's off the page

[stuey_p]

Tweet

Hi - can I ask some advice please.

Because of the font face the S & M (that's sales and markting) director wanted to use we build our subjects out of indidual images (1 letter per image). This is obviouisly very bad for seo.

Does anybody know please whether it would be frowned upon to generate a text based "<h1>" at the same time and style the "<h1>"'s with either positioning or z-index out of the users sight.

many thanks

stuart

[HarveyC]

hello good sir

directors can do some funny things

a letter per image, how bizarre.

You're right about h1's - they would be better for SEO. But any invisible or otherwise hidden header is likely to be very bad for you SEO.

White text, hidden text, text on the same coloured background - Google knows all the tricks and doesn't look highly upon any of it, so what you'd be doing would most likely fall into the same category and get a penalty.

I suggest putting it all into one image and using Alt-text, and not worrying about it too much!

[stuey_p]

Thanks for the input Harvey harvey.

Tbh the letter per image was my idea :blush and just built a little online form for generating it as it ensures consistency, saves a heck of a lot of time and it means anybody can do it from anywhere

I guess we could just carry the alt through to the first image - by no means ideal but better that nothing. I think I'd personally push for just using text but whether this is possible or not who knows.

[jonsp]

Does anybody know please whether it would be frowned upon to generate a text based "<h1>" at the same time and style the "<h1>"'s with either positioning or z-index out of the users sight.

Probably best is to set a background image on the H1 - this way you still have the text for SEO and the "look" that marketing wants. Something like this

<style type="text/css">
h1#test {
    padding-top: 35px; /* height of the replacement image */
    height: 0px;
    overflow: hidden;
    background-image: url("background.gif");
    background-repeat: no-repeat;
}
</style> <h1 id="test">Heading One</h1>

[stuey_p]

See - I was thinking something along the lies off:

<style type="text/css">
h1 {
position:absolute;
top:-500px;
left:-500px;
}
</style>
<table cellpadding="1" cellspacing="1" align="center" border="0" class="titletable">  
<tr>  
<td>  
<img src="http://www.web-clubs.co.uk/alphabet/travellers/features/medium/dark/t.gif" class="borderless" alt="test title">  </td>  
<td>  <img src="http://www.web-clubs.co.uk/alphabet/travellers/features/medium/dark/e.gif" class="borderless">  </td>  
<td>  <img src="http://www.web-clubs.co.uk/alphabet/travellers/features/medium/dark/s.gif" class="borderless">  </td>  
<td>  <img src="http://www.web-clubs.co.uk/alphabet/travellers/features/medium/dark/t.gif" class="borderless">  </td>  
<td>  <img src="http://www.web-clubs.co.uk/alphabet/travellers/features/medium/light/spacer.gif" class="borderless">  </td>  
<td>  <img src="http://www.web-clubs.co.uk/alphabet/travellers/features/medium/light/t.gif" class="borderless">  </td>  
<td>  <img src="http://www.web-clubs.co.uk/alphabet/travellers/features/medium/light/i.gif" class="borderless">  </td>  
<td>  <img src="http://www.web-clubs.co.uk/alphabet/travellers/features/medium/light/t.gif" class="borderless">  </td>  
<td>  <img src="http://www.web-clubs.co.uk/alphabet/travellers/features/medium/light/l.gif" class="borderless">  </td>  
<td>  <img src="http://www.web-clubs.co.uk/alphabet/travellers/features/medium/light/e.gif" class="borderless">  </td>  
</tr>  
</table> <h1>test title</h1>

Jon - I'm not being funny - my seo skills are next to none - but do you think your method is likely to be less frowned upon?

many thanks

Stuart

[stuey_p]

SEOmoz suggests that you won't get penalized but some search engines do look for excessive margins...blows my solution out of the water but a simple :

<style type="text/css">
h1 {

display:none;
}
</style>

seems to work...

Thanx for suggestions