2011-01-20 37 views
5

XHTML锚链接是否有可能有锚链接没有文本里面有一个背景图像和固定尺寸,仍然是良好的搜索引擎优化?与背景图像,并没有文字

范例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;} 

示例HTML:
<a href="#"></a>

+1

如果它是一个链接,那么它做一些事情,当你点击它。如果它做了什么,用户需要知道它做了什么。因此它需要内容。一张**背景**图片并不满足。使用``和'alt`属性,并停止关注针对秘密算法的微优化。 – Quentin 2011-01-20 14:55:20

+0

我有理由要求,谢谢你的评论。 – Francisc 2011-01-20 15:01:38

回答

7

如果图像有文字,或者你只是想添加对它的描述,有一两件事可以做,以帮助搜索引擎优化和可访问性是给锚标题和内容与大的负文本缩进,添加此您a CSS:

display:block; 
text-indent:-9999em; 

...用下面的HTML:

<a href="#" title="IMAGE TEXT">IMAGE TEXT</a> 
+0

这是我可以做的感谢,但我从来没有做过这种文本隐藏的粉丝。再次感谢! – Francisc 2011-01-20 15:03:35

+1

如果文本位于背景图片中,但不会隐藏,它会将其提供给屏幕阅读器,否则在没有不利影响您的设计的情况下不会看到它。 – mVChr 2011-01-20 15:07:03

1

搜索引擎无法读取它,所以它会如何为SEO是好?更重要的是,你为什么要这样做,你想做什么?

+0

我想使用精灵,这是主要目的。关于引擎无法读取内容的非常好的一点,我想他们会按照链接阅读网页的内容,没有想到它是如何放置它的。谢谢! – Francisc 2011-01-20 15:04:36

+0

阅读了其他评论,只是想一想。你也许可以把你的背景/精灵图像放在链接中,作为一个img内的图像,然后使用悬停的CSS将标记内的图像偏移。 (我没有想到这一点,但如果你想走这条路,可以看看)。当网站不能被个人搜索时,我只使用按钮/链接的精灵。 – plebksig 2011-01-20 15:17:08

1

使用alt和title属性,但具有标签内没有内容是pointless.I认为有严重有可能会在搜索结果中受到处罚!

再次,为什么你想这一点。你正在做链接到另一个页面的按钮,或者运行JavaScript函数的那个​​按钮?

2

通过另一个答案neXib的评论启发。

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; 
} 

只要div有“溢出:隐藏”和固定尺寸的内部可被定位在仅将图像显示的部分你想要的精灵。

搜索引擎优化也是我的一个问题,我认为这个解决方案将正常工作。

0

难道不此问题解决了?

<a href="#">&nbsp;</a> 

这是一个有点老的问题,但只是想在这个意见!