2011-12-15 2 views
0

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

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

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

Я читал General Guidelines Google, и мне интересно, есть ли штраф, кроме того, что он включен в черный список, а я нет. Является ли скрытие содержимого моих привязанных тегов отрицательным образом влияющим на мой сайт? Или 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; 
} 
+0

Не совсем прямой ответ на ваш вопрос, но вы можете рассмотреть возможность реализации пользовательского шрифта через веб-шрифты Google или аналогичный метод, чтобы избежать проблемы полностью. Тем не менее, я сказал, что ваша общая техника используется довольно много раз, но обычно это позиционирование текста за пределами экрана, а не использование явного 'display: none'. – justis

ответ

1

То, как у вас есть это сейчас, является немного неуклюжим.

Вместо использования span с visibility:hidden; и класс, который описывает один конкретный стиль, более семантический способ, который также лучше для людей, использующих программы чтения с экрана и теоретически поисковых систем будет использовать очень высокое отрицательное text-indent:

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

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

+0

Спасибо за ваш вклад. Есть ли какие-либо последствия для мобильных устройств для отрицательных отступов такого размера? Я мог видеть, что это проблема, если устройство отображает страницу для включения всего видимого контента - масштабирования -9999px, чтобы соответствовать ссылке на экране? – shipwreck

+0

Я действительно не думаю, что есть проблемы с мобильным телефоном. Я все время вижу эту технику в дикой природе и никогда не испытывал проблем. – bookcasey

+0

Кажется, что я работаю - я, скорее всего, немного подшучу, а затем реализую ваше предложение. спасибо – shipwreck

0

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

0

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

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

Надеется, что это помогает!

+0

Я связался с этой страницей в своем оригинальном посте - спасибо, хотя – shipwreck

Смежные вопросы