CSS Image Replacement

There are quite a few cases when you'll want to use an image for a headline, section header and the like, but want to keep a text 'backup' so that search engines and screen readers can understand what the headline says. You can do this with a CSS image replacement technique.

Basically, you create a text header, and then use a CSS class to text-indent the text way off screen, and replace it with an image:

<h1 class="myHeadline">
  Really Important Headline
</h1>

h1. myHeadline {
	width: 500px; height: 40px;
	background: url("images/really-important-headline.jpg");
	text-indent: -9999px;
}

N.B.: This image is called the 'Phark' method, and is the most popular method in use today. However, it is far from the only one: CSS Tricks has an excellent summary of the top nine.

N.B.: There is also some difference of opinion as to whether this constitutes a 'black hat' SEO technique, since you're hiding text. General consensus is that it is OK to use it occasionally (e.g. a few headlines, your logo, etc.), but don't go overboard.