Create SEO friendly Text Images Headers
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.
October 10th, 2007 at 9:33 am
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!) :)
November 12th, 2007 at 5:58 pm
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?
November 12th, 2007 at 11:14 pm
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.
April 2nd, 2008 at 3:07 pm
If you take an image, then add in ALT text, then surround the image with an H1 – it’s H1 text.
April 10th, 2008 at 4:30 am
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.
April 28th, 2008 at 3:50 am
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.
October 5th, 2008 at 1:42 pm
very good article for seo.
October 17th, 2008 at 2:12 pm
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!!!
November 4th, 2008 at 2:55 pm
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
December 27th, 2008 at 7:10 am
information sounds to be usefull..
thanks dude..
December 29th, 2008 at 11:55 pm
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.
January 23rd, 2009 at 5:39 am
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.
February 20th, 2009 at 12:19 pm
Thanks
It’s really great for SEO and CSS
March 2nd, 2009 at 12:10 am
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/
March 26th, 2009 at 9:01 pm
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.
April 7th, 2009 at 1:18 pm
Exactly what I was thinking. Can anyone confirm whether or not this will get you penalised for hiding content?
April 21st, 2009 at 5:19 pm
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.
May 8th, 2009 at 10:43 pm
google will sandbox your site if you do this. hidden text is a no-no.
May 9th, 2009 at 7:13 pm
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.
May 12th, 2009 at 2:43 pm
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.
June 1st, 2009 at 7:28 am
@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
July 12th, 2009 at 8:00 pm
Nice post, but i using text-indent: -9999px; it works correctly.
September 11th, 2009 at 5:52 pm
Given their success, Digg hardly needs to worry about their SEO strategy, so how they practice or don’t practice SEO with their header use is irrelevant.
January 9th, 2010 at 4:55 am
I wonder if this is truly “SEO Friendly” though as applying a negative margin to text in order to hide it from the user is technically frowned upon by google. I know it’s a small thing, but it would be slightly ironic if google ignores that heading value because its considered hidden.
Either way I’ve used the technique quite a bit and it’s fairly handy.
January 21st, 2010 at 12:49 am
You can’t see title of the page, when you turn off images in your browser.
I use this:
Title
h1 {
position: relative;
width: (Image width here);
height: (Image height here);
}
h1 span {
position: absolute;
display: block;
width: (Image width here);
height: (Image height here);
left: 0;
top: 0;
background-image: url(logo.png);
cursor: pointer;
}
March 23rd, 2010 at 7:37 am
Won’t Google panelize minus text-indent?
because, I have read that minus margin is penalize by Google, if it greater than your window width.
March 25th, 2010 at 3:25 am
Thanks for the tip. I read somewhere else that -1000 text indents will get picked up and it can flag your site, as well as display:none. Are these rumors just false?
March 27th, 2010 at 11:13 am
Great, Nice article with tutorial.
April 24th, 2010 at 6:24 am
Thanks for the tip. I’ve used the technique quite a bit and it’s fairly handy.
May 18th, 2010 at 7:45 pm
Great information. This has really helped out a lot