Alt-теги картинок для SEO: как прописать и примеры

Картинки на сайте работают на вас, только если поисковик и посетитель понимают, что на них изображено. Для этого существует alt — короткое текстовое описание изображения. Часто его оставляют пустым или заполняют набором ключевых слов, и вот тут сайт теряет возможность показываться в поиске по картинкам и выглядит небрежно для людей с нарушением зрения. В статье разберём, что такое alt-теги картинок, как их писать, сколько знаков хватает и как проверить свой сайт за 10 минут. Мы в Webman с 2016 года делаем и продвигаем сайты в Казахстане, и alt — часть нашей SEO-проверки.

Alt (альтернативный текст) — это атрибут тега изображения. В коде это тег картинки с двумя атрибутами: адрес файла (src) и описание (alt). Например, для фото духового шкафа описание будет таким: «Духовой шкаф, встроенный в кухонный гарнитур».

У него три задачи:

1. Доступность. Программы чтения с экрана зачитывают alt людям с нарушением зрения. Без него человек слышит только «изображение» или имя файла.
2. Запасной текст. Если картинка не загрузилась (плохой интернет, ошибка), браузер покажет описание.
3. Понимание поисковиком. Google анализирует картинку, но alt и текст вокруг помогают ему точнее понять, о чём она. Google в своей документации прямо рекомендует писать полезный, информативный alt, связанный с содержанием страницы.

Важно: alt нужен прежде всего людям. SEO-польза — приятное следствие хорошего описания, а не отдельный трюк.

1. Описывайте то, что на картинке. Не «картинка» и не «фото», а суть: «Менеджер показывает клиенту макет сайта на планшете».
2. Учитывайте контекст. Одну и ту же фотографию на странице услуги и на странице вакансий описывают по-разному, потому что роль у неё разная.
3. Ключевое слово — только если оно естественно. Если картинка действительно о запросе, он будет в описании сам. Если нет, не добавляйте.
4. Длина — до 125 знаков. Это ориентир: короткий alt читается быстрее, а длинное описание неудобно слушать. Для схем и инфографики пишите суть, подробности давайте в тексте рядом.
5. Без слов «картинка», «изображение», «фото». Читалка и так знает, что это картинка.

Возьмём сайт студии, у которой есть фото команды за работой.

• Плохо: пустой alt — описания нет.
• Плохо: IMG_4521.jpg — в описании стоит имя файла.
• Плохо: «сайт заказать сайт недорого сайт Астана разработка сайтов» — перечисление ключей, это называют переспамом.
• Хорошо: «Разработчик и дизайнер обсуждают макет лендинга на экране монитора».

Для интернет-магазина:

• Плохо: «кроссовки».
• Хорошо: «Мужские беговые кроссовки синего цвета, вид сбоку».

Для схемы в статье:

• Хорошо: «Схема: шесть шагов настройки файла robots.txt от проверки до отправки в Search Console».

В обоих хороших вариантах описание можно представить в уме без картинки. Это лучший тест: прочтите alt вслух и подумайте, поймёт ли человек, что изображено.

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

А вот у картинок, которые несут смысл (фото товара, схема, скриншот, график, логотип со ссылкой на главную), alt обязателен.

Если картинка служит ссылкой (логотип ведёт на главную), alt описывает действие, а не рисунок: «Webman — на главную». Если картинка заменяет кнопку, пишите то, что написано на кнопке: «Оставить заявку».

Для логотипов в шапке и подвале достаточно названия компании. Не пишите «логотип компании Webman, лучшая студия в Астане» — это реклама, а не описание.

Alt — не единственный сигнал. Поисковик учитывает и другие подсказки, поэтому делайте их согласованными:

• Имя файла. `kuhnya-na-zakaz-astana.webp` понятнее, чем `IMG_4521.jpg`. Пишите латиницей, через дефис.
• Подпись под картинкой. Люди читают подписи чаще, чем основной текст. Короткая подпись добавляет контекст.
• Текст рядом. Размещайте картинку рядом с абзацем, который её объясняет.
• Заголовок и название страницы. Если страница про духовые шкафы, а картинки про совсем другое, поиск запутается. О заголовках мы писали в статье про H1, H2 и H3.
• Размер и формат. Тяжёлые картинки замедляют страницу, об этом — в статье про скорость загрузки сайта.

1. Откройте страницу и нажмите правой кнопкой мыши на картинку, затем «Посмотреть код». Найдите атрибут alt.
2. Для всего сайта используйте краулер (например, бесплатные версии программ-пауков) — он покажет картинки без alt.
3. Проверьте ключевые страницы: главная, услуги, товары, статьи блога.
4. Отключите загрузку картинок в браузере или посмотрите страницу в простом режиме: что останется на месте картинок?
5. Попросите коллегу, не знакомого с сайтом, прочитать только alt и сказать, о чём страница.

Если у вас сайт на конструкторе или CMS, поле для alt обычно есть в настройках изображения: в WordPress оно называется «Альтернативный текст», в Tilda поле для описания есть в настройках блока с картинкой.

• Пустой alt у значимых картинок. Фото товара и схемы остаются «невидимыми».
• Одинаковый alt у всех картинок. Например, везде «Webman». Он не помогает ни людям, ни поиску.
• Переспам ключевыми словами. Список запросов вместо описания выглядит неестественно и может навредить.
• Имя файла вместо описания.
• Длинные абзацы в alt. Подробности лучше вынести в текст страницы.
• Текст на картинке без дубля в тексте. Если важные слова есть только на изображении, поисковик может их не прочитать. Дублируйте их в тексте.

1. Alt — это описание картинки для людей, читалок и поиска; сначала польза, потом SEO.
2. Описывайте суть, учитывайте контекст, до 125 знаков, без слов «картинка» и «фото».
3. Запрос добавляйте только там, где он естественно описывает изображение.
4. Для декоративных картинок оставляйте пустой alt, для значимых — обязательно заполняйте.
5. Проверьте ключевые страницы и исправьте файлы без alt в первую очередь.

Если вы сомневаетесь, как у вас устроены картинки, заголовки и мета-теги, мы сделаем SEO-разбор и покажем, что исправить сначала. Подробности об услуге на странице SEO-продвижения (от 200 000 ₸). Оставьте заявку на странице контактов. Если нужен новый сайт, где всё настроено с самого начала, посмотрите разработку сайтов.