Как написать отличный текст для изображений на сайте

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

Что такое Alt Text

Альтернативный текст — это альтернативный текст, используемый текстовыми браузерами и другими агентами веб-пользователей, которые не могут просматривать изображения. Это также один из единственных атрибутов, требуемых тегом изображения. Написав эффективный альтернативный текст, вы гарантируете, что ваши веб-страницы будут доступны людям, которые могут использовать программу чтения с экрана или другое вспомогательное устройство для доступа к вашему сайту. Вы также гарантируете, что что-то будет отображаться вместо изображения, если оно не загружается по какой-либо причине (неправильный путь, сбой передачи и т. Д.). Это реальная цель альтернативного текста, но этот контент может также дать вам больше мест для добавления SEO-дружественного текста, за который поисковые системы не будут наказывать вас (подробнее об этом в ближайшее время).

Альтернативный текст должен повторять текст на изображении

Любое изображение с текстом должно иметь этот текст в качестве альтернативного текста. Вы можете поместить другие слова в альтернативный текст, но, как минимум, он должен сказать то же самое, что и изображение. Например, если у вас есть логотип для ваших изображений, текст Alt должен повторять название компании, написанное вашим графическим логотипом.

Помните также, что изображения, такие как логотипы, могут также содержать текст — например, когда вы видите красный значок с шариком на веб-сайте Dotdash, это означает «Dotdash.com». Таким образом, альтернативный текст для этой иконки мог бы сказать «Dotdash.com», а не просто «логотип компании».

Держите текст коротким

Чем длиннее ваш альтернативный текст, тем сложнее будет читать текстовые браузеры. Может быть заманчиво написать длинные предложения альтернативного текста (как правило, это делается потому, что кто-то пытается заполнить тег ключевыми словами), но из-за коротких Alt-тегов ваши страницы становятся все меньше и меньше загружаются быстрее.

Хорошее эмпирическое правило для альтернативного текста — держать его от 5 до 15 слов.

Использование ваших ключевых слов SEO в тэгах Alt

Люди часто ошибочно думают, что целью альтернативного текста является размещение ключевых слов в поисковых системах. Да, вы можете использовать это преимущество, но только если добавляемый текст имеет смысл для реальной цели тега alt — для отображения интеллектуального текста, который объясняет, что это за изображение, если кто-то не сможет его увидеть!

Теперь, как говорится, альтернативный текст, не предназначенный как инструмент SEO, не означает, что вы не можете использовать свои ключевые слова в этом тексте. Поскольку альтернативный текст важен и необходим для изображений, поисковые системы вряд ли накажут вас за размещение там ключевых слов, если контент, который вы добавляете, имеет смысл. Просто помните, что ваш первый приоритет для ваших читателей. Спам в ключевых словах в альтернативном тексте может быть обнаружен, и поисковые системы постоянно меняют свои правила, чтобы предотвратить спамеров.

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

Сделайте ваш текст осмысленным

Помните, что смысл альтернативного текста — определить изображения для ваших читателей. Многие веб-разработчики используют альтернативный текст для себя, включая такие как размер изображения, имена файлов изображений и так далее. Хотя это может быть полезно для вас, оно ничего не делает для ваших читателей и поэтому должно быть исключено из этих тегов.

Использовать пустой альтернативный текст только для значков и маркеров

Периодически вы будете использовать изображения, которые не содержат никакого полезного описательного текста, такого как маркеры или простые значки. Лучший способ использовать эти изображения в CSS, где вам не нужен альтернативный текст. Но если вы обязательно должны иметь их в своем HTML, используйте пустой атрибут alt, а не оставляйте его полностью.

Может быть заманчиво поместить символ, такой как звездочка (*), для обозначения маркера, но это может быть более запутанным, чем просто оставить его пустым. А добавление текста «bullet» будет выглядеть еще более странно в текстовом браузере.

Под редакцией Джереми Жирара 3/3/17

Ссылка на основную публикацию