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

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

Чтобы использовать их правильно, важно сначала понять, что такое alt-теги. В этом посте мы обсудим, что такое alt-теги и почему они используются. Мы также объясним, как добавлять alt-теги к изображениям в WordPress, и познакомим с некоторыми лучшими практиками для этого.

Давайте начнем!

Подпишитесь на наш канал Youtube

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

Теги Alt добавляются к изображениям в HTML для описания их содержимого и контекста на веб-странице. Тег alt также появляется в контейнере изображения, когда файл мультимедиа не может загружаться или отображаться должным образом:

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

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

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

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

Зачем использовать альтернативные теги для изображений?

Альтернативные теги служат нескольким целям. Хотя вам не обязательно их использовать, это дает некоторые важные преимущества. Поскольку они используются как сканерами поисковых систем, так и инструментами чтения с экрана, они являются важным компонентом веб-доступности и поисковой оптимизации (SEO).

Они улучшают доступность Интернета

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

Если тег alt отсутствует, программа чтения с экрана может вместо этого прочитать имя файла изображения. Обычно это не только неэффективно для правильного объяснения изображения, но также может сбивать с толку и мешать работе, особенно если имя файла не оптимизировано для SEO.

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

Они могут повысить ваш рейтинг в поисковых системах

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

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

Чтобы подчеркнуть важную роль, которую изображения (и, в свою очередь, теги alt) играют в SEO, рассмотрите страницу результатов поисковой системы (SERP) для «постельного белья королевского размера»:

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

Как добавить альтернативный тег изображения в WordPress

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

Чтобы добавить тег alt изображения в WordPress, войдите в свою панель администратора и перейдите на страницу или сообщение, на которое вы хотите добавить свое изображение. В редакторе WordPress щелкните значок плюса и выберите блок изображения :

Затем загрузите свое изображение или выберите его из своей медиабиблиотеки. После того, как вы вставите изображение в блок, на боковой панели справа откроется панель настроек изображения . Вы можете ввести свое описание в текстовое поле Alt :

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

Как добавить альтернативный тег изображения в HTML

Когда вы используете WordPress или другую CMS, которая включает модуль для добавления и редактирования тегов alt, он автоматически добавит HTML-код за вас. Однако, если вы хотите добавить код самостоятельно, вы можете сделать это легко.

Чтобы добавить HTML-тег alt в WordPress, щелкните соответствующий блок изображения . На панели инструментов блока нажмите кнопку с тремя вертикальными точками и выберите Редактировать как HTML :

Код HTML отобразит тег изображения. Вы заметите, что атрибут alt пуст. Поместите текст в кавычки:

Когда вы закончите, нажмите кнопку « Предварительный просмотр» , чтобы вернуться в визуальный редактор, а затем сохраните изменения. Вы можете использовать тот же синтаксис и формат для редактирования HTML-тега изображения любого файла.

Советы и рекомендации по написанию альтернативных тегов изображений

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

• Будьте конкретны и описательны. Назначение тегов alt - описать изображение, поэтому вы хотите быть как можно более конкретным. Если вы не уверены, достаточно ли вашего описания, подумайте, какое изображение вы бы визуализировали, если бы увидели только эту строку текста.
• Держать его коротким. Хотя вы хотите быть подробным, вам также не нужно делать свой тег alt длинным абзацем (или даже полным предложением). Стремитесь к максимуму от 100 до 125 символов.
• Не будьте лишними. Чтобы максимально использовать свой alt-тег, вы не хотите включать ненужные слова. Это включает добавление «Изображение» или «Изображение» перед описанием. Эти элементы не нужны, потому что они уже подразумеваются.
• Естественным образом используйте релевантные ключевые слова . Рассмотрите свои целевые ключевые слова и, по возможности, органически включите их в контекст страницы. Это проще, если вы используете релевантные изображения, которые соответствуют тексту.
• Избегайте переполнения ключевыми словами. Хотя использование ключевых слов в ваших тегах alt может улучшить SEO, будьте осторожны, не переусердствуйте. Наполнение ключевыми словами может нанести вред вашему SEO и ухудшить пользовательский опыт.
• Не используйте изображения вместо текста. Основная цель тега alt - предоставить текстовый контекст для машин, которые не могут обрабатывать и интерпретировать визуальные элементы на странице. Поэтому нет смысла использовать текст в изображениях, особенно в заголовках и заголовках страниц.

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

Заключение

Изображения могут помочь улучшить внешний вид ваших веб-страниц и сделать их более интересными, информативными и увлекательными. Однако, чтобы максимизировать их ценность, лучше всего дополнить их тегами alt. Эти краткие, но описательные объяснения предоставляют контекст как для пользователей, так и для поисковых систем. Альтернативные теги изображений помогают улучшить взаимодействие с пользователем, улучшить доступность и упростить ранжирование по релевантным ключевым словам.

У вас есть еще вопросы о том, что такое alt-тег или как его добавить в WordPress? Дайте нам знать в комментариях ниже!

Изображение от Honza Hruby / shutterstock.com