Что это такое, как это написать и почему это важно для SEO

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

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

Оглавление

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

Почему важен замещающий текст изображения?

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

Доступность

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

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

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

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

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

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

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

Источник изображения

Графический трафик

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

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

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

Как добавить замещающий текст к вашим изображениям

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

Давайте рассмотрим следующие шаги для CMS Hub и WordPress ниже.

Как добавить замещающий текст в CMS HubSpot

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

Вот как это окно оптимизации изображения выглядит в CMS внутри вашего портала HubSpot:

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

Как добавить замещающий текст в CMS WordPress

В WordPress нажатие на изображение автоматически открывает вкладку «Блок» на боковой панели. В разделе «Настройки изображения» добавьте альтернативный текст в пустое поле.

Когда будете готовы, нажмите «Обновить» на панели инструментов в верхней части экрана.

Самое важное правило альтернативного текста? Будьте описательными и конкретными. Имейте в виду, однако, что это правило замещающего текста может потерять свою ценность, если ваш замещающий текст также не учитывает контекст изображения. Альтернативный текст может не попасть в цель тремя разными способами. Рассмотрим примеры ниже.

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

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

Плохой альтернативный текст

alt="HubSpot office wall Singapore inbound marketing workplace murals orange walls ship it"

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

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

Что еще хуже, Google наказывает за наполнение ключевыми словами.

Хороший альтернативный текст

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

alt="Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"

2. Детализация против конкретики

Источник изображения

Плохой альтернативный текст

alt="Baseball player hitting a ball at a baseball field"

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

Хороший альтернативный текст

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

alt="David Ortiz of the Boston Red Sox batting from home plate at Fenway Park"

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

Источник изображения

Оба изображения выше имеют четкий контекст, который может помочь нам написать хороший альтернативный текст — одно из офиса HubSpot, а другое — Fenway Park. Но что, если ваше изображение не имеет официального контекста (например, географического названия), с помощью которого можно было бы его описать?

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

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

Плохой альтернативный текст

alt="Woman pointing to a person's computer screen"

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

Хороший альтернативный текст

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

alt="Business school professor pointing to a student's computer screen"

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

Плохой альтернативный текст

alt="Teacher pointing to a student's computer screen"

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

Хороший альтернативный текст

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

alt="Professor using education software to instruct a business school student"

Рекомендации по альтернативному тексту изображения

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

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

Как альтернативный текст влияет на SEO

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

Таким образом, замещающий текст помогает Google лучше понять не только то, о чем изображения, но и то, о чем веб-страница в целом. Это может увеличить шансы появления ваших изображений в результатах поиска изображений.

С развертыванием Google Search Generative Experience (SGE) высококачественный и контекстный замещающий текст гарантирует, что ваш контент будет в сочетании с новым моментальным снимком ключевой информации на основе искусственного интеллекта.

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

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

Например, посетитель, который ищет, как удалить дубликаты в Excel, может предпочесть снимок экрана, чтобы с первого взгляда понять, как выполнить задачу.

Источник изображения

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

Добавление замещающего текста изображения на ваш сайт

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

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

Примечание редактора: этот пост был первоначально опубликован в сентябре 2018 года и был обновлен для полноты информации.