Оптимизация изображений с помощью атрибутов alt и title, зачем они нужны и какой текст для них использовать

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

Зачем на сайте картинки

Благодаря алгоритмам поиска Google и Яндекс — письменный контент безраздельно «правит балом», но каждому королю нужна корона. Современные получатели информации привыкли воспринимать ее визуально. Любой текст легче читается и запоминается когда он дополнен даже самой банальной картинкой в виде фотографии, графики или инфографики. Кроме того картинки могут удачно дополнить и объяснить написанное.

Точно так же, как и текст, изображения в тексте на веб-ресурсе должны распознаваться роботами Google, для этого необходимо провести их оптимизацию. Конечно, ни одна из машин не может прочитать то, что показано на картинке (они не могут видеть то, что видит человеческий глаз). Следовательно, необходимо его описание, для этого используют атрибуты alt и title.

Альтернативный текст — alt

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

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

Рекомендации по использованию атрибута alt можно найти в спецификации XHTML — alt является обязательной частью тега IMG. Базовый код этого оптимизированного изображения выглядит так:

<img src = «filename.jpg» alt = «описание изображения» />

Веб-сайт с оптимизированными изображениями, описанными с помощью альтернативного текста, будет соответствовать (по крайней мере в этом отношении) стандарту W3C для правильной разработки кода для веб-сайтов.

Титульное изображение — title

Еще один атрибут, который обязательно используют при оптимизации изображения — это его заголовок. Еще его называют вспомогательным текстом или всплывающей подсказкой. С точки зрения интернет-пользователя эффект от использования этого атрибута следующий: после наведения курсора на фотографию появляется «окошко» с описанием. Это название картины. Конечно, оно появляется тогда, когда содержимое атрибута title завершено.

Код изображения, содержащий как alt, так и title, в базовой версии должен выглядеть так:

<img src = «filename.jpg» alt = «описание того, что изображено на изображении» title = «image title» />

Какой текст должен содержаться в alt и tiltle

Alt — более важный из двух атрибутов. Именно на него в первую очередь обращают внимание сетевые роботы. Отсутствие атрибута alt на картинках может привести к ошибкам проверки и индексации страницы. Тем не менее, также стоит заполнить title. Мы можем рассматривать это как своего рода вишенку на торте, но следует помнить, что каждый, даже маленький элемент оптимизации страницы, определяет качество SEO всего ресурса.

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

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

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

Alt и title — одинаковые или уникальные

Как мы уже знаем, alt — это альтернативный текст, описывающий содержимое изображения, а title — это просто заголовок изображения или рисунка. Вы можете следовать этим рекомендациям при добавлении содержимого этих тегов. Однако многие редакторы просто дублируют контент в обоих полях — тогда alt и title совпадают. Так как же отличить описание от заголовка? Оба могут быть похожи друг на друга — в конце концов, описание изображения, состоящее из одного предложения, вполне может соответствовать его заголовку.

Некоторые специалисты по оптимизации изображений позволяют дублировать описание для alt и title изображения. Но знаете ли вы, что почти 1/3 страниц в Интернете не содержат уникального текста и могут быть классифицированы как дублированный контент? Дифференциация alt и title для одного изображения — это такой кирпичик, который говорит о качестве веб-сайта и, как сумма большего целого, может помочь веб-сайту занять более высокое место в результатах поиска по определенным ключевым словам.

Стоит помнить, что один из вариантов поиска информации в Google — это поиск по изображениям. Реливантные альт и заголовок помогут вам подняться выше в этих результатах.

Еще одна проблема — дублирование описания alt и title для разных картинок. Этот вопрос также относится к вышеупомянутым указаниям на дублированный контент. Содержание альтернативных текстов и заголовков каждого оптимизированного изображения на вашем веб-сайте должно быть уникальным!

Правильная оптимизация веб-сайта — это отправная точка для достижения высоких результатов в результатах поисковой выдачи Google или Яндекса. Размещенные на нем оптимизированные картинки — часть хорошего SEO. Вот почему стоит обратить внимание на заполнение соответствующих атрибутов каждого изображения, которое вы добавляете на сайт. Зачем отказываться от преимущества перед конкурентами, которое можно получить благодаря такому простому действию.

Как правильно использовать теги alt и title вы узнаете из видео.