Clever Geek Handbook

Replacing title text with an image

I am working on customizing a Drupal website and want to replace the site title in the header with an image file. I came across this article: "Revised Image Replacement" , which outlines several methods for doing this.

I was wondering what is the current best practice in terms of SEO and browser compatibility?

+1


source to share


3 answers


I used to think that the Leahy / Langridge method was the best, however, as I used it more and more, I found the Phark method to be easier to implement, just as efficient and useful as you can have links within headers (which- something I've never worked with before).

Both of these require no additional markup, and I don't think ( according to Google's Matt Cutts ) there are many, if any, bad SEO implications (i.e. Google won't punish you for hidden text if it doesn't appear spam ).



Both don't work or do extra work to work in IE5, but I don't know of anyone else who supports this more.

Therefore I would recommend the Phark method (or Phark Revisited which works best).

+1


source


Use CSS and override any element you have "text" like: (Phark method)

Html:

<h1>Header</h1>



CSS

h1 {


text-indent: -9999px;


background: url('image.png') no-repeat top left;


}

+1


source


The only problem that none of these methods have dealt with, although this is an extreme edge case these days, is if someone has disabled images.

I generally found the Phark method pretty easy to implement and almost always works, but you can also look at the javascript methods - it's pretty easy to write your own.

+1


source






More articles:


All Articles