Что такое альтернативный текст для изображений веб-сайта?

Вступление

Создание отличных изображений в контенте вашего веб-сайта жизненно важно для успешного присутствия в Интернете. Однако качественных изображений недостаточно, чтобы гарантировать, что ваша страница будет приносить ожидаемый трафик, продажи и потенциальных клиентов. Благодаря редизайну Google пользовательского интерфейса поиска изображений вам необходимо оптимизировать свои фотографии для достижения наилучших результатов SEO. Следовательно, поисковые системы легко их поймут, что повысит видимость вашего сайта для вашей целевой аудитории. Было бы полезно, если бы вы использовали альтернативный текст на своих изображениях, чтобы добиться лучших результатов в поисковой выдаче.

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

ФАКТ : изображения возвращаются для 22,6% поисковых запросов в Google. Более того, 62% потребителей поколения Z и миллениалов хотят визуального поиска больше, чем любой другой новой технологии.

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

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

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

Лучшие практики альтернативного текста

При написании замещающего текста для ваших изображений вам необходимо придерживаться некоторых рекомендаций, описанных ниже;

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

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

Если вам трудно определить высокорелевантные и прибыльные ключевые слова для использования, генератор альтернативного текста может вам очень помочь. Это поможет вам узнать правильные термины для использования, которые оптимизируют ваши альтернативные описания для ваших изображений. Однако обратите внимание, что вам следует избегать заполнения атрибутов alt всеми сгенерированными ключевыми словами. Это приведет к плохо обработанному альтернативному тексту, который может быть оштрафован Google. Например, на изображении ниже вы заметите, что хороший пример замещающего текста легко объясняет изображение. Тем не менее, нижний пример не очень хорошо объясняет, о чем фотография:

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

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

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

Например, альтернативный текст ниже слишком длинный для описания двух собак;

• Alt = серая собака слева и черная собака с длинными ушами справа лежат на диване с желтым покрывалом

Отличное альтернативное описание будет следующим:

• Alt = серо-черная собака лежит на диване

Кроме того, избегайте некоторых описаний, которые были бы слишком короткими, чтобы они не раскрывали краткое значение, например;

• Alt = две собаки

Проверьте свое SEO за 60 секунд!

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

• Простой в использовании автоматизированный SEO-инструмент
• Мониторинг ключевых слов и обратных ссылок + идеи
• Скорость, безопасность, + отслеживание основных показателей жизнедеятельности

• Разумно предлагает идеи по улучшению SEO
• Более 250 000 тысяч участников со всего мира
• Встроенный бенчмаркинг и анализ конкурентов

Например, «www.diib.com»

Бесплатная регистрация

Используется более чем 250 тысячами компаний и организаций:

• 
• 
• 
• 

Синхронизируется с

Быть конкретными

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

Например, если вы хотите показать изображение собак, играющих в парке, вы можете сделать это следующим образом;

• Alt = самец и самка черных немецких овчарок, играющих в парке.

Описание дает четкое и точное представление о том, что изображено на картинке.

С другой стороны, было бы неправильно писать это следующим образом;

• Alt = собаки играют на траве

Избегайте написания альтернативного текста только для SEO

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

Цитата: «По оценкам, общее количество людей, живущих с потерей зрения (2021 г.) в Великобритании, составляет 2 140 000 человек» (Инструмент данных о потере данных, RNIB, 2021 г.)

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

Не оставляйте кнопки формы

Если у вас есть форма на вашем сайте, которая использует изображение в качестве кнопки «отправить», было бы лучше дать ему альтернативный текст. Кнопка изображения должна иметь альтернативное описание, описывающее ее функцию, например, «подать заявку сейчас», «поиск», «зарегистрироваться» и многие другие.

Не указывайте дополнительные характеристики

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

Не забудьте использовать longdesc

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

Избегайте использования изображений в качестве текста

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

Как работает альтернативный текст

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

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

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

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

Если вы используете функцию проверки браузера, вы увидите HTML-код. Например, при использовании Chrome щелкните фотографию на веб-странице и коснитесь функций проверки в раскрывающемся меню. Затем вы увидите окно с HTML-тегом сайта, показывающим «alt =, за которым следует альтернативное описание».

Вот иллюстрация того, как добавить замещающий текст на разных платформах;

· Вордпресс

При использовании WordPress процесс прост. Перейдите в окно редактора и коснитесь изображения. Вы увидите поле в настройках изображения для вашего «альтернативного текста (альтернативного текста)», чтобы создать или внести изменения в ваше альтернативное описание.

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

(Изображение предоставлено: wpbeginner)

· Викс

Wix также активизировал свои усилия, чтобы сделать платформу более дружественной к SEO. Теперь вы можете добавлять альтернативные описания к фотографиям в их магазине и вносить необходимые изменения.

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

(Изображение предоставлено wix.com)

· Мадженто

Magento — еще одна платформа, предлагающая простую процедуру добавления атрибута alt.

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

(Изображение предоставлено Magento)

· Магазин

Использование Shopify позволяет добавлять атрибут alt как к изображениям продукта, так и к изображениям темы.

Если вы хотите оптимизировать альтернативное описание на фотографиях продуктов, перейдите в раздел «Продукты», затем нажмите на список товаров, который вы хотите отредактировать. На странице сведений об элементе коснитесь элемента мультимедиа и найдите страницу предварительного просмотра мультимедиа. Затем добавьте свой альтернативный текст. Например:

(Изображение предоставлено: все чаще)

При добавлении атрибута alt к изображениям вашей темы перейдите в раздел «Интернет-магазин» и найдите «темы», затем нажмите, чтобы настроить тему вашего магазина. С левой стороны вы увидите раздел меню, где вы нажимаете на блоки изображений и отдельные фотографии. Затем вы увидите текстовое поле, где вы можете отредактировать или добавить альтернативное описание.

Почему альтернативный текст необходим для хорошего SEO?

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

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

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

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

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

ФАКТЫ :

• Дэн Морган из WebSpection вывел одну из своих фотографий на первое место в Google Images в категории «лучший человек в Кардиффе» менее чем за четыре дня, оптимизировав свое изображение.
• И Робби Ричардс сгенерировал 150 732 посещения, добавив теги alt к изображениям, сжав изображения и несколько других приемов SEO.

— Журнал поисковой системы

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

• Чтобы улучшить доступность: обратите внимание, что большинство искателей обычно слабовидящие; таким образом, они используют программы чтения с экрана при просмотре онлайн-контента. Предполагается, что альтернативные описания описывают различные изображения на вашей странице для посетителей, которые их не видят. Если вы не используете атрибуты замещающего текста в своих изображениях, пользователи не смогут понять содержание вашей страницы. Программа чтения с экрана пропускает такие фотографии или даже читает длинные и бесполезные имена файлов.
• Чтобы повысить релевантность темы: чтобы Google мог понять содержание вашей страницы, он анализирует различные используемые термины. С другой стороны, когда вы включаете изображения на свой сайт, поисковые системы не могут понять их назначение. Поэтому вам необходимо иметь атрибут alt, так как контекст может быть «заблокирован» в изображениях.
• Чтобы помочь вам ранжироваться в Google Images: использование замещающего текста также помогает вашей странице занять более высокое место в поисковой системе изображений Google. Кроме того, люди все чаще ставят его выше других платформ, таких как Bing и YouTube, при поиске фотографий.
• Для использования в качестве якорных текстов для ссылок на изображения: на многих сайтах якорные тексты связывают одну страницу с другой. Поисковые системы используют их, чтобы узнать больше о вашем сайте и о том, что он влечет за собой. Вы также можете использовать атрибуты alt для той же цели.
• Когда изображение должно иметь нулевой замещающий текст : рекомендуется всегда включать атрибут alt в изображения для лучшего ранжирования в поисковых системах. В то же время вы можете спросить, когда изображение должно иметь нулевой замещающий текст.

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

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

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

Мы надеемся, что вы нашли эту статью полезной.

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

Введите свой веб-сайт

Например, «www.diib.com»

Бесплатная регистрация

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

Ник Колебэтч
Поставка крышки RV

Как найти и исправить проблемы с замещающим текстом

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

Найдите самые посещаемые страницы

Во-первых, начните с тщательной проверки, чтобы узнать, какие страницы чаще всего посещает ваша аудитория. Вы можете просматривать различные платформы, такие как Google Search Console, Google Analytics или отчет на «популярных страницах» в обозревателе сайта Ahrefs.

Аудит ваших альтернативных описаний

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

Всякий раз, когда вы переворачиваете фотографию, вы увидите альтернативное описание, отображаемое на платформе. Если атрибут alt отсутствует, должно отображаться предупреждение «Отсутствует альтернативный текст».

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

Повторите для других страниц

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

Diib: Предоставление статистики и мониторинга альтернативного текста!

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

• Пользовательские оповещения, которые информируют вас о состоянии вашего веб-сайта и любых изменениях в алгоритмах Google, которые могут повлиять на ваши модели трафика.
• Цели с индивидуальными предложениями о том, как улучшить здоровье вашего сайта и органический трафик.
• Понимание не только вашего собственного альтернативного текста, но и ваших ключевых конкурентов.
• Синхронизируйте свой профиль Facebook, чтобы получить представление о специфике вашей кампании в социальных сетях. Такие вещи, как эффективность отдельных публикаций, демографические данные пользователей, лучшее время суток для публикации и конверсии.
• Проведите ежемесячную совместную сессию с экспертом по развитию Diib, который поможет вам настроить ваши усилия по SEO и направит вас к росту и успеху Shopify.

Позвоните сегодня по телефону 800-303-3510 или нажмите здесь, чтобы получить бесплатное сканирование веб-сайта 60 и узнать больше о ваших сильных и слабых сторонах SEO.