Header Text Image Replacement
So you know that search engines like Google, Yahoo, and MSN are primarily looking at the text content of your pages to index them an 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(pathtoyourimage) #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.
Loading ...
1
Good idea; however, when a user resizes the page by holding [CTRL] and pressing [+] or [-], the background doesn’t resize, it stays the same size and if you use “em” instead of “px”, it at least doesn’t destroy your layout.
I came up with this:
<div id=”content_title”>
<h1><img src=”http://my.website.com/templates/title.png.php?text=[title]” alt=”[title]” style=”width:55em;height:2.7em” />[title]</h1>
</div>
CSS:
#content_title h1 {
padding-top: 1em;
margin: 0px;
}
#content_title {
margin-bottom: 1em;
overflow: hidden;
height: 3.7em;
border-bottom: 0.1em dashed #369;
}
The image is put first, and assuming that the image will have the exact size of the “content_title”-div, and since overflow:hidden, the actual text behind the image will never be shown, unless the visitor can’t show pictures in his browser (for example a search engine or text browser). And if for whatever reason the image fails loading (for example an error in the script that generates the image, connection error etc.), the alt-text shows up, and since the size of the image is declared, a browser is supposed to block the area out (preventing the text next to the image from showing).
Tested in Opera7,FF2,IE7
Comment by Paul — April 20, 2008 @ 4:02 pm
2
Hey Paul,
That’s pretty cool. I don’t think I’ve seen that particular method before. There is a much more through investigation of CSS image replacement here.
Comment by Chris Coyier — April 20, 2008 @ 4:10 pm
3
Oh and *bang* I didn’t test it in IE6 of course.
In addition to a height, #content_title needs to be given a width, too. In my case it is 55em (the width of the header image). Otherwise your layout may explode in IE6.
Comment by Paul — April 25, 2008 @ 9:20 pm