Стилизованная навигация со скрытыми ссылками

Question

Моя основная навигация на shantiyoga.ca - это стопка изображений с скрытым текстовым содержимым их якорного тега

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

Что является лучшим методом для скрытых ссылок с точки зренияSEO?

Я прочитал Общие рекомендации Google , и мне интересно, есть ли наказание, кроме того, что я в черном списке, которым я не являюсь.Влияет ли сокрытие содержимого моих якорных тегов на мой сайт негативно?Или Google достаточно умен, чтобы увидеть, как все устроено, и пусть это будет?

Я также подумал, эта статья содержит некоторую интересную информацию

Редактировать - Моя текущая настройка:

<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 с visibility:hidden; и класса, который описывает один конкретный стиль, более семантический способ, который также лучше для людейиспользование программ чтения с экрана и теоретически поисковых систем будет означать очень высокий отрицательный text-indent:

a { text-indent:-9999px; background-image:url(classes.png); }

Вам даже не понадобится лишний span таким образом.Поэтому, если в будущем вы решите изменить дизайн, разметка будет гораздо более гибкой.

Answer 2

Влияет ли сокрытие содержимого моих якорных тегов на мой сайт негативно?

Я считаю, что это прекрасно отвечает на этот вопрос: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353

Надеюсь, это поможет!

Answer 3

Пока вы не пытаетесь ввести пользователей в заблуждение, вам не о чем беспокоиться.Замена изображения - это хорошо отлаженный рисунок, который широко используется.Тем не менее, есть возможность рассмотреть, поэтому скрывайте текст, перемещая его за экран (с отрицательным полем / отступом текста или позиционируя его абсолютно за кадром - не используйте display:none), чтобы пользователи программы чтения с экрана могли перемещаться.