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.
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
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.
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.
I understand the reasons for using this method, but it would seem to deny the designer the convention of placing the logo inside the header as the device to get the user back to the homepage. Or can the logo image still be placed inside the header along with the H1 and .headerReplacement?
Check out http://facelift.mawhorter.net/
I’m not sure I’d recommend replacing all the text on your website, but it’ll let you replace your headers and such automatically… pretty slick.
text-indent: -9999px should be text-indent: -9999px;