html - 带隐藏链接的样式化导航

Question

我的主导航在shantiyoga.ca是一堆图像，隐藏了 anchor 标签的文本内容

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

就 SEO 而言，隐藏链接的最佳做法是什么？

我已阅读 Google 的 General Guidelines我想知道除了被列入黑名单之外是否还有惩罚，我没有。隐藏我的 anchor 标签的内容会对我的网站产生负面影响吗？还是 google 足够聪明，可以看到事物的设置方式并顺其自然？

我还以为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

您现在的方式有点笨拙。

与其使用具有 visibility:hidden; 的 span 和描述一种特定样式的类，不如使用一种更语义化的方式，这对于使用屏幕阅读器的人来说也更好，理论上搜索引擎会使用非常高的负 text-indent:

a { text-indent:-9999px;背景图像:url(classes.png)； }

这样你甚至不需要多余的span。因此，如果将来您决定更改设计，标记将更加灵活。