Alt текст изображений: что это такое и как его писать
Упростите доступ к вашему контенту как для роботов поисковых систем, так и для людей, использующих программы чтения с экрана c помощью атрибута Alt.
В этом руководстве вы узнаете об альтернативном тексте (alt text): что это такое, почему он важен для SEO, как его правильно использовать и многое другое!
Это очень практичное и точное руководство, содержащее советы и рекомендации, которые вы можете сразу же использовать, чтобы улучшить SEO -оптимизацию и доступность вашего веб-сайта.
Что такое Alt текст?
Alt текст (или альтернативный текст), также известный как атрибут alt или тег alt (что технически неверно, поскольку не является тегом), представляет собой просто фрагмент текста, описывающий изображение в коде HTML.
Каково использование замещающего текста?
Первая функция замещающего текста заключалась в том, чтобы просто описать изображение, которое нельзя было загрузить.
Много лет назад, когда Интернет был намного медленнее, замещающий текст помогал вам узнать содержание изображения, которое было слишком "тяжелым" для загрузки в браузере.
Сегодня изображения редко не загружаются, но если это происходит, то вместо изображения вы увидите альтернативный текст.
Теперь альтернативный текст также начал играть роль как для ботов поисковых систем, так и для людей, использующих программы чтения с экрана:
- Замещающий текст помогает людям с ограниченными возможностями (например, использующим программы чтения с экрана) узнать о содержимом изображения.
- Замещающий текст также помогает роботам поисковых систем понять содержание и контекст изображения.
Конечно, как и любой элемент SEO, им часто пренебрегают, а в некоторых случаях даже злоупотребляют.
Давайте теперь подробнее рассмотрим, почему Alt-текст важен.
Почему Alt текст важен
Интернет и веб-сайты — это очень визуальный опыт. Трудно найти сайт без изображений или графических элементов.
Вот почему альтернативный текст очень важен.
Alt текст помогает перевести содержимое изображения в слова, тем самым делая изображение доступным для более широкой аудитории, включая людей с ограниченными возможностями и роботов поисковых систем, которые еще недостаточно умны, чтобы полностью понять каждое изображение, его контекст и его значение.
Почему Alt текст важен для SEO
Альтернативный текст — важный элемент SEO-оптимизации на странице .
Правильная оптимизация альтернативного текста повышает шансы вашего сайта на ранжирование в поиске картинок Google.
Да, альтернативный текст является фактором ранжирования для поиска изображений Google.
В зависимости от ниши и специфики вашего веб-сайта трафик поиска картинок Google может сыграть огромную роль в общем успехе вашего веб-сайта.
Например, в случае веб-сайтов электронной коммерции пользователи очень часто начинают поиск продуктов с поиска изображений Google вместо того, чтобы вводить название продукта в стандартный поиск Google.
Google и другие поисковые системы могут отображать меньше изображений продуктов (или не отображать их вообще), если вы не позаботитесь об оптимизации их альтернативного текста.
Без надлежащей оптимизации изображений вы можете потерять много потенциального трафика и клиентов.
Почему Alt текст важен для доступности
Видимость в поиске изображений Google очень важна, но есть еще более важное соображение: доступность .
К счастью, в последние годы больше внимания уделялось доступности (т. е. доступность Интернета для всех, включая людей с ограниченными возможностями и/или использующих программы чтения с экрана).
Предположим, альтернативный текст ваших изображений на самом деле описывает их содержание, а не, например, ключевые слова. В этом случае вы помогаете людям, которые не видят это изображение, лучше понять его и содержание всей веб-страницы.
Допустим, одна из ваших веб-страниц представляет собой руководство по SEO-аудиту, содержащее скриншоты из различных инструментов сканирования.
Не лучше ли было бы описать содержание каждого скриншота вместо того, чтобы помещать один и тот же текст «SEO аудит» в каждое изображение?
Давайте рассмотрим несколько примеров.
Примеры Alt текста
Найти много хороших и плохих примеров альтернативного текста несложно. Позвольте мне показать вам несколько, придерживаясь приведенного выше примера с руководством по SEO-аудиту.
Хорошие примеры альтернативного текста
Итак, наш пример руководства по SEO содержит скриншоты из таких инструментов, как Google Search Console и Screaming Frog.
Некоторые хорошие примеры альтернативного текста могут включать:
<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">
Совет: Также неплохо позаботиться об имени вашего файла. Использование описательных имен файлов не является фактором ранжирования, но я рекомендую это как хорошую практику SEO.
Примеры плохого и/или спам-замещающего текста
Существует множество примеров неправильного использования alt текста, включая наполнение ключевыми словами или спам.
Вот как вы можете превратить приведенные выше хорошие примеры в плохие:
<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 тексте
Добавление ключевых слов в альтернативный текст — не единственная ошибка, которую вы можете совершить.
Вот несколько примеров распространенных ошибок в альтернативном тексте:
- Неиспользование замещающего текста или использование пустого замещающего текста.
- Использование одного и того же альтернативного текста для разных изображений.
- Использование очень общего альтернативного текста , который на самом деле не описывает изображение. Например, использовать альтернативный текст «собака» на фото собаки вместо более подробного описания собаки, ее окраса, чем она занимается, какой она породы и т. д.
- Автоматическое использование имени файла в качестве замещающего текста , что может привести к очень недружественному замещающему тексту, такому как «googleseachconsole», «google-search-console» или «photo2323», в зависимости от имени файла.
Советы по написанию альтернативного текста
И, наконец, вот советы о том, как написать правильный замещающий текст, чтобы он действительно выполнял свою задачу:
- Не добавляйте ключевые слова в альтернативный текст . Это не поможет ранжированию вашей веб-страницы по этим набитым ключевым словам.
- Подробно опишите изображение, но при этом сделайте его относительно кратким . Избегайте добавления нескольких предложений в альтернативный текст.
- Используйте целевые ключевые слова, но естественным образом, как часть описания изображения . Если ваше целевое ключевое слово не подходит под описание изображения, не используйте его.
- Не используйте текст на изображениях . Весь текст должен быть добавлен в виде HTML-кода.
- Не пишите «это изображение». Google и пользователи знают, что это изображение. Просто опишите его содержание.
- Убедитесь, что вы можете визуализировать содержимое изображения, просто прочитав его замещающий текст. Это лучшее упражнение, чтобы убедиться, что ваш альтернативный текст в порядке.
Как проверить, использует ли страница альтернативный текст
Теперь вы знаете все лучшие практики и распространенные ошибки alt текста. Но как на самом деле проверить, что находится в замещающем тексте изображений веб-сайта?
Альтернативный текст можно анализировать следующими способами:
Проверка элемента (щелкните правой кнопкой мыши и выберите «Посмотреть код». Затем нажмите Ctrl+Shift+C и наведите курсор на изображение) — хороший способ проверить, есть ли у данного изображения замещающий текст .
Однако, если вы хотите проверить это массово, я рекомендую один из следующих двух методов.
Установите расширение для веб-разработчика Chrome .
Затем откройте страницу, изображения которой вы хотите проверить.
Нажмите « Веб-разработчик » и перейдите к «Изображения » > «Показать alt атрибуты ». Таким образом, вы можете увидеть содержимое замещающего текста всех изображений на данной веб-странице.
Чтобы проверить альтернативный текст изображений всего веб-сайта, используйте поисковый робот, такой как Screaming Frog или Sitebulb .
Просканируйте сайт, перейдите к отчету об изображениях и просмотрите замещающий текст всех изображений веб-сайта.
