CODEWITHSUNDEEP
htmlcssseo
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

CSS Background Images / Buttons - Alt Text SEO?

I'm working on improving SEO on an old website that a terrible developer coded. It consists of a lot of images displaying via CSS background: as well as buttons. I'm wondering if there is anyway to include 'alt / title' text or other SEO options to save this site -- without an entire rebuild.

Upvotes: 2

Views: 3821

Answers (4)

illbzo1
illbzo1

Reputation: 470

You'd be better off using true img tags instead of relying on the CSS background-image property. Since I'm sure you already know that, here's some other advice!

Image alt tags are good for SEO, but only as part of a larger strategy. You'd gain a bigger SEO boost through creating valuable content: blogging, posting links on relevant forums and blogs, updating the copy of your site.

A regularly updated blog would do far more for your SEO than an entire site rebuild to add alt and title tags to your images.

You might consider renaming your images to more SEO-friendly names, as well. Something like "flapjack.png" is better than "image_01.png" for example. This wouldn't take much time to do.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Also you can use this:

a {
    background: url('image.png') no-repeat center center transparent;
    display: block;
    text-indent: -9999em;
    overflow: hidden;
}

And write the HTML as:

<a href="/">Welcome</a>

Since you are putting "Welcome" inside the <a> tag, you can be SEO Friendly.

Upvotes: 5

Philip Kirkbride
Philip Kirkbride

Reputation: 22879

If the images are not displayed you can not use the traditional 'alt/title' that would be on an image tag.

But you could add a 'title' attribute to the div which is being styled. I'm not sure how much SEO weight that it would carry.

Upvotes: 1

Nicol&#225;s Torres
Nicol&#225;s Torres

Reputation: 1345

Review your metatags, description and title attributes. Make them more rich

Add alt to every important image and title to every <a>, and as much text as you can. If it's 100% made of images it will be hard to save it.

Upvotes: 0

Related Questions