Create SEO friendly Text Images Headers
CSS Tutorial written on October 7th, 2007 Leave a commentIn 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 pat