Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Test IE5 or IE6 on your PC with IE7 installed
- CSS Trick: Target only IE with an if statement
- Top 10 job boards for freelance web designers
- Creating a photo gallery in CSS without tables
- Open source Dreamweaver alternatives
- CSS fix for the double margin float bug in IE6
- Popular fonts with their Mac OSX, Windows and Linux equivalents
Categories
CSS Image replacement technique
Posted on Monday, January 7th, 2008 under CSS, freelance, web design news by Dustin Brewer.There are a lot of reasons that you would want to replace simple text with an image. One of the biggest reasons is the benefit of getting the text that is within the image for search engines. This method is used mostly for site headings. Say you were making a site about “Freelance Oklahoma Web Design†you would want to be sure to include that in your first H1 but you don’t want to use plain text to do it. So you would be creative and ensure that you are getting the same information that is within your fancy image into your heading tag. This way you can ensure that your site topic is best read by search engines without losing any of your design benefits of creating custom imagery for your design comp.
The CSS Image Replacement Technique (often referred to as the Fahrner Image Replacement technique) itself is very simple but it is just understanding the concept to ensure that it is done without properly. The biggest part of using this technique is being able to indent any text that happens within your selector. A lot of people will choose to use H1’s as their focus of indenting the text off of the screen. Such as in the following example.
<div id="logo">
<h1><a href="/" title="Oklahoma Web Designer">Freelance Oklahoma Web Design</a></h1>
</div>
Then the CSS for this technique
#logo h1 {text-indent: -9999px;}
#logo h1 a {width: 150px;height: 75px;display: block; background: url(images/logo.jpg) no-repeat;}
The idea is very simple, as you can see that within the CSS we apply a background image to the anchor tag and indent the text from the H1 tag to ensure that the text is hidden but the background image is shown. This way the logo is clickable and the text will only be seen by text-only browsers or search engines robots. You don’t necessarily have to use this on your heading text/logo. It can easily be used on navigation if you are using image-based navigation.
Whats Next?
6 Responses to “CSS Image replacement technique”
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout the web design portfolio.
This is something I’m struggling with on my own site. I’ve been told I’m going about my header image the whole wrong way, but I’m not sure how to fix it. Something for the to-do list.
I hope you get that holiday soon, Dustin!
Using the method you describe of placing an H1 tag out of the flow of the page by positioning it -9999px will cause some of the search engines to penalize your site. The net effect would therefore be a a LOWER SEO ranking for your page.
I have to agree with SEO Expert. Cutts has said that Google considers anything that delivers a different page to users verses the S/E’s is not acceptable practice
Nice Tip!
Cheers!
Gill & SEO Expert…
Google has officially sanctioned the use of these techniques, we need to stop proliferating misinformation, I am sure your intentions are good, but this just confuses people.
Please read…
http://www.mezzoblue.com/archives/2008/05/05/image_replac/
Thanks for this really helped me out!
keep up the good work!!!!