Что хуже: скрытие текста или удаление текста? - PullRequest
Новая
       11

Что хуже: скрытие текста или удаление текста?

3 голосов
/ 06 октября 2010

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

Использование логотипа этого сайта, Сценарий 1: 

<div id="hlogo">
    <a href="/">Stack Overflow</a>
</div>

#hlogo a {
    width:250px;
    height:61px;
    display:block;
    background-position:0 0;
    text-indent:-999999em;
    float:left;}

Или лучше не скрывать текст и просто использовать атрибут rel в теге привязки?

<div id="hlogo">
    <a href="/" rel="Stack Overflow"></a>
</div>

#hlogo a {
    width:250px;
    height:61px;
    display:block;
    background-position:0 0;
    float:left;}

Мне интересно, будет ли удаление реального текста «Переполнение стека» большим ударом по SEO, чем сокрытие текста.Кажется, что все используют метод text-indent, хотя Google говорит, что нет-нет.Какой лучший способ добиться этого для семантической разметки и SEO?

Ответы [ 6 ]

2 голосов
/ 06 октября 2010

http://www.seomoz.org/article/search-ranking-factors#negative-ranking-factors

10) Скрытие текста с помощью CSS путем смещения отображения пикселей за пределами видимой области страницы - низкая важность

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

2 голосов
/ 06 октября 2010

Эмпирическое правило: если вы беспокоитесь о SEO, а Google говорит, что что-то нет, вам, вероятно, не следует это делать.

Я думаю, что ваш второй вариант отлично подойдет для целей SEO.

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

2 голосов
/ 06 октября 2010

Я просто выхожу на конечность здесь, но если она «скрыта», она, по крайней мере, существует для поиска. Если вы удалите его, его просто нет. Отметим, что вам не нужно использовать этот метод противного отступа. Вы можете установить элемент на display: none;

Однако никто не знает, как работает рейтинг Google. Вы можете быть оштрафованы в SEO за его сокрытие. Но Метод 'indent' немного хакерский, поэтому он выглядит так, будто вы пытаетесь что-то скрыть, а не просто не показывать это.

1 голос
/ 06 октября 2010

Вы также должны иметь в виду программы чтения с экрана для слабовидящих. используя видимость: скрытый и / или отображаемый: никто не может удалить текст из читателей и сканеров (хотя я не уверен насчет последнего), поэтому подумайте дважды, прежде чем их использовать.

Я бы предпочел использовать ОБА текста и атрибут заголовка (а не rel). Вы можете скрыть текст от просмотра, используя один из многих доступных методов замены изображения. см. http://css -discuss.incutio.com / wiki / Image_Replacement .

Если вам просто нужно спрятать какой-то текст, лично я нахожу этот трюк очень удобным: 

.some-element { 
    display: block;
    overflow: hidden;
    height: 0;
}
0 голосов
/ 12 апреля 2013

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

Лучший способ - использовать логотип в качестве изображения внутри тега привязки. Дайте «alt» вашему изображению. Это идеально подходит для чтения ботами, а также поможет в поиске изображений.

Это прямо изо рта лошади: http://www.youtube.com/watch?v=fBLvn_WkDJ4

0 голосов
/ 06 октября 2010

Я бы использовал ваше первое решение каждый раз.Это лучше для доступности и бесконечно более семантически.Они находятся на относительно равных условиях с точки зрения SEO (при использовании предложения @simplemotives об использовании атрибута title вместо rel).

И, конечно, нет ничего «хакерского» в использовании text-indent.Это в значительной степени считается стандартным методом замены изображений и единственным, который учитывает доступность и портативность.

...