Использование CSS подмены текста изображением и SEO. Какие могут быть последствия?

Skaizer, 17.12.2008

Подмена текста на сайте изображением — распространенная техника среди верстальщиков. С помощью CSS вы можете спрятать текст вне поля видимости страницы на мониторе, а на его месте расположить какую-либо картинку.

Для чего это нужно и как отнесутся к этому поисковые системы?

Давайте приведем пример. Допустим, у нас на сайте имеется логотип в виде картинки. Следующий код реализует это:

<h1 class="logo">
  <img src="images/logo.jpg" alt="Название логотипа или компании" />
</h1>

Давайте применим технику CSS-подмены. Создадим CSS-класс logo:

h1.logo {
width: 300px; height: 50px;
background: url(images/logo.jpg);
text-indent: -9999px;
}

Остается немного изменить наш код логотипа:

<h1 class="main-logo">Название логотипа или компании </h1>

Визуально вы не найдете разницы. И в первом и во втором случае вы увидите изображение логотипа, и никакого текста.

Но давайте взглянем на это со стороны SEO. Известно, что для выделение наиболее важных ключевых слов на сайте (как правило, по которым происходит продвижение) их помещают в теги заголовков <h1>…<h6> и логического выделения, в основном <strong>, <em>.

Во втором случае, когда применяется CSS-подмена текста изображением, сам текст присутствует в теге <h1>. И поисковая система, когда будет разбирать структуру сайта, выделит этот текст, как более приоритетный на странице и придаст ему дополнительный вес.

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

За и против

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

Никто не мешает заменять изображениями большие блоки текста, насыщенные ключевыми словами. Ведь пользователю эти блоки не будут видны, а поисковая система «проглотит» их и будет использовать в ранжировании. Этим SEO-специалисты и пользуются.

Но может ли данная техника повлечь бан всего сайта или наложения какого-либо фильтра?

По словам Google?

Мэтт Катс, глава отдела по борьбе с поисковым спамом в Google, однажды сказал:

Использование CSS-подмены текста изображение является допустимой техникой. И Google не будет штрафовать сайт за ее использование, при условии, что соблюдены правила: текст на картинке должен полностью соответствовать заменяемому тексту. Например, если ваша компания называется «Expo Markers», что и изображено на логотипе, и скрытый текст тоже «Expo Markers», то вы можете не беспокоиться. Никакого нарушения правил здесь нет. Но если скрытый текст: «Expo Markers cheap online discount buy online Expo Markers sale …», то есть повод для беспокойства, потому как Google может оштрафовать сайт, или что еще хуже — забанить.

Итак, стало ясно, что если CSS-подмена текста изображением применяется не для поискового спама, то причин для беспокойства нет.

Используете ли вы подобный метод подмены и были ли у вас проблемы с поисковиками по этому поводу?

Подписаться на обновления блога

Категории: CSS, SEO, продвижение сайтов | Комментировать

RSS-лента комментариев к этой статье | Обратная ссылка (trackback link)

Комментарии (7)

Исаак Тынгылчав / 17.12.2008 в 11:21
Плохой способ. Если картинка не загрузилась – не отображается подпись.

Есть три варианта нормального решения, которое снижает вероятность неадекватной реакции модераторов:
1. Вставляется и текст и картинка. Картинка после загрузки сталкивает надпсиь вниз в область overflow:hidden;
2. По онлоад анализируется подгрузка картинки. Если не подгрузилась – выводится надпись.
3. Порка дизайнера палкой по голове, до тех пор пока он не поймет что делать заголовки картинкой на информационных сайтах нельзя. Этот способ самый лучший.
rotor / 17.12.2008 в 17:49

@Исаак Тынгылчав, да дело не совсем в примере, а в подходе к спам-оптимизации.

По памяти можно вспомнить еще штук пять способов замены текста картинками и раза в два больше нагуглить. И у каждого из них будут свои недостатки.

Я вообще рад, что такой подход еще не распространен среди зарабатывающих SEO-школьников-оптимизаторов Рунета. И так в топе постоянно висит один неадекват, и если в их арсенале появится еще и это, то совсем худо будет.
Octane / 17.12.2008 в 17:59
Исаак Тынгылчав, какой смысл сталкивать в невидимую область текст, если можно его написать в атрибуте «alt»? Или думаете, что заголовок, в котором первым идет узел <img>, а потом текстовый узел, будет обработан поисковой системой лучше, чем заголовок с <img>, в котором текст записан только в атрибут «alt»? Я сомневаюсь в этом, хотелось бы услышать какие-то доказательства. К тому же, если изображения по каким то причинам уже есть в кэше браузера, но их отображение отключено, то некоторые браузеры получат их размер и отобразят страницу соответственно, поэтому в вашем способе придется записать текст, как в атрибут «alt», так и после узла <img>, иначе мы тоже не увидим текста, и к чему такое дублирование, каким образом оно скажется на восприятии поисковыми системами?

Я обычно использую в вёрстке метод с абсолютным позиционированием, чтобы оставить видимым текст в случае, если изображения отключены:
```
<style type="text/css">
h1, h1 span {
width: …px;
height: …px;
}
h1 {
position: relative;
}
h1 span {
position: absolute;
top: 0;
left: 0;
background: url(…) no-repeat;
}
</style>
<h1>Текст заголовка<span>&nbsp;</span></h1>
```
Таким образом текст закрывается фоновым изображением тега <span>. Недостаток: нельзя использовать прозрачные изображения.
Исаак Тынгылчав / 17.12.2008 в 19:27

2octane
>какой смысл сталкивать в невидимую область текст, если можно его написать в атрибуте «alt»
На случай если капртинка не загрузится. Alt в данном случае не помогает – у него размер в FF ~10px. Явно не заголовочный.

>а потом текстовый узел, будет обработан поисковой системой лучше, чем заголовок с , в котором текст записан только в атрибут «alt»?
Никаких сомнений. Текст в заголовке намного важнее картинки. А если тема востребована при поиске картинок то учитывается и заголовок и alt. Посмотрите в яндексе любую статью по словам «факторы релевантности»

>если изображения по каким то причинам уже есть в кэше браузера, но их отображение отключено
Не знал. Точнее не проверял. Спасибо.

>Я обычно использую в вёрстке метод
А если картинка прозрачная?
Octane / 17.12.2008 в 20:32
Исаак Тынгылчав: Никаких сомнений. Текст в заголовке намного важнее картинки.

Я имел ввиду вариант:
```
<h1><img … />Текст заголовка</h1>
```
В заголовке первым делом идет изображение, может быть и с заполненным атрибутом «alt», что в этом случае делает поисковая машина, какой текст будет взят? Может быть она найдет в заголовке изображение с пустым атрибутом «alt» и на этом закончит анализ заголовка? Если есть текст в атрибуте «alt» и в самом заголовке, какому из-них будет отдано предпочтение или они будут анализироваться одинаково или в целом?

Исаак Тынгылчав: Alt в данном случае не помогает – у него размер в FF ~10px

В фаерфоксе и опере это можно поменять в CSS, вот в ИЕ действительно так, но он будет отображать рамку вокруг незагруженного изображения.

Исаак Тынгылчав: А если картинка прозрачная?

Из под нее будет видно текст
Skaizer / 18.12.2008 в 00:53

В заголовке первым делом идет изображение, может быть и с заполненным атрибутом «alt», что в этом случае делает поисковая машина, какой текст будет взят?

Будет обработан полностью весь <h1>. Ввиду того, что некоторые веб-мастера забывают заполнять атрибут alt тега <img>, я считаю, больше даже уверен, что альтернативный текст изображения имеет меньший вес чем просто текст на странице. Ввиду того, что и изображение и текст располагаются в теге <h1>, то несомненно на мой взгляд поисковая машина отдаст приоритет тексту.

В SEO у альтернативного текста, в принципе, другое предназначение, как правило, это поиск по картинкам.

Может быть она найдет в заголовке изображение с пустым атрибутом «alt» и на этом закончит анализ заголовка? Если есть текст в атрибуте «alt» и в самом заголовке, какому из-них будет отдано предпочтение или они будут анализироваться одинаково или в целом?

Вся страница анализируется полностью. Конечно у поисковика имеется ограничение на максимальный размер загружаемого HTML кода, но мы будем рассматривать нормальные случаи. Нелогично было бы ПМ в своих алгоритмах ранжирования использовать отрывочные данные из страницы. Для построения картины необходима полная информация.

Конечно, ничего из мною сказанного нельзя утверждать однозначно, я так же за это не берусь. Знать ответы на эти вопросы могут только разработчики алгоритмов ранжирования. Я строю только предположения, основанные на опыте.
Wolchara / 05.02.2010 в 14:44

Однозначно спам. Лучше пойти с обратной стороны, убрать для поисковика массивы разбавляющего текста от индексации, убрать их куски в жава-скрипит. Т.к. поисковики яву обрабатывают плохо или совсем не обрабатывают. Получается что поисковик видит только то что не закрыто скриптом. Для посетителя сайт как сайт, а для пс только Н1 и контентная статья с телефонами.

code is art