Alt-текст для изображений: как писать его для SEO и доступности

Вы разместили на сайте красивые изображения, но в их коде не хватает маленькой детали, которая значит очень много: alt-текста. Это короткая строка, описывающая, что изображено на картинке — невидимая для обычного посетителя, но необходимая для Google и для людей, которые не могут увидеть фото.

Alt-текст делает две вещи сразу. Он помогает вашим изображениям появляться в Google Картинках — источнике трафика, который большинство владельцев сайтов полностью игнорируют. И он позволяет людям, использующим программы чтения с экрана, понять содержимое страницы. В этом руководстве я покажу, как именно писать хороший alt-текст, с конкретными примерами, и каких ошибок избегать.

Что такое alt-текст на самом деле

Alt-текст (атрибут alt в HTML) — это короткое описание изображения, записанное в коде. Выглядит примерно так:

• `<img src="modern-strizhka.jpg" alt="Современная мужская стрижка в парикмахерской">`

Никто не видит его при обычной загрузке страницы. Но он появляется в трёх важных случаях:

• когда изображение не загрузилось (слабое соединение, отсутствует файл), текст выводится вместо него;
• когда кто-то использует программу чтения с экрана, текст читается вслух;
• когда Google индексирует страницу и пытается понять, о чём изображение.

Иначе говоря, alt-текст — это мост между изображением, которое машины и программы чтения не могут по-настоящему «увидеть», и его смыслом.

Как написать alt-текст, который действительно помогает

Основное правило: опишите то, что изображено, ясно и конкретно, как если бы вы объясняли картинку кому-то по телефону.

• Будьте конкретны. «Тарелка пасты карбонара с пармезаном» говорит больше, чем «еда».
• Держите коротко. Одного предложения достаточно; не пишите абзац.
• Добавляйте нужный контекст. Если изображение показывает услугу, которую вы оказываете в определённом городе, упомяните это естественно: «Благоустройство сада с рулонным газоном во дворе».
• Не начинайте с «изображение» или «фото». Программа чтения уже сообщает, что это картинка, так что это будет лишним.
• Пишите для человека, а не для робота. Естественный текст устраивает и Google, и посетителя.

Ключевые слова — да, но без перебора

Alt-текст — законное место, где можно указать ключевое слово, относящееся к странице. Если страница про мужские стрижки в городе, естественно, что описание изображения содержит эти слова.

Проблема начинается, когда это становится натужным. Google наказывает за переспам ключевых слов, и текст вроде «стрижка город стрижка мужская дёшево парикмахерская город» ничего не описывает и вредит, а не помогает.

Здоровое правило:

• одно ключевое слово на изображение, естественно вплетённое в описание;
• описание должно оставаться верным тому, что реально на фото;
• если текст звучит странно при чтении вслух, вы перестарались.

Цель — честное описание, которое заодно содержит нужный термин.

Декоративные изображения и имя файла

Не каждому изображению нужно описание. Чисто декоративные элементы — разделительная линия, фон, иконка без самостоятельного смысла — должны иметь пустой alt (`alt=""`). Так программы чтения пропускают их, а не заваливают пользователя ненужными описаниями. Внимание: `alt=""` (намеренно пустой) — это не то же самое, что полное отсутствие атрибута, которое является ошибкой.

Часто забываемая деталь: имя файла тоже важно. Google его читает. Поэтому `modern-strizhka-gorod.jpg` намного лучше, чем `IMG_4821.jpg`.

• Переименуйте файлы перед загрузкой, разделяя слова дефисами.
• Используйте только строчные латинские буквы, без пробелов.
• Также задавайте правильные размеры и сжимайте файлы — тяжёлое изображение замедляет страницу, а скорость важна для SEO.

Как мы работаем в MPO Web Studio

Когда мы создаём сайт, мы относимся к изображениям как к части SEO, а не как к мелочи. Каждое значимое изображение получает alt-текст, написанный человеком, чистое имя файла и правильное сжатие, чтобы страница загружалась быстро и была доступна всем.

Мы работаем полностью удалённо, для клиентов по всей стране, и готовим бесплатное демо вашего сайта до любой оплаты — вы видите реальный результат, а не обещание. Цены прозрачные, без сюрпризов.

Здравое предупреждение: бегите от любого, кто обещает вам «гарантированное первое место в Google». Никто не может этого гарантировать. Хорошо сделанный alt-текст — одна из многих деталей, которые вместе повышают ваши шансы, а не волшебный трюк.

Хотите мнение по вашему текущему сайту? Напишите нам в WhatsApp, и мы посмотрим вместе.