Когда вы создаете веб-сайт, без изображений никак. Они помогают обеспечить дополнительный контекст для содержимого страницы, разбить текст, добавить визуальную привлекательность страницам и многое другое.
Но неоптимизированное изображение полезно только тем, кто его видит. А что будет, когда на ваш сайт зайдет человек с ослабленным зрением, или когда боты 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 это может быть еще проще.
Источник
Загрузка...
