CSS Image replacement
One question that arises in most SEO cases is how to have clean, text based <h1> tags, and still make use of a specific font, outside of the standard fonts available.
There are, of course, more than one solution to this question, for example using sIFR. But in this post I will explain how to do this using nothing but CSS.
The result we want looks like this (when using an image):
This is easily implemented with the following html:
<h1 id="niceHeadline"><span>Nice headline</span></h1>
And the following CSS:
h1#niceHeadline span{display:none;}
h1#niceHeadline{
width:251px;
height:41px;
background: url('images/nice-headline.jpg');
}So the only thing shown in the html is a h1 tag with an id attribute and a span tag within it. But the result looks just like the image above. It is, however, important to never use any other text in the underlying html than what is represented in the image. If you do that, you are breaking the Google Webmaster Guidlines, and could suffer penalties for that.
Klikki AB
Comments
Another way to do it is to use inside the heading tag(s) instead of . The advantage is to have anchors for in-page navigation to enable easier linking to a specific section of the page.
For example:
FAQ
About Us
And the CSS would be something like...
h2 {
background-repeat: no-repeat;
width: 300px;
height: 25px;
}
h2 a { display: none; }
#faq { background-image: url('faq.png'); }
#aboutus { background-image: url('aboutus.png'); }
Aren't you running the risk of Google mistakingly thinking you are trying to manipulate the serps by including hidden text on the page? It's not possible for Google to read the image, so it can't verify that what the image says matches the text. All it knows is that you're potentially keyword stuffing your page. I'm not against this approach and I've used similar myself in the past, however it's perhaps a little riskier than some?
Post new comment