I’ve been having a discussion with a fellow coder and we’re trying to decide what’s the best way to handle this. The client wants image headers and so my solution to this is:
<h1><img src="products.jpg" alt="Products" title="Products" /></h1>
However, my colleague says that as far as SEO is concerned, that’s not the best way to do this and he does it this way:
<h1>Products</h1>
<p><img src="products.jpg" alt="Products" title="Products" /></p>
And in the CSS, the h1 has the property “display:none;”.
Which is these methods is better for SEO? I’ve come across multiple ways of doing this, including some saying not to use an image in the h1 tag at all and use plain text, or using a background image for the h1 and text-indent: -99999px or something like that (which I think is impractical).