Атрибуты 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.

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

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

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

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

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

Вакансии на карте

Один комментарий

  1. […] примеру, на сайте есть несколько изображений промеченых альт-тегами, мы хотим отследить, спустя время, их […]

Комментарии закрыты.