Является ли text-indent: -9999px плохой техникой для замены текста изображениями, и каковы альтернативы? - PullRequest
Новая
       26

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

25 голосов
/ 23 января 2012

Эта статья говорит, что мы должны избегать использования этой техники. Этот говорит, что это круто.Правда ли, что 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 тоже не нравится ...

Так, как лучше всего справляться с такими ситуациями?

Ответы [ 5 ]

22 голосов
/ 05 сентября 2012

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

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

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

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

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

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

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

5 голосов
/ 23 января 2012

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

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

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

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

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

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

3 голосов
/ 23 января 2012

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

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

2 голосов
/ 23 января 2012

Я не знаю, есть ли у 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.

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

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

1 голос
/ 23 января 2012

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

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

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

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