В этой статье мы рассмотрим процесс заполнения 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.