Полезное

Что такое тег ALT, и почему нужно его использовать?

Автор Freelance.Today

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

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

Но что такое альтернативный текст и чем он может помочь вашему сайту? Мы ответим на оба эти вопроса ниже, а также расскажем, как настроить тег ALT.

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

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

Цель тега alt — передать содержимое изображения. Например, если вы занимаетесь ремонтом домов, вы можете использовать изображение поврежденного дома. Возможный альтернативный тег для этого изображения мог бы сказать что-то вроде «дом, поврежденный упавшим деревом».

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

  • Наполнять свои alt-теги ключевыми словами (например, «удочка, леска, удочка»).
  • Упрощать (например, «шляпа»)
  • Написать «изображение» (например, «изображение синей птицы на столбе»).

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

Каковы преимущества использования альтернативных тегов?

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

1. Повышение рейтинга

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

Чтобы Google оценил страницу, он сканирует ее и добавляет в свой поисковый индекс. Когда пауки Google сканируют страницу, они стараются понять контекст. 

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

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

2. Изображения Google

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

Если на вашем сайте есть неоптимизированное изображение, Google может не знать, что на нем показано. В результате оно не будет отображаться ни в каких результатах поиска изображений Google.

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

3. Доступность изображений

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

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

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

Как создавать альтернативные теги?

Создание тегов alt — простой процесс. Все, что вам нужно сделать, это вставить короткий фрагмент кода в код вашего сайта.

Если вы работаете через систему управления контентом (CMS), вам, возможно, даже не придется углубляться в сам код — многие CMS просто позволят вам щелкнуть изображение, а затем ввести тег alt в специальное поле. 

Однако даже если это не так, добавить тег alt в код — простая задача.

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

<img src = ”exampleimage.png”>

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

alt = «пример описания»

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

<img src = «bookshelfproject» alt = «Новая книжная полка ручной работы»>

Вот и все! Если вы помните формат фрагмента кода, легко добавить теги alt ко всем вашим изображениям — а в зависимости от вашей CMS это может быть еще проще.

Источник

 
  • 1656