Header Text Image Replacement

Avatar of Chris Coyier
Chris Coyier on (Updated on )

So you know that search engines like Google, Yahoo, and MSN are primarily looking at the text content of your pages to index them and determine their relevancy to searches. You also know that using header tags like <h1> in your HTML is important because search engines value organized, sectioned content. But what if you just don’t want big old ugly text section headers on your site? Wouldn’t you rather use your own custom graphic? Sure you would, but you don’t want to skip your <h1> for <img> and lose all that search engine friendliness. You don’t have to!

One of the hippest tricks going right now is using a class to replace header text with an image. Use your header tags as normal, only give it a unique class name: <h1 class="headerReplacement">Section Header</h1> In your CSS, define the class as such:

.headerReplacement {
   text-indent: -9999px;
   width: 600px;
   height: 100px;
   background: url(/path/to/your/image.jpg) #cccccc no-repeat;  

This should plop your nice new custom image right where that old ugly text header was without missing an ounce of search engine readability. This technique also allows your page to degrade well, for people using screen readers or people browsing the web with images and/or CSS turned off.