Атрибуты Alt и Title для картинок — заполняем правильно

Содержание статьи

В сегодняшней статье я хочу рассмотреть, почему всё-таки стоит заполнять HTML-атрибут Alt у картинок, чем он отличается от атрибута Title. Материал рассчитан на джунов, которых интересует вопрос, зачем и почему нужно заполнять атрибут Alt.

Объяснение что такое атрибут Alt?

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

Атрибуты Alt и Title для картинок - заполняем правильно

С его помощью юзеры понимают, что находится на странице. Кроме того, этот атрибут полезен не только пользователю, он также помогает понять поисковому роботу, что изображено на картинке. И Google, и Яндекс используют Alt как один из критериев ранжирования при поиске по картинкам. Появляется следующий вопрос: что же нужно добавлять в Alt, чтобы он был максимально полезным и для пользователя, и для поисковика?

Как правильно заполнить атрибут Alt для картинок

Что понять, как правильно заполнить атрибут Alt, рассмотрим следующий пример: у нас есть интернет-магазин металлической мебели, и мы хотим прописать Alt для карточки товара.

Атрибуты Alt и Title для картинок - заполняем правильно

Пишем alt=»Стеллаж металлический полочный 2000х1000х400, 5 полок, светло-серый». Просим программиста прописать у всех товаров название этого товара. На все остальные изображения на сайте ALT не нужен. Хотя многие автоматические аудиты будут присылать алерты. О боже у вас ALT не заполнен.

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

Title у картинок даёт дополнительную информацию об изображении. Он нужен для того, чтобы пользователю было проще понять, что изображено на картинке. Атрибут выводится при наведении курсора на изображение. Приколъ конечно, неужели юзеры на столько тупые?

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

Атрибуты Alt и Title для картинок - заполняем правильно

Если картинка будет ссылкой, Яндекс рекомендует указывать Title в ссылке: 

Атрибуты Alt и Title для картинок - заполняем правильно

Я думаю что Title для картинок бесполезен. Только сеошник должен решать делать это или нет. Основные рекомендации к Title похожи на требования к Alt: должен быть содержательным и описывать изображение; состоять из 3–5 слов, но не больше 250 символов; не должен быть слишком большим, так как при наведении текст в 3–4 строчки может отпугнуть; по возможности содержать ключевой запрос; не должен быть спамным.

Рекомендации от меня на закуску

  • Если Вас интересует трафик из поиска по картинкам, Alt обязательно нужно заполнять, Title – по желанию.
  • Делать ALT и Title разными или одинаковыми? СМОТРИТЕ САЙТЫ В ТОПЕ — обычно там есть оба варианта.
  • Делайте правильное описание ALT
  • Если у вас много вариативных товаров — ничего страшного что будут описания одинаковые
  • Ваши любимые картинки сам файл еще можно писать на траслите. Что изображено. Тоже +1 в карму.

Что говорят Яндекс и Гугл по этому поводу в своих справках?

Атрибуты Alt и Title для картинок - заполняем правильно

Как быстро проверить на вашем сайта Атрибуты Alt и Title для картинок

  1. Ставим плагин для хрома https://chrome.google.com/webstore/detail/seo-meta-in-1-click/bjogjfinolnhfhkbipphpdlldadpnmhc Там есть вкладка Images. Открываем ее и смотрим. Если пусто, ставим ТЗ программисту.
  2. Запускаем скриминг фрог и парсим сайт. Смотрим там вкладку IMAGES > Missing alt text.
Атрибуты Alt и Title для картинок - заполняем правильно

P.S. Если у вас админка битрикс, вордпресс, тильда или другая — вам надо обратиться к своим разработчикам. Или ко мне нажав на кнопку «Заказать консультацию»

Примечания
Атрибуты Alt и Title для картинок.
Как заполнять атрибуты Alt и Title
Атрибуты Alt и Title картинок

Статья
Автор: Павел Гречко

💻 SEO-специалист. ❤️ Руковожу бутиковым отделом маркетинга на аутсорсе.
✅ Умения (навыки, скилы): SEO, Html, Css, Cms WordPress, Яндекс метрика, Увеличение конверсии, Управление репутацией.
✅ Работаю с предпринимателями и маркетологами.
Напишите на почту grechkopv@gmail.com

Оптимизация сайта

Технический аудит + подготовка рекомендация по исправлению ошибок

SEO Продвижение сайта

Увелечие трафика и продаж, Комплексное решение к маркетингу

Консультация

Помогу с вопросами SEO и продвижения бизнеса с помощью сайта

Подписывайтесь что бы не пропустить новые посты
Прочитайте другие посты по теме
Статья
Стикеры сеошника для телеграмм, скачивай прямо сейчас

Есть что добавить? давайте обсудим

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Давайте прямо сейчас

Обсудим потенциал вашего cайта

Напишите какие задачи вы хотите решить с помощью сайта

  • Увеличить SEO-трафик на сайте из Яндекс и Google?

  • Найти слабые места сайта и точки роста?

  • Отдать сайт на Аутсорсинг что бы рулили маркетингом пока вы занимаетесь бизнесом?

О компании

ИП ГРЕЧКО ПАВЕЛ ВЛАДИМИРОВИЧ
ИНН 781446683349
ОГРН 319470400115482

E-mail это лучшее средство связи на планете земля.

Copyright © 2022
This site is protected by reCAPTCHA and the Google
Privacy Policy and
Terms of Service apply.

Дисклеймер — статьи на этом сайте написаны копирайтерами профессионалами. В интернете тысячи одинаковых текстов. Все совпадения с вашими текстами случайность. На всякий случай стоят ссылки на источники материалов что бы у вас не случилась биполярка.

Следуйте за мной

Сопровождение бизнеса в интернете с 1995 года.

Оставить заявку!

Напишите кратко с каким трудностями вы столкнулись?

Какие перед вами стоят задачи

Ссылка на сайт