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

VitaliyRodnenko, 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-подмена текста изображением применяется не для поискового спама, то причин для беспокойства нет.

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

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

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

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

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

  1. Исаак Тынгылчав / 17.12.2008 в 11:21

    Плохой способ. Если картинка не загрузилась — не отображается подпись.

    Есть три варианта нормального решения, которое снижает вероятность неадекватной реакции модераторов:

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

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

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

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

  3. 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>. Недостаток: нельзя использовать прозрачные изображения.

  4. Исаак Тынгылчав / 17.12.2008 в 19:27

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

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

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

    >Я обычно использую в вёрстке метод
    А если картинка прозрачная?

  5. Octane / 17.12.2008 в 20:32

    Исаак Тынгылчав: Никаких сомнений. Текст в заголовке намного важнее картинки.

    Я имел ввиду вариант:

    <h1><img … />Текст заголовка</h1>

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

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

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

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

    Из под нее будет видно текст

  6. Skaizer / 18.12.2008 в 00:53

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

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

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

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

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

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

  7. Wolchara / 05.02.2010 в 14:44

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

  8. Алексей / 03.09.2010 в 23:18

    Правильно ли я осведомлен о том, что Яндекс-картинки используют содержание alt для показа своих подборок ? Это не довод в пользу alt ? Но будет ли большой текст обработан Яндексом как следует ?

  9. ABNsoft.info / 24.11.2011 в 18:13

    я не понял для чего в примере надо было указывать class=»main-logo» если его название просто «logo» ???

Оставить комментарий

480×60
480×60