Есть текстовый отступ: -9999px плохой метод для замены текста изображениями, и каковы альтернативы?

В этой статье говорится, что мы должны избегать использования этой техники. Этот говорит об этом потрясающе. Правда ли, что Google просматривает файлы CSS для text-indent: -9999px; и наказывает вас?: |

Я использую это свойство много, чтобы скрыть текст. Например, у меня есть кнопка, представленная значком:

<a href="#" class="mybutton">do Stuff</a>

CSS:

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

Я не вижу альтернативы моему коду. Если я заменю это изображение, я автоматически получаю +20 HTTP-запросов для каждого изображения кнопки.

Если я сделаю ссылку пустой, она будет менее доступной, потому что читатели экрана не будут знать, что это такое. И пустые ссылки выглядят странно, возможно, Google тоже не нравится...

Так какой лучший способ справиться с такими ситуациями?

Ответ 1

Хорошей причиной для использования метода -9999px является то, что браузер должен нарисовать блок 9999px для каждого элемента, к которому это применяется. Очевидно, что это потенциально может привести к поражению производительности, особенно если вы применяете его к нескольким элементам.

Альтернативные методы включают этот (от zeldman.com):

text-indent: 100%; white-space: nowrap; overflow: hidden;

... или альтернативно (из здесь):

height: 0; overflow: hidden; padding-top: 20px;

(где "padding-top" - это высота, которой вы хотите, чтобы этот элемент был).

Я думаю, что первый метод более аккуратный, так как он позволяет вам устанавливать высоту обычным способом, но я нашел, что второй лучше работает в IE7

Ответ 2

Я читал, что Google не пропагандирует концепцию использования negatve text-indent для привязанных тегов - http://maileohye.com/html-text-indent-not-messing-up-your-rankings/. В идеале вы должны использовать теги заголовков и атрибуты rel, чтобы больше сообщать поисковым системам о ссылках.

Кроме того, вы можете прочитать эти потоки:

http://www.google.com/support/forum/p/Webmasters/thread?tid=1a51b7310162d1aa&hl=en
http://websitedesigningtips.com/5-tips-web-designers-developers-optimize-site-search-engines/ (последняя точка)

Файлы Sitemap, роботы, якорные тэги с использованием тегов rel и title, где это возможно, и использование альт-тегов для ваших изображений, должны помочь улучшить SEO.

Google также перемещает контент, управляемый AJAX, теперь используя оператор shebang (#!), поэтому, возможно, что-то, что вы хотели бы прочитать - http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

Используя HTML5 и JQuery, есть несколько плагинов, которые позволяют закладок и глубокую привязку ссылок Ajax.

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

Ответ 3

Тонкий отступ текста должен быть ОК для кнопок действий и, возможно, не совсем ОК, если вы хотите, чтобы поисковые системы рассматривали текст ссылки при взвешивании ранга страницы целевой страницы.

Кстати, я твердо верю, что Google будет использовать несколько эвристик, прежде чем рассматривать вашу разметку как СПАМ, так что вам следует избегать использования текстового отступа в случайном порядке.

Ответ 4

Я не знаю, есть ли у Google проблемы (хотя статья, которую вы связали с ссылками на сообщение в блоге от сотрудника Google, вес), но я думаю, что альтернативой является использование тега <img> с прозрачным GIF, а ваш спрайт как его background-image:

HTML

<a href="#" class="mybutton"><img alt="do Stuff" src="1-pixel-spacer-image.gif" width="16" height="16"></a>

CSS

.mybutton,
.mybutton img {
  display: block;
  width: 16px;
  height: 16px;
}

.mybutton img {
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
}

Фоновые изображения в тегах <img> работают надежно, даже в IE 6.

Конечно, то, что пытается сделать Googles, - это избегать индексации текста, который не отображается, а текст alt тоже не отображается. Но, возможно, это позволит избежать риска того, что ваша страница может быть помечена спамом с помощью алгоритма Google.

И этот метод, по крайней мере, приводит к отображению текста, если пользователь отключает изображения в своем браузере, который text-indent doesnt.

Ответ 5

Ну есть альтернатива (которую я использую довольно часто).

<a href="#" class="mybutton"><span>do Stuff</span></a>

Вы можете изменить диапазон на сильный /h 1 и т.д. на основе контекста.

.mybutton{
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}
.mybutton span{
    display: none;
}