Alt текст для изображений: что это и как писать его правильно?

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

Alt текст для изображений: что это и как писать его правильно?

Что такое alt текст? 

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

Alt текст прописывается в HTML-коде или в настройках системы управления контентом (CMS). Обычно он незаметен для пользователя. Чаще всего этот элемент появляется в интерфейсе, когда браузер не может загрузить мультимедийные элементы из-за сбоя сервера или низкой скорости интернет-соединения.

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

Alt Attributes - Purpose + Requirements - Seobility Wiki

Почему alt текст имеет значение? 

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

Инклюзивность

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

Bb Accessibility Tip: Alt Text – CAT FooD

Пользовательский опыт (UX) 

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

Accessibility Tip #2: Writing Good Alt Text : University of Dayton, Ohio

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

Трафик по поиску изображений

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

Многое зависит именно от alt текста. Например, вы разместили очень красивое изображение с закатом над морским побережьем. Его можно описать по-разному:

  1. Закат над пляжем — для сайта со стоковыми картинками.
  2. Живописный закат во Флориде — для информационной страницы.
  3. Вид на море из отеля — для туристического ресурса.

New: Find Animated GIFs In Google Image Search, Images With Transparent  Backgrounds

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

Насколько важен alt текст для SEO?

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

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

Соответственно, это будет означать меньший трафик, более низкий уровень конверсии и напрасно израсходованный бюджет оптимизации. Следовательно, необходимо учесть рекомендации консорциума по развитию интернета (W3C). Чтобы получить большие шансы на успех в любой области, обязательно прописывайте alt текст для всех мультимедийных элементов, которые в этом нуждаются.

Как добавить альтернативное описание для изображений на сайте?

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

Согласно рекомендациям W3C, следует использовать такой синтаксис:

<img alt=”text”>,

где text — альтернативное описание к изображению.

Тег «alt» используется вместе со ссылкой на изображение и ограничением его размеров. Пример полной строки HTML будет выглядеть так:

<img src=”your_image.jpg” alt=”Majestic sunset in California” width=”320″ height=”240″>.

What Is Alt Text For Images? - Wiredelta

Важно! Если вы хотите сделать инструкцию для интерактивного элемента, которая появляется после наведения курсора на изображение, нужен тег «title». Синтаксис для него выглядит так:

<img title=”text”>. При этом «title» не считается альтернативой «alt». Его наличие никак не влияет на SEO-оптимизацию. Единственное преимущество, которое он дает, — положительный пользовательский опыт.

Если вы используете CMS, есть более удобный способ добавлять alt текст в код сайта. Рассмотрим последовательность действий в популярных системах управления контентом.

Как добавлять альтернативное описание в WordPress?

  1. Кликнуть левой кнопкой мыши на изображение — в правой части экрана появится панель управления.
  2. Найти пустое поле под надписью «Image Settings».
  3. Ввести alt текст.
  4. Нажать кнопку «Update» в правом верхнем углу экрана. 

Image SEO: How to optimize your alt text and title text • Yoast

Как добавлять альтернативное описание у HubSpot? 

  1. Кликнуть левой кнопкой мыши на изображение.
  2. Нажать кнопку «Edit image» в виде карандаша.
  3. Найти пустое поле под надписью «Alt text».
  4. Ввести alt текст.
  5. Нажать кнопку «Apply» внизу всплывающего меню. 

Alt text field within Image Optimization pop-up in CMS Hubs Content Editor

Как добавлять альтернативное описание в Joomla?

  1. Кликнуть правой кнопкой мыши на изображение.
  2. Нажать кнопку «Edit image».
  3. В открывшемся меню найти пустое поле рядом с надписью «Image Description».
  4. Ввести alt текст.
  5. Нажать кнопку «Update», расположенную справа внизу. 

Adding an image to an article - Joomla! Documentation

Лучшие практики написания alt текста для изображений 

Само по себе наличие этого элемента еще не дает преимуществ ресурсу. Чтобы эффективно использовать alt текст в SEO, нужно знать, как правильно его формировать. И здесь пригодятся лучшие практики опытных оптимизаторов.

Будьте лаконичны

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

Пишите по существу

Забудьте о словах «изображение», «картинка», «здесь изображено», «рисунок» и т.д. Они занимают место, но игнорируются как рядовыми посетителями, так и поисковыми роботами. Когда пишете альт-теги, сразу переходите к главному. Например, вместо «изображение спящего на одеяле котенка» используйте фразу «спящий на одеяле котенок».

Разумно используйте ключевики

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

Описывайте изображение как можно более содержательно

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

Если речь идет об изображении статического объекта, достаточно назвать его и дать две-три характеристики. Хороший пример alt текста: «красное короткое платье с тонкими бретельками». Если в картинке есть динамика, сначала назовите основной объект, а затем вспомните действие и место, например: «серый голубь летит между домами в городе». 

Alt Text for Images – The Complete Guide With Examples

Обязательно добавляйте контекст

Можно просто указать, что на сайте изображен мужчина среднего возраста в белой рубашке и пиджаке. Но вы вряд ли так привлечете внимание пользователей. Лучше конкретизировать: «Илон Маск во время презентации SpaceX».

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

Не игнорируйте функциональные кнопки

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

  1. Вход в личный профиль.
  2. Регистрацию.
  3. Сохранение персональных данных.
  4. Отправку запроса.
  5. Покупку.
  6. Добавление товара в «корзину».
  7. Заказ консультации.
  8. Обратную связь.

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

Еще раз проверяйте описание

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

Игнорируйте описание некоторых изображений

Неочевидный и на первый взгляд странный совет, но на самом деле далеко не каждая картинка нуждается в описании. И это следует из определения, что такое альт-теги и зачем они нужны.

Некоторые изображения добавляются на сайт просто «для красоты», непосредственно не касаются контента и не используются в интерфейсе. Специалисты советуют вставлять их с помощью CSS, а не HTML — такая практика оказывает положительное влияние на поисковую оптимизацию.

Однако иногда (например, из-за технических ограничений определенной платформы) приходится пользоваться традиционными методами. В таком случае инженеры W3C советуют добавлять пустой тег описания: <img alt=” “>. Это не считается ошибкой. Более того, системы преобразования текста в речь игнорируют такое примечание, поэтому оно не мешает пользователям с ограниченными возможностями.

Примеры alt текстов: хорошие и неудачные 

Плохо: Эйфелева башня.

Лучше: Эйфелева башня вид снизу.

Оптимально: Эйфелева башня вид снизу с Марсового поля в облачный день

В этом примере alt текста упоминания основного объекта недостаточно. Есть миллионы фотографий Эйфелевой башни, поэтому нескольких слов мало. Будет хорошо, если вы укажете ракурс, с которого сделан снимок. А в идеале следует добавить контекст — место, время суток и погоду. Согласитесь, последняя фраза позволяет вашему воображению работать на полную мощность. 

Плохо: ноутбук.

Лучше: ноутбук Microsoft Surface.

Оптимально: открытый голубой ноутбук Microsoft Surface на мраморном столе. 

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

Плохо: поиск ключевых слов.

Лучше: поиск ключевых слов в Serpstat.

Оптимально: отчет о трафике, конкуренции, сложности и СРС в инструменте поиска ключевых слов Serpstat. 

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

Alt текст для сложных изображений

Консорциум W3C также предлагает рекомендации по доступности ключевых элементов веб-страницы. Для них действуют особые правила. Их описание должно предоставлять информацию скорее о функции, чем о содержании.

Иконки

Повторяйте текст в изображении кнопки или инструкции после появления курсора. Например, «оставить контакты», «зарегистрироваться», «загрузить фото» и т.д. Представьте, что вы пользуетесь сайтом с закрытыми глазами и вам помогает другой человек, сидящий рядом. Каждый интерактивный элемент страницы должен иметь краткое и понятное описание своей функции. 

Image Alt Text vs Image Title in WordPress - What's the Difference?

Картинки со ссылками 

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

Сложные изображения

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

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

Невидимый помощник — alt текст для изображений 

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

Правильное альтернативное описание изображения усиливает стратегию оптимизации, увеличивает трафик и улучшает пользовательский опыт. Забыв или проигнорировав его, вы рискуете потерять свои позиции в поисковой выдаче. Чтобы избежать такой проблемы, следует пользоваться специализированными инструментами для технического аудита сайта, которые предлагают Moz, Serpstat, Ahrefs, Sitechecker и другие популярные платформы диджитал-маркетинга.

Часто задаваемые вопросы

Что такое alt текст?

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

Почему alt текст для изображения имеет большое значение?

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

Как alt текст влияет на SEO?

Отсутствие этого элемента свидетельствует о недостаточном внимании к инклюзивности и пользовательскому опыту. Это приводит к понижению рейтинга странички в поисковой выдаче.

Каким должен быть хороший alt текст?

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

Кирик Александр
Консультант по поисковой оптимизации

Рассылка

Категории