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

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

Есть три основных использования добавления альтернативного текста к элементу изображения:

  • В помощь слабовидящим пользователям
  • Отображается в несовместимых браузерах
  • Помощь поисковым роботам

Для слабовидящих пользователей

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

Для несовместимых браузеров

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

Замещающий текст в несовместимом изображении

Для поисковых роботов

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

Синтаксис

Атрибут Alt используется как часть HTML-тега изображения при добавлении изображений на веб-страницу. Ниже приведен синтаксис использования тега с атрибутом alt:

<img src="https://www.webnots.com/what-is-alt-text-and-how-to-add-alt-text-to-images/image URL" alt="short image description">

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

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

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

Замещающий текст для изображения Weebly

Замещающий текст для изображения Weebly

На собственной платформе WordPress при загрузке изображения есть опции для добавления заголовка, подписи, описания и альтернативного текста.

Добавление замещающего текста в WordPress

Добавление замещающего текста в WordPress

Рекомендации для замещающего текста

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

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

1. Фактическое название изображения никак не влияет на SEO и пользовательский опыт.

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

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

1

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *