Подмена текста изображением

Иногда дизайнеры используют красивые (нестандартные) шрифты, например, для заголовков, пунктов меню, эффектных ссылок. Если решено было делать их картинками, тогда воспользуйся техникой замены текста изображением — правило хорошего тона. Метод предложен Джеффри Зельдманом:

• с помощью CSS прячем изображения в фон
• текст надписи дублируем текстом, который прячем за пределы элемента

<h1>Фирма Рога и копыта</h1>

h1 {
	width: 250px;
	height: 100px;
	background: url(path-to/logo.png);
	text-indent: -9999px; /* прячем текст за пределами заголовка */
	overflow: hidden;
}

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

Тут могут возникнуть опасения: т.к. пользователь не увидит текст в данном заголовке, не последуют ли штрафные санкции со стороны поисковых систем? Мэт Катс (Matt Cutts) — глава отдела по борьбе с поисковым спамом в Google, по этому поводу сказал:

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

Вывод

Применяем смело технику, но применяем правильно, чтобы не нарваться.