Alt text что это

Как правильно написать alt-текст

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

• из-за медленного соединения;
• из-за неправильного пути или имени файла в атрибуте src ;
• так как пользуются скринридерами.

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

Когда alt-текст нужен

У любого изображения, которое иллюстрирует или дополняет текст. Например, для изображений в теге , если у ссылки нет текстового содержимого.

Как правильно писать

• Кратко. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Очень длинные строки он может зачитать как три картинки, хотя это было всего лишь одна длинная строка.
• Чётко. Нужно ответить на вопрос, что именно изображено на картинке? Какую функцию она выполняет?
• Уникально. Не повторяйте текст, который уже есть на странице.
• Не начинайте со слов «картинка» или «изображение».
• Отталкивайтесь от окружающего контента.
• Следуйте правилам языка, на котором составляется описание: пунктуация, орфография.

Примеры использования

Картинка

Так можно описать, если в статье есть текст, который рассказывает о фотографии.

Если текста нет, например, у нас галерея изображений, тогда нужно описать картинку более детально:

Ссылка

Начинать текст с «ссылка» не нужно, роль уточнения играет сам тег .

Диаграмма

Если текста со статистикой нет, то придётся всю статистику вынести в alt :

Картинка с текстом

Просто переносим текст в alt :

Figure и figcaption

Всё равно пишем нормальный alt , так как в figcaption обычно маленькое описание:

Когда alt-текст не нужен

Когда картинка декоративная и не имеет смысла.

• Аватарка: имя пользователя и так у нас уже есть.
• Превью к статье: у нас уже есть заголовок, и этого будет достаточно.
• Иконки в кнопке.

Как не стоит писать

Если картинка оформительская и не требует alt , то не нужно писать туда пробел или его аналоги.

Если так делать, то скринридеры, либо начнут говорить, что это «картинка» (бессмыслица), либо прочитают «пробел» (ещё более бессмысленно).

Что будет, если забыть про alt-текст

Основных проблем две: пользователи ничего не увидят, а скринридеры могут прочитать неправильно или не то. Например, NVDA ничего не скажет, JAWS скажет «Графическое изображение без описания», а VoiceOver скажет название файла.

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

Чаще всего в такой ситуации вообще удаляют alt :

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

Искусственный интеллект и alt

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

Если посмотреть сейчас на автоматическую генерацию текстов, то там всегда присутствует доля предположения — «на изображении может находиться 1 человек».

С абстрактными картинками всё ещё хуже, так как ИИ вообще не понимает, что происходит.

Литература

• Рекомендации W3C по alt-текстам (англ.)
• Альтернативный текст в доступности (англ.)
• Использование ИИ для генерации alt-текста на изображениях (англ.)
• Accessibility: Images, «Alt» tags, and the «Out Loud» Experience (англ.)

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

• 22 ноября 2023

Знакомство с HTML

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

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

• 1 ноября 2023

Специальные символы в HTML

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

• 23 октября 2023

Простое диалоговое окно на HTML

Вот короткое демо:

• 18 октября 2023

Зачем нужен метатег viewport

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

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

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

• 18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

• 14 сентября 2023

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

• 12 сентября 2023

Осмысленный alt-текст: 6 правил

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

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

• 31 июля 2023

Растровая и векторная графика

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

• 13 июня 2023

Как понять, что перед вами заголовок

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

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

При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.

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

• 8 июня 2023

6 простых правил хорошего alt-текста

Давайте поговорим о том, как написать хорошее описание фотографий в атрибуте alt.

В первой части мы обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

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

Просто перескажите, что находится на картинке

Есть простой совет, чтобы создать идеальное описание.

Представьте, как вы звоните другу и рассказываете, что видите на изображении.

Но не переусердствуйте, так как лучше, если описание будет лаконичным.

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

Используйте контекст, в котором находится картинка

Одна и та же картинка может иметь разное описание в alt в зависимости от контекста. Контекст — это то, что окружает иллюстрацию, например, текст статьи, если картинка туда встроена.

Описание зависит от того, на чём сейчас нужно сфокусировать пользователя.

Посмотрите на картинку ниже и подумайте, какое описание вы бы указали в alt.

Есть несколько правильных ответов:

Подойдет для статьи о том, как работает CSS (плохо).

Если ваша статья про кружки и никак не связана с веб-разработкой.

Бардак на столе разработчика: кружки, переплетенные провода, карточки.

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

Если продаёте столы и считаете, что то, что находится на столе, не имеет никакой разницы. Да хоть тарелка.

Белая кружка с надписью в квадрате «CSS is awesome» стоит на белом столе. Awesome выходит за пределы квадрата.

Этот вариант подойдет, если вы не понимаете контекста статьи, но нужно поставить какую-то картинку и что-то там написать. Так тоже можно делать.

Главная мысль в этих примерах такая, что вам нужно акцентировать внимание на том, что сейчас более важно для статьи в этом изображении. Чтобы определить «сейчас», нужно понимать, о чём написано в статье рядом с этим изображением. Если в статье рассказывается о том, какие виды кружек бывают, то нужно описать детали кружки на изображении, например «Белая кружка с надписью «CSS is Awesome»». Всё, что есть на фоне, в этом случае не важно.

Не пишите alt, если картинка не несёт смысла

Нет ничего плохого в пустом alt, если изображение не несёт дополнительного смысла. Например, как описать мою аватарку в интерфейсе сайта?

Для контекста: на аватарке нарисована голова человека, который лежит на кровати и не может уснуть от копошащихся мыслей.

«Николай Шабалин» совсем плохой вариант, так как он полностью дублирует текст справа. Аватарка используется в шапке сайта, поэтому описывать её нет смысла.

Не описывать картинку нормально, но будьте аккуратнее и всегда помните про контекст.

Передавайте эмоции через alt

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

Эту картинку можно описать «Радостный человек лежит в гамаке на закате». Нужно ли писать здесь, что человек радостный, хотя мы даже не видим его лица? Это не обязательно, но можно так написать, если мы продаём гамаки, хотим дополнить картинку и сказать, насколько хорошо он себя чувствует в нашем удобном гамаке, лёжа в нём на берегу океана.

Про эмоциональное описание для изображений вы можете подробнее узнать в блоге Лео́ни Уотсон.

Не заигрывайте с декором ради декора

Все мы знаем, что декоративные изображения обычно используются без описания, хотя такая возможность есть. Для этого можно использовать свойства content: «» или, если вы используете изображение в content: url(), то правильно будет написать так:

content: url("path/to/image.jpg" / "Описание декоративного изображения").

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

Не пишите в alt названия файлов или имя фотографа

Я часто смотрю, какое описание заполняют в атрибуте alt, и удивляюсь, насколько фантазия может пойти не туда. Часть заполненный альтернативный текст полностью бесполезен, так как не передаёт смысла изображения.

Какое описание не подойдёт:

• imgX2 или 7e0273c07fef3b598590d3fdddf7808604f0a191435c2c0c — это просто название или хэш файла с картинкой.
• название сайта или название статьи — возможно, это проделки для SEO.
• имя фотографа — тут всё понятно.

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

Итого — как написать хороший alt-текст

Просто понятное описание — самое хорошее решение, если оно не слишком длинное. Отсутствие описания — нормально, но должно быть к месту. Эмоциональное описание — тоже хорошо, если вписано в контекст.

А вот шесть правил коротко:

1. Просто расскажите, что видите на картинке — чем короче, тем лучше.
2. Используйте контекст, в котором находится картинка — то есть учитывайте, что находится вокруг неё на сайте.
3. Не пишите alt, если картинка не несёт отдельного смысла — например, аватарка в профиле.
4. Не стесняйтесь передавать эмоции через alt — если кто-то радуется или грустит, напишите об этом, если уместно.
5. Не пишите alt у декоративных изображений — например, у иконок.
6. Не пишите в alt название файла или имя фотографа — alt нужен не для этого.

Экспериментируйте, пробуйте и не бойтесь ошибиться.

Что такое Alt текст и почему его следует использовать?

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

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

Что такое Alt text?

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

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

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

• Наполнять свои alt-теги только ключевыми словами
• Максимально упрощать, например, всего лишь одно слово

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

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

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

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

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

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

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

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

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

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

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

Доступность изображений для всех пользователей

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

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

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

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

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

Если вы работаете с помощью системы управления контентом (CMS), вам даже не придется углубляться в сам код — многие CMS просто позволят вам щелкнуть изображение, а затем ввести тег alt в поле. Например: Но даже если это не так, добавить тег alt в код — простая задача. Для начала откройте исходный HTML-код своего сайта. Затем найдите изображение, к которому вы хотите добавить тег alt — оно должно выглядеть примерно так:

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

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

Вот и все! Вы сможете легко добавить теги alt ко всем вашим изображениям — а если используете систему управления контентом, то это может быть еще проще.Перевод с блога webfx.com.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

,

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

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

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Иконки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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