At the moment I have on my website some images which are defined in the CSS file as a background image.
The code looks like this.
The HTML:
<a href="http://domain.com" title="Website Title" class="image"></a>
The CSS:
.image {
background: url("../img/deelnemende-organisaties/arcadis.png") no-repeat;
}
Due to some other CSS3 effects with this background it isn't possible to change the background to a normal <img> tag.
Now I was wondering what is the best way to use background images and keeping the SEO ranking as high as possible.
I saw some solutions as:
- Putting text into the
<a> tag and then hiding it with CSS with text-indent: -9999em
- Only put a title attribute on the tag with the text in it
- Placing a transparent in the tag with the same title as your tag
- Leave it as I have in my example and building up a so called Image Sitemap in a XML file
Now I'm not sure what is the best solution and I don't wanna screw my SEO ranking by doing something what they call illegal.
I saw some solutions as: - Putting text into the tag and then hiding it with CSS with text-indent: -9999em - Only put a title attribute on the tag with the text in it. - Placing a transparent in the tag with the same title as your tag - Leave it as I have in my example and building up a so called " Image Sitemap " in a XML file.
Speaking as someone with two years' experience both as a copywriter and an SEO lead, two of those techniques are going to get you punished and it's hard to recover from, it's definitely considered Black Hat. As far as images are concerned, the only thing you can do is write good alt image tags that concisely and accurately describe the image for image searches like Google's. Use an alt tag like:
<img src="myimage.png" alt="Dog running in front of Redwood Trees"></img>
This is two years old, pretty old for SEO, but most of the basics are still true and SEOMoz is a place you can generally trust the information.
http://www.seomoz.org/blog/image-seo-basics-whiteboard-friday
Now, there is a 'best practice' when it comes to images. Images can't do much for SEO, but they can really help people stay on your site if they're pretty and interesting. It helps if you put your nice images on sites like Facebook and Pintrest which also drive traffic to your site and help you get found. While these are SMO (Social Media Optimization) instead of SEO, it's still part of good web design that will give you more traffic and eventually increase your PageRank. Never do anything Black Hat. Hope that helps!
Image replacement via text indent is a common pattern that if Google were to be penalizing that technique, that would be common knowledge. If your goal is to maximize the SEO surface or at least be on par with the standard img with alt, then of your options the text indent adds the text content you would have added if it had been an img and is not currently frowned on by Google's indexing algo. Using a transparent image with alt text on it might be identical SEO exposure but it is possible that Google may factor in a tiny sub KB spacer-like image and that could have an indexing effect however that is speculation.
The OP specifically states that he has to use a background image in this spot. There is no alt attribute for a background, so Copenhaver doesn't provide an answer.
