Скрытие текста с помощью css: text-indent - PullRequest
Новая
       27

Скрытие текста с помощью css: text-indent

4 голосов
/ 18 июля 2011

В верхней части моего сайта есть логотип компании, который ссылается на домашнюю страницу. Я скрываю текст ссылки, используя text-indent: -9999px;, что кажется обычной практикой.

Для меня это похоже на хак, и я обеспокоен, что это негативно отразится на моем SEO.

Это все еще лучший способ сделать это?

HTML: 

<a href="index.php" id="logo">My Website</a>

CSS: 

#logo {
  display: block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  background: url('logo.png');
  text-indent: -9999px;
}

Ответы [ 4 ]

3 голосов
/ 29 мая 2012

Я бы предложил вам два пути, и ни один из них не является текстовым отступом (это устаревший метод).Первый способ - удалить текст, вместо этого добавьте заголовок для своего якоря, например: 

<a href="index.php" id="logo" title"My Website"></a>

Второй способ - добавить изображение в этот тег привязки: 

<a href="index.php" id="logo"><img src="path/to/image" alt="My Website"/></a>

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

Смотрите это видео: http://www.youtube.com/watch?v=fBLvn_WkDJ4&feature=player_embedded

3 голосов
/ 18 июля 2011

AFAIK сканер Google не видит, что вы переместили текст из видимой части страницы, он все равно может найти текст, который вы скрыли с помощью text-indent.Это не должно повредить SEO.Кроме того, если бы это было так, использование text-indent для этой цели не было бы обычной практикой.

0 голосов
/ 25 апреля 2014

Вот трюк, которым я часто пользуюсь.Это не должно сердечно SEO вообще 

<a href="">&nbsp;</a> - now is visible but without showing any chars.
0 голосов
/ 05 декабря 2012

Есть еще одно преимущество использования text-indent:-9999px;: при использовании Opera Mini и других мобильных браузеров он отображает не фоновое изображение, а просто текст.Гораздо лучше показать текст пользователю Opera Mini вместо очень маленького логотипа, который невозможно прочитать.

...