Обсудить проект

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

Руководство оптимизации для SEO

Сегодня почти 19% результатов выдачи Google (SERP) содержат изображения. Это значит, что даже при самых лучших усилиях по SEO вы можете упустить другой источник органического трафика: изображения на вашем сайте.

Как же получить этот трафик? Ответ — текст alt для изображений. В этой статье мы рассмотрим, как написать текст alt, чтобы ваши изображения занимали высокие позиции в поисковой выдаче и привлекали трафик.

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

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

Почему текст alt для изображений важен

Текст alt для изображений важен по трем причинам: доступность, пользовательский опыт и трафик изображений. Понимание этих причин поможет вам написать эффективный текст alt для всех ваших изображений.

Доступность

В 1999 году W3C опубликовал свои Рекомендации по доступности веб-контента 1.0, чтобы объяснить, как сделать контент более доступным для пользователей с ограниченными возможностями. Одним из этих руководств было «Предоставление эквивалентных альтернатив аудио- и визуальному контенту». Это означало, что любая веб-страница с изображениями должна включать эквивалентную информацию к своим визуальным материалам.

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

Например, на веб-странице есть изображение стрелки вверх, которая ведет к содержанию. Текстовый эквивалент может быть «Перейти к содержанию». Это позволит пользователю с программой чтения с экрана понять назначение изображения, не видя его. Другими словами, текст alt помогает сделать ваш визуальный контент доступным для всех пользователей, независимо от их зрительных возможностей.

Пользовательский опыт

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

Например, пользователь на вашем сайте может видеть изображение слева. Если он не может его увидеть по какой-либо причине, он услышит или увидит текст alt справа. Это поможет обеспечить лучший пользовательский опыт, чем если бы текста alt не было.

Трафик изображений

Еще одна важная функция текста alt — это вывод ваших изображений в результатах поиска, будь то Google Images или в виде блоков изображений. Блоки изображений – это специальные результаты, отображаемые в виде горизонтального ряда ссылок на изображения, которые могут появляться в любой органической позиции.

Это может привести к тысячам новых посетителей, по крайней мере, так было в случае HubSpot. Начиная с 2018 года, команда HubSpot Blog внедрила новую SEO-стратегию, которая, в частности, была направлена ​​на более интенсивную оптимизацию текста alt для изображений. Это помогло увеличить трафик изображений блога на 779% менее чем за год, что привело к 160 000 новых органических просмотров. Вы можете узнать больше об успехе команды в этом посте блога.

Как добавить текст alt к изображениям

В большинстве систем управления контентом (CMS) щелчок по изображению в тексте блога приводит к появлению модуля оптимизации изображения или форматированного текста, где вы можете создавать и изменять текст alt изображения.

Как добавить текст alt в HubSpot CMS

В HubSpot, после того как вы щелкнули по изображению и щелкнули по значку редактирования (который выглядит как карандаш), появится всплывающее окно оптимизации изображения. В этом окне оптимизации изображения в Content Hub в вашем портале HubSpot вы можете добавить текст alt.

Как добавить текст alt в WordPress CMS

В WordPress щелчок по изображению автоматически откроет вкладку "Блок" на боковой панели. В разделе "Настройки изображения" добавьте текст alt в пустое поле.

Самое важное правило текста alt

Будьте описательными и конкретными. Однако имейте в виду, что это правило может потерять свою ценность, если ваш текст alt не учитывает контекст изображения. Текст alt может быть неверным тремя различными способами.

3 примера текста alt для изображений (хорошие и плохие)

Ключевые слова против деталей

Плохой текст alt:

alt="Офис HubSpot в Сингапуре, входящий в маркетинг, настенные росписи, оранжевые стены, отправка"

Что не так с этой строкой текста alt? Слишком много ссылок на HubSpot. Использование текста alt для вставки ключевых слов в фрагментированные предложения добавляет слишком много "пуха" к изображению и недостаточно контекста. Эти ключевые слова могут быть важны для издателя, но не для веб-краулеров. Фактически, текст alt выше затрудняет для Google понимание того, как изображение связано с остальной частью веб-страницы или статьи, на которой оно опубликовано, что не позволяет изображению ранжироваться по соответствующим длинным ключевым словам, которые вызывают больший интерес. Хуже того, Google выдает штрафы за набивание ключевыми словами.

Хороший текст alt:

alt="Оранжевая настенная роспись с надписью 'отправить' на стене офиса HubSpot в Сингапуре"

Детали против специфики

Плохой текст alt:

alt="Бейсболист бьет по мячу на бейсбольном поле"

Строка текста alt выше технически соответствует первому правилу текста alt – быть описательным, но она не является описательной в правильном направлении. Да, изображение выше показывает бейсбольное поле и игрока, бьющего по бейсбольному мячу. Но это также фотография Фенуэй Парк – и бейсболиста Red Sox под номером 34 Дэвида Ортиса, который бьет по мячу за пределы правого поля. Это важные детали, которые Google должен знать, чтобы правильно индексировать изображение, если оно находится, например, в блоге о бостонском спорте.

Хороший текст alt:

alt="Дэвид Ортис из Boston Red Sox бьет по мячу с домашней базы на Фенуэй Парк"

Специфика против контекста

Например, ваше изображение не имеет официального контекста (например, названия места), по которому его можно описать? В этом случае вам нужно использовать тему статьи или веб-страницы, на которой вы публикуете изображение.

Вот несколько плохих и хороших примеров текста alt в зависимости от того, почему вы его публикуете:

Для статьи о поступлении в бизнес-школу

Плохой текст alt:

alt="Женщина указывает на экран компьютера"

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

Хороший текст alt:

alt="Преподаватель бизнес-школы указывает на экран компьютера студента"

Для веб-страницы об образовательном программном обеспечении для преподавателей бизнес-школ

Плохой текст alt:

alt="Учитель указывает на экран компьютера студента"

Строка текста alt выше почти так же описательна и специфична, как хороший текст alt из предыдущего примера, так почему же она не подходит для веб-страницы об образовательном программном обеспечении? Этот пример еще глубже погружается в тему бизнес-школы и уточняет, что идеальная аудитория для этой веб-страницы — это преподаватели. Следовательно, текст alt изображения должен отражать это.

Хороший текст alt:

alt="Преподаватель использует образовательное программное обеспечение для обучения студента бизнес-школы"

Лучшие практики для текста alt

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

  • Опишите изображение, будьте конкретны. Используйте как предмет изображения, так и контекст, чтобы направлять вас.
  • Добавьте контекст, который относится к теме страницы. Если изображение не содержит узнаваемого места или человека, добавьте контекст на основе контента страницы. Например, текст alt для стокового изображения человека, печатающего на компьютере, может быть «Женщина оптимизирует сайт WordPress для SEO» или "Женщина ищет бесплатные платформы для ведения блога" в зависимости от темы веб-страницы.
  • Сделайте текст alt короче 125 символов. Программы чтения с экрана обычно прекращают чтение текста alt в этом месте, обрывая длинные тексты alt в неудобные моменты при озвучивании этого описания для людей с нарушениями зрения.
  • Не начинайте текст alt с «изображение...» или «картинка...». Сразу переходите к описанию изображения. Программы чтения с экрана (и Google, кстати) определят его как изображение из исходного кода HTML статьи.
  • Используйте свои ключевые слова, но экономно. Включайте целевое ключевое слово вашей статьи только в том случае, если его легко включить в текст alt. Если нет, рассмотрите семантические ключевые слова или просто самые важные термины в длинном ключевом слове. Например, если основное ключевое слово вашей статьи – «как генерировать лиды», вы можете использовать "генерация лидов" в своем тексте alt, так как "как" может быть трудно естественным образом включить в текст alt для изображения.
  • Не вставляйте свое ключевое слово в текст alt каждого изображения. Если в вашем посте в блоге есть серия изображений в тексте, включите свое ключевое слово хотя бы в одно из этих изображений. Определите изображение, которое, по вашему мнению, наиболее точно отражает вашу тему, и назначьте ему свое ключевое слово. В остальном медиафайле придерживайтесь более эстетических описаний.
  • Проверьте на наличие орфографических ошибок. Ошибки в тексте alt изображения могут ухудшить пользовательский опыт или сбить с толку поисковые системы, сканирующие ваш сайт. Вы должны проверять текст alt так же, как и любой другой контент на странице.
  • Не добавляйте текст alt к каждому изображению. Вы должны добавить текст alt к большинству изображений на веб-странице ради SEO, UX и доступности – однако есть исключения. Например, изображения, которые являются чисто декоративными или описаны в тексте рядом с ними, должны иметь пустой атрибут alt. Для более подробного разбора того, когда добавлять текст alt, а когда нет, ознакомьтесь с этим деревом решений.

Как текст alt влияет на SEO

По словам Google, текст alt используется — в сочетании с алгоритмами машинного зрения и содержимым страницы – для понимания темы изображений. Следовательно, текст alt помогает Google лучше понять не только то, о чем изображения, но и о чем веб-страница в целом. Это может увеличить шансы появления ваших изображений в результатах поиска изображений.

С запуском Google Search Generative Experience (SGE), высококачественный и контекстуальный текст alt гарантирует, что ваш контент включен в новый AI-powered снимок ключевой информации. Например, Google отмечает, что его SGE может обеспечить людям комплексный опыт покупок с достойными вариантами, описанием товара, ценами и изображениями в одном снимке. Если ваши изображения товаров имеют описательный и конкретный текст alt, вы даете поисковым системам контекст, чтобы знать, когда показывать ваш продукт как высококачественный выбор в результатах поиска.

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

Поскольку у этого изображения оптимизирован текст alt, оно отображается в результатах поиска изображений по длинному ключевому слову "как удалить дубликаты в Excel". Поскольку пост также появляется в результатах веб-поиска по тому же ключевому слову, посетители могут попасть на пост в блоге по этим двум каналам.

Добавление текста alt для изображений на ваш сайт

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

 

В работе с клиентом мы ценим равные партнерские отношения, умеем слушать и слышать. В разделе Наш подход я подробно рассказываю, кому комфортно с нами работать и почему — заходите почитать.
Игорь Яньшин, директор агентства
Игорь Яньшин,
директор агентства
Вернуться к статьям

может быть интересно

SEO-оптимизированный дизайн сайта: почему он так важен для вашего бизнеса

Как создать эффективный сайт, оптимизированный под поисковые запросы

Продвижение сайтов
Стоит ли использовать ИИ в SEO

Стоит ли рисковать качеством и оригинальностью?

Продвижение сайтов
Как управлять поисковой оптимизацией во время миграции сайта

Советы по планированию, переносу данных и выбору инструментов для миграции, чтобы минимизировать потери и обеспечить плавный переход.

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