Когда вы видите изображение на веб-странице, может быть трудно представить, что это изображение может быть совершенно "невидимым" для поисковых систем и пользователей с нарушениями зрения. Поисковые системы не могут напрямую понимать содержимое изображения, как это делают люди, а программы чтения с экрана не могут описать изображение слепым пользователям — если у изображения нет ALT-атрибута. Этот, казалось бы, простой HTML-тег на самом деле является мостом, соединяющим визуальный контент с машинным пониманием, и одним из наиболее легко упускаемых, но чрезвычайно важных аспектов оптимизации SEO и доступности веб-сайтов.
ALT-атрибут (Alternative Text, альтернативный текст) — это атрибут тега <img> в HTML, который используется для предоставления текстового описания изображения. Когда изображение не загружается из-за проблем с сетью, пользователь отключил отображение изображений или посетитель использует программу чтения с экрана, текст в ALT-атрибуте отображается вместо изображения. На уровне кода его написание очень просто:
<img src="product-photo.jpg" alt="Белая керамическая кофейная чашка на деревянном столе">
"Белая керамическая кофейная чашка на деревянном столе" в этом коде — это содержимое ALT-атрибута. Для обычных посетителей этот текст обычно невидим; но для поисковых ботов, программ для чтения с экрана или когда изображение не загружается, это описание становится единственным основанием для понимания содержимого изображения.
Многие операторы веб-сайтов при загрузке изображений либо полностью игнорируют ALT-атрибут, либо произвольно заполняют его бессмысленным текстом, таким как "image1.jpg". Такая практика не только упускает SEO-возможности, но и делает веб-сайт бесполезным для доступности.
Поисковые системы не могут "видеть" изображения, они полагаются на ALT-атрибут для понимания содержимого изображения, чтобы определить, включать ли изображение в результаты поиска по картинкам, и для оценки релевантности содержимого страницы запросу пользователя. Если у изображений продуктов на веб-сайте электронной коммерции отсутствуют точные ALT-описания, это означает, что они практически невидимы в поиске изображений Google, что приводит к потере большого объема потенциального трафика.
С точки зрения пользовательского опыта, люди с нарушениями зрения, просматривающие веб-сайты с помощью программ чтения с экрана, полностью полагаются на ALT-атрибут для понимания изображений на странице. Если в статье в блоге о туристических достопримечательностях к изображениям лишь указано "IMG_3847", слепые пользователи не смогут узнать, является ли это фотографией заката на пляже или снежного пейзажа с вершины горы. Хорошие ALT-описания могут сделать веб-сайт по-настоящему полезным для всех пользователей, а не только для зрячих.
Кроме того, в сценариях слабого мобильного интернета или когда пользователи активно отключают изображения для экономии трафика, ALT-текст отображается непосредственно на странице. Четкое и информативное описание поможет пользователям быстро понять содержимое страницы, не будучи сбитыми с толку отсутствием изображения.
Google при оценке качества веб-страницы учитывает содержимое изображений, а ALT-атрибут является основным источником сигналов для понимания изображений. Правильное использование ALT-атрибута приносит множество преимуществ в SEO:
Улучшение позиций в поиске по картинкам — самое прямое преимущество. Когда пользователи ищут в поиске изображений Google "современный минималистичный дизайн гостиной", ваше изображение с точным ALT-описанием, таким как "гостиная в современном минималистичном стиле с серым тканевым диваном и мраморным журнальным столиком", имеет больше шансов появиться в результатах поиска, чем изображение с описанием "картинка гостиной".
Повышение релевантности темы страницы также имеет решающее значение. Предположим, вы написали статью "Анализ ингредиентов органической косметики", и изображения представляют собой различные растительные экстракты. Если ALT-описание гласит: "натуральные косметические ингредиенты, такие как алоэ вера, ромашка, масло чайного дерева", поисковые системы будут более уверены в высокой релевантности этого контента теме органической косметики, тем самым повышая общий вес страницы.
На техническом уровне SEO ALT-атрибут также может снизить показатель отказов, вызванный проблемами с загрузкой изображений. Когда пользователи посещают страницу и видят большие пустые области или поврежденные значки, они, как правило, немедленно уходят; значимый ALT-текст может хотя бы передать информацию, которую должно было передать изображение, и снизить отток пользователей.
Основной принцип написания ALT-атрибута — точность, краткость и естественность, чтобы помочь машинам понять изображение и избежать признаков чрезмерной оптимизации.
Описывайте фактическое содержимое изображения, а не маркетинговую информацию, которую вы хотите донести. Например, для изображения продукта правильным написанием будет "Черный кожаный деловой портфель с металлической застежкой и регулируемым ремнем", а не "Роскошный мужской портфель от премиум-бренда по специальной цене". Последний переполнен маркетинговыми терминами, не соответствует первоначальному смыслу ALT и может быть расценен поисковыми системами как попытка манипуляции.
Ограничение длины 125 символами — это практическое правило. Программы чтения с экрана обычно обрезают текст на этой длине, а слишком длинное описание может ухудшить слуховое восприятие. Если изображение содержит сложную информацию, вы можете кратко описать основное содержание в ALT, а затем дополнить детали в основном тексте или подписи к изображению (caption).
Естественно включайте ключевые слова, а не вставляйте их грубо. Если тема статьи — "уход за комнатными растениями", а на изображении показано растение эпипремнум золотистый, вы можете написать "эпипремнум золотистый в горшке для гидропоники, расположенный на подоконнике в гостиной для рассеянного света", естественно включив релевантные слова, такие как "эпипремнум", "гидропоника", "гостиная", но при этом читая как обычное описательное предложение.
Изображения декоративного характера можно оставить пустыми или опустить. Элементы, такие как разделители, фоновые текстуры, чисто декоративные значки и т. д., которые не несут существенного смысла, могут использовать пустой атрибут alt="", чтобы программы чтения с экрана не тратили время на чтение бессмысленного контента.
Избегайте избыточных слов, таких как "изображение", "фотография". ALT сам по себе указывает на то, что это альтернативный текст для изображения, поэтому написание "Это изображение..." является излишним, просто опишите содержимое.
Многие веб-сайты допускают несколько типичных ошибок на практике:
Полное отсутствие ALT-атрибута — самая серьезная проблема. Проверьте исходный код вашего веб-сайта; если вы видите тег без alt, такой как <img src="banner.jpg">, его необходимо немедленно дополнить. Даже если вы не можете придумать идеальное описание сразу, написание основного содержания лучше, чем ничего.
Прямое использование имен файлов так же плохо. alt="DSC_0234.jpg" или alt="product-image-final-v3" бесполезны как для пользователей, так и для поисковых систем и отражают небрежность в управлении контентом. Их следует заменить описательным текстом, например, "Шарф из вязаной шерсти ручной работы, темно-синий ромбовидный узор".
Нагромождение ключевых слов — признак чрезмерной оптимизации. Написание, такое как alt="Компания по SEO-оптимизации в Пекине, оптимизация веб-сайтов в Пекине, услуги по ранжированию ключевых слов в Пекине", нарушает принцип пользовательского опыта и будет наказано алгоритмами поисковых систем. Разумный вариант: "Команда SEO-специалистов обсуждает план оптимизации веб-сайта в офисе в Пекине".
Использование одного и того же ALT для всех изображений указывает на недостаток внимания. Если на нескольких изображениях на странице продукта написано "изображение продукта", это не поможет пользователям различать виды спереди, сбоку и детализированные снимки, а также заставит поисковую систему считать содержимое скудным и повторяющимся.
Интернет-магазины — главные бенефициары. Изображения продуктов являются ключевым фактором конверсии, точные ALT-описания не только привлекают трафик из поиска по картинкам, но и сохраняют информацию о продукте при сбоях загрузки изображений, сокращая потенциальные потери продаж. Для магазина, продающего украшения ручной работы, описание ALT: "Серебряное ожерелье с лунным камнем 925 пробы, огранка в форме капли, цепочка-змейка 16 дюймов" привлечет больше целевых пользователей, чем "изображение ожерелья".
Контентные медиа и блоги также полагаются на оптимизацию ALT. Изображения в новостных статьях, снимки этапов в обучающих статьях, сравнительные графики в обзорных статьях — все это требует четких ALT-описаний для повышения полноты контента. Если на этапах фотоурока ALT содержит лишь "Шаг 1", "Шаг 2", пользователи не смогут понять процесс, если изображения не загрузятся.
Корпоративные веб-сайты и брендовые сайты должны уделять внимание деталям. Фотографии команд, изображения офисных помещений, демонстрация продуктовых линеек и т. д. с помощью соответствующих ALT-описаний могут повысить профессиональный имидж и поддержать ранжирование по брендовым и бизнес-запросам.
Любая организация, заботящаяся о доступности, должна включить ALT-атрибут в свои стандарты контента. Государственные веб-сайты, образовательные учреждения, платформы здравоохранения и другие общественные службы несут юридическую и моральную ответственность за обеспечение равного доступа к информации для всех, и ALT-атрибут является основой для достижения этой цели.
ALT-атрибут, казалось бы, является технической деталью, но на самом деле он отражает уважение к пользователям и глубину понимания SEO. В эпоху, когда изображения стали основным компонентом веб-контента, игнорирование оптимизации ALT равносильно сознательному отказу от возможностей трафика и пользовательской базы. Начиная проверять изображения вашего веб-сайта и добавлять точные текстовые описания для каждого значимого изображения, это небольшое изменение принесет ощутимую отдачу в долгосрочной перспективе.