This technique involves indenting the heading text off the page and replacing it with an image and is used to gain a better search ranking for your web page. I use the technique on this site.
This has been discussed a lot on various technical forums and it seems a lot of people are concerned about Googles hidden text policy and that using this technique may actually diminish their search ranking or worse - prompt Google to remove their page from the search index.
It is my understanding that this is not true at all. Google is more worried about people hiding irrelevant keywords or other spam like content from users in order to artificially boost search rankings. Using the text-indent technique properly involves putting only the relevant heading text inside the heading tags and replacing it with imagery which visually displays the same information to the user.
So whilst I along with many others am certain that use of this technique will improve search rankings and will not be adversely looked upon by Google, I cannot find anything definitive from Google that confirms this is the case after much searching around.
So why not just insert an image in the heading tags and put the text in the ‘alt’ attrribute? According to my boss, from what he has read and from personal experience search engines like actual text inside the heading tags a lot more than the value of an images ‘alt’ attribute inside heading tags.
To demonstrate the technique itself, let’s assume we have a <h1> tag which contains a link back to the index page.
I have extended this example a little bit to demonstrate how you can also have an <a> link in the header which will encompass the whole <h1> tag.
In the css, we style the <h1> to display the image as a background-image and indent the text off the left hand side off the page where it cannot be seen by users. We also style the <a> inside the <h1> to be 100% the width and height of the <h1>.
h1 {
background-image:url(h1.jpg);
background-repeat:no-repeat;
width:153px;
height:116px;
text-indent:-9999px;
}
h1 a {
display:block;
height:100%;
width:100%;
}
So, we can have nice, clean HTML markup which search engines will love:
<h1><a href="/index.php">nostin.com</a></h1>
Or you can download the example zip file. The contents are just a html file with the styles and markup plus the image which is replacing the text.
Comments (0)
+ –