Как прописать атрибут alt для картинок

Упростите доступ к вашему контенту для роботов ПС и для людей. В этой статье вы узнаете об альтернативном тексте (alt): что это такое, почему он важен. Используйте данные советы и рекомендации, чтобы улучшить SEO-оптимизацию и доступность вашего веб-сайта.

🪶 Что такое alt
🪶 Каково использование alt
🪶 Почему alt важен для SEO
🪶 Примеры alt
🪶 Советы по написанию alt
🪶 Синтаксис атрибута альт
🪶 Как проверить, используется ли alt

Что такое alt

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

Каково использование alt

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

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

  • Alt помогает людям с ограниченными возможностями (например, использующим программы чтения с экрана) узнать о содержимом изображения.
  • Alt также помогает роботам поисковых систем понять содержание и контекст изображения.

Почему alt важен

Интернет и веб-сайты — это очень визуальный опыт. Трудно найти сайт без изображений или графических элементов.

Вот почему альтернативный текст очень важен.

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

Почему alt важен для SEO

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

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

Примеры alt

Найти много хороших и плохих примеров альтернативного текста несложно.

Хорошие примеры альтернативного текста

Некоторые хорошие примеры альтернативного текста могут включать:

<img src="google-search-console-coverage-report.jpg" alt="Отчет о покрытии в Google Search Console, показывающий количество проиндексированных и исключенных страниц">
<img src="google-search-console.jpg" alt="Инструмент Google Search Console от Google">
<img src="screaming-frog-html-pages.jpg" alt="Список HTML-страниц в Screaming Frog">
<img src="screaming-frog" alt="Идет сканирование Screaming Frog">

Примеры плохого и/или спам-замещающего текста

Я также видела много примеров неправильного использования альтернативного текста, включая наполнение ключевыми словами или спам. Вот как вы можете превратить приведенные выше хорошие примеры в плохие:

<img src="google-search-console-coverage-report.jpg"alt="аудит поисковой оптимизации бесплатно, аудит дешевой поисковой оптимизации, специалист по аудиту поисковой оптимизации, аудит поисковой оптимизации, аудит поисковой оптимизации">
<img src="google-search-console.jpg" alt="google seo, google, google, seo, google search console seo">
<img src=”screaming-frog-html-pages.jpg” alt=”сео-аудит, сео-аудит, сео-аудит”>
<img src="screaming-frog" alt="seo-аудит">

Как видите, приведенные выше примеры на самом деле не дают никакой информации о том, что на самом деле показывают изображения. Вы также можете найти примеры и еще больше советов по оптимизации изображений в Google Search Central.

Распространенные ошибки в alt

Добавление ключевых слов в альтернативный текст — не единственная ошибка, которую можно совершить. Вот несколько примеров распространенных ошибок в альтернативном тексте:

  • Неиспользование alt или использование пустого замещающего текста.
  • Использование одного и того же alt для разных изображений.
  • Использование очень общего alt, который на самом деле не описывает изображение. Например, использовать альтернативный текст «собака» на фото собаки вместо более подробного описания собаки, ее окраса, чем она занимается, какой она породы и т. д.
  • Использование имени файла в качестве alt, что может привести к очень недружественному замещающему тексту, такому как «photo5113», в зависимости от имени файла.

Советы по написанию alt

И, наконец, вот советы о том, как написать правильный alt, чтобы он действительно выполнял свою задачу:

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

Синтаксис

<img src=»URL» alt=»альтернативный текст»>

Как проверить, используется ли alt

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

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

Проверка alt у изображения

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


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