It’s common these days to take advantage of CSS Style Sheets to replace your headers like <H1> and <H2> with images. While this makes sites more attractive it also hurts some of your search engine value by losing the keywords that could be used in those important headers.

Well here is how to use images and still get your keywords picked up by the search engines.

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

<h1>Keywords here</h1>

In this example your pretty image will be used but your keywords will still get picked up by the search engines. The nice thing about this approach is that you can actually get some keywords in there that you might not been able if you weren’t using images.

3 Responses to “Use image headers without losing SEO keyword value”
  1. Spring SEO Review: Part 2 | theartofbuzz.com says:

    […] 1. Are you optimizing for both the singular and plural versions of your keywords? Remember these are treated differently and you would be surprised at how big of traffic differences their can be between the two. 2. Do the inbound links to your web site use important keywords in the anchor text of those links? If they are using your url “www.yoursite.com” instead of “top keyword” you are really losing a lot of value of that link. 3. Is your page’s most important keyword the first words in the body of the page? They should be. 4. Does your folder and file names use your keywords? 5. Are you using images for things that you could be using text for? I see a lot of css pages that use background image calls for their header tags (h1, h2, etc.) instead of text. You lose a lot of SEO value when you do this. Of course you can always do both – see this post for details. […]

  2. Christinaza says:

    thats for sure, dude

  3. VirtuaStudios says:

    cheers buddy I was looking for this!!