问题
Is it possible to have anchor links no text inside that has a background image and fixed dimensions and still be good for SEO?
Example CSS:
a{display:block;width:50px;height:20px;background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:0 0;}
a:hover img{background-position:0 -20px;}
Example HTML:<a href="#"></a>
回答1:
If the image has text in it or you simply want to add its description, one thing you can do to help SEO and accessibility is to give the anchor a title and content with a large negative text-indent, like adding this to your a CSS:
display:block;
text-indent:-9999em;
...with the following HTML:
<a href="#" title="IMAGE TEXT">IMAGE TEXT</a>
回答2:
Inspired by neXib's comment on another answer.
HTML:
<a href="/home" title="Homepage" class="home">
<div><img src="/images/sprite.png" alt="Home" /></div>
</a>
CSS:
a {
display: block;
}
.home div {
width: 84px;
height: 27px;
overflow: hidden;
position: relative;
}
.home div img {
position: absolute;
top: -65px;
left: -20px;
}
So long as the div has 'overflow: hidden' and fixed dimensions the image inside can be positioned within to only display the part of the sprite you want.
SEO was a concern for me too and I think this solution will work fine.
回答3:
The search engine can't read it, so how would it be good for SEO? More importantly, why do you want to do this, what are you trying to do?
回答4:
Use alt and title attribute, but having no content inside the tags is pointless.I think that there is a serious risk that you will be penalized in the search results!
Again, why are you trying this. Are you doing buttons that are linking to another page or that run a javascript function?
回答5:
Wouldnt this fix the problem?
<a href="#"> </a>
Well this is a bit old question but just want opinion on this!
来源：https://stackoverflow.com/questions/4748454/xhtml-anchor-link-with-background-image-and-no-text