Question

shantiyoga.ca上的主要导航是一堆图像，隐藏了锚标记的文本内容

<li><a class="schedule" href="/schedule"><span class="hide">shanti yoga studio class schedule</span></a></li>

SEO方面隐藏链接的最佳做法是什么？

我已经阅读了Google的General Guidelines，我想知道除了被列入黑名单之外是否会受到惩罚，我不是。隐藏我的锚标签内容是否会以负面方式影响我的网站？或者谷歌聪明到足以看到事情的设置方式并让它成为现实？

我还认为this article有一些有趣的信息

修改 - 我当前的设置：

<a class="schedule" 
   id="{% ifequal current 'schedule' %}active{% endifequal %}" 
   href="/schedule"><span class="hide">class schedule</span></a>


a.schedule {
    background: url(../images/layout/nav/shanti-yoga-studio-schedule.jpg) no-repeat;        
    display: block;     
    height: 48px;
}

a.schedule:hover {
    background-position: -207px 0;  
}

#active {
    background-position: -414px 0;
}

Answer 1

现在你的方式有点笨拙。

不是使用带有span的{{1}}和描述一种特定样式的类，对于使用屏幕阅读器和理论上搜索引擎的人来说，更加语义的方式也更好用。高负visibility:hidden;：

text-indent

你甚至不需要多余的a { text-indent:-9999px; background-image:url(classes.png); }这种方式。因此，如果将来您决定更改设计，则标记会更加灵活。

Answer 2

只要你不试图误导用户，你真的没有什么可担心的。图像替换是一种很好用的图案，被广泛使用。虽然可以考虑访问，但是通过将文本移到屏幕外来隐藏文本（使用负边距/文本缩进或将其完全放在屏幕外 - 不要使用display:none），以便屏幕阅读器用户可以浏览。

Answer 3

隐藏我的锚标记内容是否会以负面方式影响我的网站？

我相信这完美地回答了这个问题： http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353

希望这有帮助！

带隐藏链接的样式导航

3 个答案: