Атрибуты Alt и Title для картинок. Ответы на популярные вопросы

()

В этой статье мы рассмотрим процесс заполнения HTML-атрибута ALT для изображений на сайте, отличия от Tittle. Я пишу статьи для новичков и начинающих веб-мастеров и аналитиков, которых интересует вопрос «Зачем проставлять alt-атрибуты у изображений». Начнем с начала.

Что такое ALT?

ALT – является альтернативным источником информации о изображении для пользователей, у которых не прогрузилась страница, или прогрузилась страница частично. В реалиях 2021 года – таких пользователей зачастую немного, по данным Яндекса высокоскоростной интернет подключен почти по всей стране.

В HTML коде ALT прописывается следующим образом:

<img src="/upload/iblock/4bc/1.jpg" alt="Пример заполнения alt атрибута">

Для примера, возьмем картинку с главной страницы этого сайта,

Отключаем изображение графики на сайте,

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

Правильно заполняем ALT для картинок

Представим, что перед нами стоит задача разместить фотографию бани, с корректным альт-тегом.

У нас есть несколько вариантов заполнения тега:

Вариант 1: «1», «2», «3, и прочие цифры в названии. В среде SEO-специалистов такое наименование alt-тега считается некорректным. По понятной причине, в теге передается некорректное описание изображения.

Вариант 2: «Фотография бани». В сравнении с вариантом 1 – лучше. Не хватает конкретики, это деревянная баня? Ее можно можно купить? Запрос под который мы написали альт-тег является коммерческим или информационным? Исходя из реального опыта – такой альт нам забракуют, рассмотрим следующие варианты.

Вариант 3: «Деревянная баня купить». Мы почти у цели, некоторые специалисты могут вернуть такой аттрибут обратно, указав лишнем добавлении слова «купить», некоторые специалисты воспримут это как корректный ответ на запрос «деревянная баня». Такой формат подойдет.

Вариант 4: «Деревянная баня». Самый жирный по Wordstat запрос, охватывает и коммерческий и информационный спрос. В большинстве случаев – именно такой вариант посчитается корректным.

На выходе получаем вариант:

<img src="/upload/iblock/4bc/1.jpg" alt="Деревянная баня">

Зачем нужен атрибут Tittle?

Tittle, по аналогии с тегом ALT – помогает пользователю понять, что изображено на картинке, а также, передает поисковым системам информацию.

Отличие – в предпоказе текста при наведении на картинку. Иными словами, наведя мышкой на соответствующую картинку, для которой указан атрибут Tittle, пользователь увидит текст, который мы прописали. Обратим внимание на пример:

Картинка

В HTML коде атрибут прописывается следующим образом:

<img src=“image.jpg” alt=“alt атрибут описание” title=“tittle атрибут описание”>

Если картинка является ссылкой (что довольно редкое явление), у Яндекса было правило на эту тему, которое рекомендует нам писать сначала тайтл, а после — альт.

<img src=“image.jpg” title=“tittle атрибут описание”> alt=“alt атрибут описание”>

Я рекомендую заполнять сразу оба тега. Их заполнение – обычно хорошо отражается для пользователя, который машинально навел мышкой на картинку. И что еще важно – корректно заполненные теги передаются в поисковые системы, за счет чего, поисковая система видит аккуратную прометку изображений на сайте, и как следствие, корректирует позиции.

Основные требования к тегу Tittle:

— Должен корректно описывать изображение

— Состоять из 3-6 слов

— Не должен быть слишком большим. Большое описание при наведении на картинку – признак плохой оптимизации.

— По возможности (но не обязательно), должен содержать ключевой запрос

— По возможности (но не обязательно) – не должен повторяться.

Основные требования к тегу alt:

— Должен корректно описывать изображение

— Состоять из 3-6 слов

— Не должен быть слишком большим. Большое описание при наведении на картинку – признак плохой оптимизации.

— По возможности (но не обязательно), должен содержать ключевой запрос

— По возможности (но не обязательно) – не должен повторяться.

Ответы на вопросы к статье «Атрибуты Alt и Title для картинок. Ответы на популярные вопросы»

ALT – это описание изображения?

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

Нужно ли заполнять теги ALT и Tittle на для картинок на сайте?

Зависит от целей.

Тег alt критичен для SEO-продвижения. Сайты у которых он заполнен всегда выигрывают у сайтов, у которых он не заполнен.

Тег tittle, в SEO-сообществах считается скорее бесполезным, при этом, некоторые специалисты все-равно его заполняют. Тут на ваше усмотрение.

Должны ли быть различия в тегах alt и tittle?

В топе выдачи полно сайтов с одинаковым заполнением тега alt и tittle. Иными словами, возвращаясь к примеру с баней, и тайтл и альт – звучат как «Деревянная баня».

Дублировать ли ключевые слова статьи в изображениях?

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

Прописывать ALT и Tittle кириллицей или латиницей?

Зависит от языка вашего сайта. Если ваш сайт на русском – прописывайте на русском. Если на английском – то на английском.

Большая или маленькая буква?

Без разницы.

Страница уже проиндексирована, можно ли менять атрибуты?

Можно. При следующем обходе – поисковые системы корректно отреагируют на изменение альт-тегов на сайте.

Можно ли посмотреть в Google Analytics данные по заполнению ALT-тегов?

Нет, я рекомендую использовать инструменты типа Seo Spider.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Сожалеем, что вы поставили низкую оценку!

Позвольте нам стать лучше!

Расскажите, как нам стать лучше?