Create SEO friendly Text Images Headers

October 7th, 2007
CSS Tutorial
Leave a comment

In designing Tutorial Dog, I had the logo as an image with the text included, but I want to have the words “Tutorial Dog” in the HTML with the h1 tag (ie. <h1>Tutorial Dog</h1>). Why would you want the h1 tag with text instead of an image? A visitor might see the image and the text in the image, but the Google bot (that crawls and indexes web sites) will look at the html file and won’t register the image like it would with text. This makes your site all the more search engine optimized. It will help you rank better in search engines and achieve more traffic.
This technique is relatively easy to implement once you get the hang of it. You’ll be able to use this technique for customize logos, navigation test and the overall design of the website.

In this case, I want to create a header tag with a link that is an image.

The HTML :

<h1><a href=”/”>Your text here</a></h1>

This is how the HTML should look regardless of if there is a CSS or not.

The CSS:

h1 a{
display: block; /* Allows you to change the width and height of the image */
height: (Image height here);
width: (Image width here);
text-indent: -2000em; /* Hides the text in the h1 tag */
text-decoration: none; /* Hides the underline of the hyperlink */
z-index: 1000; /* IE Fix*/
background: url(Your link here!) 0 0 no-repeat; /* The pathway to the image*/
}

You want to replace the height and width with the dimensions of the image. You can figure this out by getting info on the image you wish to place there. The background url links to the url of the image.
Reducing CSS Repeating
You can apply this trick to other parts of the website. For example, navigation is another good time to use this. This trick allows you to make the design better, while still conserving the search engine friendly html. So that you don’t have repetitive segments of the css, you can include multiple class and id styles in one block.

h1 a, #navigation li, #logo2{
display: block; /* Allows you to change the width and height of the image */
text-indent: -2000em; /* Hides the text in the h1 tag */
text-decoration: none; /* Hides the underline of the hyperlink */
z-index: 1000; /* IE Fix*/
}

This segment of CSS applies these attributes to each class or id named. To simply name multiple elements, use a comma to separate each element. With each element, now you only need to add the background image, height and width attributes.

22 Comments

  1. I always want this done with my websites. (want as in, I can’t do it myself, I have to pay a coder to do it for me!) :)


  2. the margin -2000 thing seems like a bit of a hack… Will it work across browsers? Couldn’t it be possible to set the font size to 0em instead?


  3. Corey,
    The css I’ve given works on IE 6,7 & Firefox & Safari so it should work just about everywhere. The site uses the very same code and I’ve tested the site across all those browsers. The specific value doesn’t really matter as long as it hides the text.


  4. If you take an image, then add in ALT text, then surround the image with an H1 - it’s H1 text.


  5. That’s the dumbest thing I’ve heard lately. ALT text is NOT a substitute for a level 1 header, never was. Don’t screw around — do the right thing, follow the tutorial.


  6. Great tip. I never thought of this as an option for having an image as a link as well. It works great, and my site makes more sense without styles.


  7. very good article for seo.


  8. Thanks - I thought I knew a lot about both CSS and SEO - I am humbled to see such an excellent - google friendly approach to using the H1 tag! Very grateful.

    I’m currently using it on my new (not quite finished) website…I’ll be interested to see how it now does on the search engines!!!


  9. Really useful tip thank you! I always wondered if there was a better way than alt text on the website logo to improve seo, now I know there is one! Thanks!

    Jf


  10. information sounds to be usefull..
    thanks dude..


  11. I’m a relatively new web designer and I’ve been looking for a simple yet comprehensive description tutorial for image replacement techniques. Problem solved! Thanks a lot.


  12. Thanks for publishing this tip.

    A warning for others. The -2000 was causing a floating element to appear way off the screen in dreamweaver. It did worke in the browser. I knocked it down to -200 and it worked fine and didn’t blow-up in dreamweaver.


  13. Thanks
    It’s really great for SEO and CSS


  14. This is exactly what we were trying to do but you have an excellent solution here, if anyone wants to look at a live example have a look here http://www.oceanzonedivers.com/new/


  15. what about Google Quality guidelines - specific guidelines ;
    *** Avoid hidden text or hidden links.

    seems this tip looks like that, hiding contents.
    I experience doing same and got removed from google.


  16. Exactly what I was thinking. Can anyone confirm whether or not this will get you penalised for hiding content?


  17. Many years ago you could get away with hidden content, same text colour as background, off page rendered elements, auto redirected gateway and doorway pages. But in recent years Google in particularly has gotten very good at spotting these keyword spamming/stuffing elements. Anything rendered off the screen will be detrimental to your rank in search engines. You may get results initially but will get penalised sooner or later and that may even include complete exclusion from the index. If you really want to use images as headers, simply add an exact copy of the image text in the alt and title tags.


  18. google will sandbox your site if you do this. hidden text is a no-no.


  19. This technique isn’t misleading if you use it properly. Even Digg.com uses a similar affect with their logo. And google doesn’t penalize them.


  20. This actually isn’t SEO friendly at all. In fact, its a very bad practice to use H1 tags for anything but the main headline of a page.

    For example, on this site, you’d want to use “Photoshop tutorials” as the h1 on the photoshop section, or “Javascript tutorials” on the javascript section, etc. You never want multiple h1 tags on a page either.

    Also, in response to jeremy, he’s probably right here to a degree. Though I do use negative text indent on occasion, if you’re working with fixed dimensions you could set the h1 dimensions and position images inside the h1 absolutely so it would sit on top of the text.


  21. @jem Thanks jem for letting us know that “Digg is using the same Technique”. Just now I have checked with digg.

    Thanks to author. Nice article with detailed explanation. It would be great, if you could update this post by stating that popular sites like Digg are using the same technique. so that everyone will came to know that this is ethical.

    Thanks
    Sankar


  22. [...] first tutorial I published on CSS was a “trick” to essential hide the text generated from the HTML [...]


Leave a Comment