Что такое alt на сайте: Как правильно заполнять Alt и Title для картинок | Дропшиппинг

Содержание

Что такое Alt текст изображения и насколько он важен для SEO?

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

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

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

Зачем вообще заполнять alt теги?

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

сообщить поисковому роботу важные данные;
привлечь новых посетителей;
увеличить лояльность своей аудитории.

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

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

Чтобы привлечь потенциальных клиентов по продвигаемым запросам, необходимо составлять описания с использованием ключевых фраз для тегов alt и title. Текст, используемый для тега alt, может иметь такой формат: «прилагательное + ключевая фраза». Для атрибута title рекомендуется создать сложное предложение «прилагательное + ключ + дополнение».

К примеру, давайте рассмотрим ключевую фразу «Лондонская недвижимость». Для такого ключа вы можете прописать alt «Роскошная лондонская недвижимость», а также title «роскошная недвижимость в Сити, Саттоне и Бексли». Оптимизированное описание изображения должно содержать такие слова, как «фотография», «изображение».

Что делать, если у вас на сайте уже много страниц и картинок? Вероятно, на каких то из них альт теги прописаны, на каких то нет. Здесь алгоритм простой. Берите свои страницы (начиная с самой ценной) и проверяйте каждую в Sitechecker. Во вкладке “Картинки” наш сервис выводит alt и title всех картинок на странице. Так вы можете оценить, где они пропущены, или указаны неправильно. Заполните их правильно (лучше всего использовать данные о поисковых запросах с Search Console и данные с собранного ранее семантического ядра). Далее спустя время проверьте как изменилось количество показов данного URL-адреса в поисковой выдаче. Пару таких экспериментов помогут понять, насколько правильно заполненные альты влияют на продвижение именно вашего сайта.

Nataliya Fialkovskaya

SEO specialist

Nataliya is SEO expert at Sitechecker. She is responsible for blog. Can’t live without creating valuable content about SEO and Digital Marketing.

Как добавить ALT-тег к изображениям – Справочный центр Vigbo

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

Виджет Фотография

1. Добавьте виджет Фотография на страницу или наведите курсор мыши на уже добавленный ранее виджет.

2. Откройте настройки виджета Фотография, кликнув по значку шестеренки в верхнем правом углу виджета.

3. Укажите текст — описание изображения в поле ALT-текст для изображения и сохраните изменения.

Виджет Фотогалерея

1. Добавьте виджет Фотогалерея на составную страницу или выберите уже добавленный виджет.

2. Чтобы добавить ALT-теги к изображению в галерее, наведите курсор мышки на область фото и нажмите иконку, которая появится при наведении.

3. В открывшемся окне укажите текст — описание изображения в поле ALT-текст для изображения и сохраните изменения.

Добавление ALT-тегов доступно для галереи в виде ленты, грид, галереи с одним фото.

Alt-тег для изображений товаров

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

1. Перейдите к редактированию нужного товара в разделе Магазин

> Товары.

2. Откройте вкладку Фотографии и наведите курсор на область фото. Нажмите иконку карандаша, которая появится при наведении.

3. В открывшемся окне укажите текст — описание изображения в поле Альтернативный текст (тег alt) и сохраните изменения.

Правила заполнения alt-тегов

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

2. Длина текста не должна быть меньше 3–4 слов, но не более 250 символов с пробелами. Оптимальный вариант – 5-6 слов.

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

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

Что такое Alt и Title для изображений и для чего они нужны

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

Атрибуты Alt и Title

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

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

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

Если бы владелец магазина или тот, кто занимается его наполнением, не составил краткое описание для атрибута Alt, этого текста бы не было.

Что касается Title, он не играет особой роли для SEO-продвижения, но может улучшить поведенческие факторы. Атрибут представляет собой заголовок изображения, который всплывает в виде небольшой подсказки при наведении указателя мыши на картинку.

Какие требования предъявляются к обоим атрибутам и как их составлять, вы узнаете ниже.

Составление Alt и Title

Атрибут Alt

Описание изображения не должно быть слишком длинным или состоять из одного слова. Золотой серединой будет предложение от 3 до 5 слов, часть из которых — ключевые запросы, собранные в Яндекс. Вордстат. При этом их нельзя просто взять и перечислить через запятую, так как это приведет к заспамленности. Нужно составить из них осмысленную фразу. А еще желательно, чтобы текст был не более 80 знаков в длину. Этого достаточно для его индексации поисковыми системами.

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

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

Атрибут Title

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

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

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

Решение проблем с заполнением Alt и Title

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

Несколько снимков одного товара

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

Огромный ассортимент

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

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

Одна и та же продукция, но с отличием в цвете.

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

Smart-часы в черном цвете.
Smart-часы в серебристом цвете.
Smart-часы в розовом цвете.

Как видите, составлять Alt и Title к изображениям не так уж и сложно. Прислушайтесь к нашим рекомендациям, и у вас обязательно всё получится!

Что такое alt-текст, и почему его нужно добавить прямо сейчас

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

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

Это полезный инструмент для SEO. Поисковые системы не умеют распознавать изображения и реагируют исключительно на слова. Добавляя к картинке alt-текст, вы делаете ее «заметной» для Яндекса или Google, и в результате ваш сайт начинает подниматься в результатах поиска.
Они делают сайт доступным. Люди с нарушениями зрения пользуются специальными программами для чтения, когда выходят в интернет. Эти программы, как и поисковики, не умеют распознавать картинки. Выручают alt-тексты. Они описывают изображение, и человеку, который плохо видит, все становится понятно.

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

Не будьте многословны. Добавляя alt-текст, постарайтесь уложиться максимум в 15 слов.
Пишите понятно. Когда вы добавляете alt-текст, вы описываете картинку тому, кто ее не видит. Сделайте так, чтобы воображаемый читатель понял текст правильно и смог представить изображение по его описанию.
Учитывайте контекст. Alt-текст часто зависит от содержания и тематики ресурса. Представьте снимок счастливой парочки, готовящей обед. В блоге о еде у него будет одно значение, а на сайте знакомств — совершенно другое. Вот поэтому alt-тексты должны соответствовать контексту сайта и отдельно взятой страницы.
Не спамьте. Не добавляйте ключевые слова и мета-теги в поле для alt-текста даже если очень хочется. Вместо этого придумайте хорошее описание и аккуратно включите в него пару подходящих для продвижения слов.
Не уходите от сути. У вас не так много места, поэтому сделайте акцент на самом главном. Это могут быть люди, предметы, места, цвета, автор снимка или атмосфера. В общем, не разбрасывайтесь и отмечайте то, на что нужно обратить внимание.

В редакторе Wix добавить alt-текст очень просто. Вот инструкция.

Для Wix-сайта:

Щелкните мышкой по изображению.
Нажмите на иконку «Настройки».
Добавьте alt-текст в поле «Тексты фото» — «Опишите картинку поисковикам».

Для блога на Wix:

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

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

Нужно создать сайт? Сделайте его на Wix — это просто и бесплатно!

Команда Wix

#Alttext #изображения #оптимизацияизображений #поисковаяоптимизация #полезныйсовет

Alt-текст для SEO: как оптимизировать изображения

Alt-текст (замещающий текст) описывает изображение на веб-странице. Он находится в коде HTML и, как правило, не отображается на самой странице.

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

Из этого руководства вы узнаете:

Чем важен alt-текст?

Alt-текст является важным фактором по четырем основным причинам.

1. Alt-текст повышает уровень доступности

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

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

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

2. Alt-текст может улучшить «тематическую релевантность»

Google изучает слова на странице, чтобы определить ее тематику.

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

Как это связано с изображениями?

Дело в том, что иногда контекст «спрятан» в изображениях, которые Google не может распознать.

Использование alt-текста помогает поисковику «увидеть» эти изображения, а значит, лучше понять вашу страницу и ее содержимое.

3. Alt-текст может повысить рейтинг страницы в Google Images

Google Images — вторая по величине поисковая система в мире. Она выполняет обработку 20,45 % всех поисковых запросов в сети Интернет, что больше доли YouTube, Bing и прочих поисковых систем вместе взятых.

Это значит, что у вас есть возможность привлечь трафик с Google Images.

Просто взгляните на количество переходов на блог Ahrefs из Google Images за последние три месяца:

Джон Мюллер из Google говорит, что alt-текст — это важная часть оптимизации для Google Images:

Alt-текст чрезвычайно полезен для Google Images — если вы хотите, чтобы ваши изображения попали в их выдачу. Даже при использовании «ленивой загрузки» вы знаете, какое изображение будет загружено, поэтому как можно раньше добавьте к нему эту информацию и проверьте, как она отрисовывается.
— John (@JohnMu) September 4, 2018

4. Alt-текст служит якорным текстом для ссылок-изображений

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

Но не все ссылки являются текстовыми — некоторые закреплены за изображениями.

Google заявляет:

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

Как добавить alt-текст к изображениям

Просто добавьте атрибут alt в тег <img> в коде HTML.

Изображение с атрибутом alt:

<img src=“пирог.jpg” alt=“пирог с мясом и пивом”>

Если вы пользуетесь современной системой управления контентом (CMS), то в ней наверняка можно добавить alt-текст, не забираясь в сам код HTML.

Например, в WordPress, когда вы добавляете изображение к странице или определенной записи, на экране появляется поле для alt-текста:

В других CMS это делается схожим образом.

Вот инструкции для некоторых из наиболее популярных CMS:

Нужно ли добавлять alt-текст ко всем изображениям?

Нет, это распространенное заблуждение.

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

Например, на некоторых сайтах для разделения контента используются пиктограммы:

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

То же самое относится к фоновым или стоковым изображениям наподобие этого:

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

Но есть один важный момент…

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

Вот как это должно выглядеть:

<img src="разделитель.gif" alt="">

Узнайте больше из этого руководства от WebAIM.

Как составить хороший alt-текст

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

Будьте немногословны. Пространный alt-текст будет действовать на нервы тем, кто пользуется программами для чтения. Используйте минимум слов (если без длинного описания все-таки не обойтись, используйте атрибут longdesc).
Будьте точны. Главная задача — описать изображение словами.
Не забивайте alt-текст ключевыми фразами. Это не место для размещения ключевых фраз.
Не объявляйте, что это изображение. Не нужно начинать описания со слов «Изображение…» или «Фотография…». И Google, и программы для чтения информации с экрана способны сделать это сами.
Избегайте избыточности. Не повторяйте информацию, которая уже имеется в контексте изображения. Например, если у вас на странице есть фотография Стива Джобса, а прямо под ней написано «Стив Джобс», то добавлять это описание в alt-текст не нужно. Google должен и так понять, что это подпись к фотографии.

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

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

Давайте проверим, насколько хорошо мы поняли приведенные выше правила, рассмотрев несколько примеров.

Плохо: <img src=“cheesecake.png” alt=“фотография чизкейка”>

Нормально: <img src=“cheesecake.png” alt=“чизкейк”>

Хорошо: <img src=“cheesecake.png” alt=“чизкейк с клубникой”>

Идеально: <img src=“cheesecake.png” alt=“чизкейк с клубникой и кремом”>

Плохо: <img src=“steve-jobs.png” alt=“стив джобс apple iphone ipad mac”>

Нормально: <img src=“steve-jobs.png” alt=“стив джобс”>

Хорошо: <img src=“steve-jobs.png” alt=“основатель apple, стив джобс”>

Идеально: <img src=“steve-jobs.png” alt=“основатель apple, стив джобс, демонстрирует iphone 4”>

Плохо: <img src=“amp.png” alt=“изображение4”>

Нормально: <img src=“amp.png” alt=“усилитель orange”>

Хорошо: <img src=“amp.png” alt=“усилитель orange — 30 ватт”>

Идеально: <img src=“amp.png” alt=“orange AD30HTC — усилитель 30 ватт”>

Обратите внимание на то, что в последнем примере в текст включен номер модели. Это хорошее решение, особенно для изображений на страницах товаров в интернет-магазинах.

Как найти и исправить проблемы с атрибутами alt

Существует множество служб, которые могут просканировать ваш сайт и найти недостающие атрибуты alt; один из них — Site Audit от Ahrefs.

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

К примеру, взгляните на эти ссылки с отсутствующими атрибутами alt:

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

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

На это есть две веские причины:

Их уже читают люди с нарушениями работы органов зрения. У 2,4 % граждан США нарушено зрение. Это приблизительно каждый 42‑й человек; из чего следует, что если вашу страницу посещают 10 000 человек в месяц, то 240 из них не могут полноценно потребить ваш контент.
Они потенциально могут получать больше трафика. Alt-текст может помочь изображениям подняться выше в выдаче Google Images, а это приведет к повышению трафика. Даже прирост на 1 % для страницы с 10 000 посещений в месяц означает 100 дополнительных посетителей.

Итак, какова же последовательность действий:

Шаг 1. Определите страницы с наибольшим естественным трафиком

Воспользуйтесь сервисами Google Analytics, Google Search Console или отчетом «Top pages» («Самые популярные страницы») в Site Explorer от Ahrefs.

Шаг 2. Проверьте свои атрибуты alt

Установите бесплатное расширение для Chrome Alt Text Tester, откройте свою наиболее посещаемую страницу и активируйте данное расширение.

Расширение будет отображать alt-текст при наведении курсора на изображение.

Если атрибут alt отсутствует, расширение сообщит об этом.

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

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

…или сделать обратный вывод для этой страницы на сайте The Mirror:

Шаг 3. Сделайте то же самое с другими страницами

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

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

Например, 51 % месячного естественного трафика блогу Ahrefs приносят всего десять записей…

…что позволяет нам легко и быстро проверить и оптимизировать alt-текст для наиболее часто посещаемых страниц.

Напоследок

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

Узнайте об этом больше из нашего списка 12 практических рекомендаций по поисковой оптимизации изображений.

Перевела Кирик Наталья, владелец контент агентства WordFactory.ua

Что такое alt тег? — TemplateMonster

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

Alt тег (альтернативный текст) — это слово или фраза, которые могут быть вставлены как атрибут в документе HTML (язык гипертекстовой разметки), чтоб сообщить посетителям веб-сайта природу или содержимое изображения. Альт тег появляется в пустом поле, которое обычно содержит изображение. Такие tags полезны, когда ссылка на изображение недоступна из-за разбитого или измененного URL-адреса или какой-либо другой проблемы.

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

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

Синтаксис

Пример

Как применять альт теги?

Что такое альт тег понятно, но как его правильно использовать? При выборе тега важно убедиться, что он максимально информирует зрителей об изображении, используя как можно меньше слов. Если текст слишком длинный, может потребоваться слишком много места для размещения внутри прямоугольника изображения.

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

Значение альт тегов для SEO

СЕО очень важно для любого сайта, особенно для лендинг пейдж. Что такое alt тег для SEO? Это хорошее место для размещения релевантных ключевых слов для улучшения поисковой оптимизации вашего сайта (SEO). Однако, практика вставки большого количества ключевых слов в веб-контент — не оправдывает ожиданий. Согласно Google, такая практика не только неэтична, но и неэффективна. Поэтому сильно усердствовать, заполняя все альт теги ключевыми словами, не рекомендуется. Все должно быть в меру, чтоб поисковая система не расценивала это как спам.

Не можете найти ответ на вопрос?

Как прописать тег ALT — советы и примеры

Тема сегодняшней статьи – SEO — оптимизация изображения с помощью атрибута ALT. Многие не знают, что при оптимизации данного атрибута вы повышаете вероятность посещения вашего сайта. Итак, более подробнее расскажу далее в статье:

Что такое атрибут ALT?

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

Так же, как и Title и Description он учитывается поисковой системой

До и после загрузки изображения в браузер

Синтаксис html описания картинки

</head>
<body>

<img src=”image.jpg” alt=”Описание картинки image” />

</body>
</html>

В атрибут Alt тега <img> входит собственно описание картинки. Последовательность атрибутов не особо важна. В данном примере я подчеркнул обязательные атрибуты для тега img.

Читайте в нашем блоге: Что такое noindex, nofollow?

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

Прежде чем прописывать Title я расскажу вам частые ошибки, которые замечаю на сайтах.

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

Не соответствие изображения и атрибутов. Допустим если на вашей картинке отображена BMW X5, а в атрибуте прописываете Audi A3, то не ждите что человек перейдет по вашей картинке на сайт.

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

Так же поисковые системы могут наложить на вас санкции, поэтому не увлекайтесь.

А как же нужно прописывать теги для картинок?

Краткое и понятное описание картинки. Как можно точнее опишите изображение и если ALT был создан автоматически перепроверьте все страницы.

Длина атрибута ограничена. Поисковые системы учитывают 3-4 слова (около 250 символов) что затрудняет описание картинки.

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

Например:

alt=”Ремонт компьютеров в Чебоксарах”

Уникальные атрибуты для каждой картинки. Так же важная составляющая, самая встречающаяся проблема у SEO-оптимизаторов. На примере я вам покажу как ее решить.

Карточка товара содержит много картинок

Пример бренда Ситилинк, где указан один и тот же товар с одинаковым ALT

Как же разделять картинки одного и того же товара, если спамить нельзя и нужно прописывать все уникальное? Допустим “Сплит-система HYUNDAI H-AR6-07H” можно расписать так:

“Сплит-система HYUNDAI H-AR6-07H Вид 1”

“Сплит-система HYUNDAI H-AR6-07H Вид 2”

Похожие товары

Пример как прописывает ALT у похожих товаров MediaMarkt

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

Размер изображения – чем больше разрешение картинки, тем лучше. В любом случае ее отображение можно подкорректировать благодаря атрибутам “width” и “height”. Но не стоит делать картинку слишком маленькой, в противном случае поисковые системы не будут учитывать изображение меньше 150 пикселей и будут считать ее за иконку.

Расположение изображения – как можно ближе к тексту, который содержит ключевые слова. Вот почему многие оптимизаторы учитывают этот фактор и стандартная схема расположения картинок выглядит так:

<h3> Текст заголовка с ключевым словом</h3>

<img alt=”Product 1”/>

<p>Дальнейшее описание</p>

Читайте в нашем блоге: Продвижение сайта благодаря Турбо-страницам

Уменьшение веса изображения. Размер картинки играет ключевую роль, ведь если она будет весить очень много, что даже будет тормозить скорость загрузки сайта это скажется на ранжировании всего сайта. Да-да бывало и такое!

Формат изображений. Рекомендую использовать проверенные временем и не запрещенные поисковыми системами – JPG, PNG, GIF.

Подпись под картинкой

Если на вашем сайте очень много картинок и почти нет текста, подпись картинкой будет полезна, поэтому именно с точки зрения SEO необходимо ее оптимизировать:

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

Например, у вас картинка динамиков Iphone 7.

В подписе укажите данный факт: “Звучание звука в Iphone 7 стало заметно лучше благодаря Lighting” Отношение Яндекса к атрибуту ALT

Яндекс открытым текстом говорит, что ALT важен.

Далее в хелпе Яндекса наткнулся на очень интересный ответ:

“Как поместить мою картинку на первое место?»

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

Дополнительные факторы картинки влияющие на SEO

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

Ранжирование картинок в Google

Помимо вышеупомянутого ALT, вот что учитывает Google в ранжировании изображений.

Самые значимые факторы для Google

Давайте пробежимся по главным факторам для Google.

Фотографии хорошего качества – это должно быть понятно, итак. Никому не будут интересны размытые фотографии или просто плохого качества. Здесь скорее качество картинки играет на ее кликабельность, некий CTR.

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

А что по поводу атрибута Title

Google не упомянул, а Яндекс по минимуму атрибут Title. (Не путать с тегом <Title>). Указать лишним точно не будет, только можно по тому что Title при наведении на картинку отображается и несет в себе смысл. В этом плане, как и с текстом под картинкой можно экспериментировать, указывать полезную информацию: различные факты, преимущества и так далее.

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

Вот и все. Задавайте вопросы в комментариях, кто что думает по поводу атрибутов ALT, TITLE. Как вы оформляете изображения?

Что такое замещающий текст? Как использовать элемент страницы для изображений

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

Идет загрузка.

Альтернативный текст — это компонент дизайна веб-страниц. В частности, это фраза или предложение, описывающее изображение на странице.

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

Назначение замещающего текста

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

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

Как добавить замещающий текст к изображению и увидеть его в HTML

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

Вы можете добавить замещающий текст к любому изображению с помощью инструмента веб-дизайна или управления контентом, такого как WordPress.Дэйв Джонсон / Business Insider

Затем этот альтернативный текст кодируется на странице в HTML. Вы можете увидеть это в любом веб-браузере, используя функцию вашего браузера «Проверить». Например, в Chrome щелкните правой кнопкой мыши изображение на веб-странице и выберите «Проверить» в раскрывающемся меню. В Firefox щелкните правой кнопкой мыши и выберите «Проверить элемент». В обоих случаях вы должны увидеть окно с HTML-кодом страницы.Для изображения вы должны увидеть HTML-тег с надписью «alt =», за которым следует текстовое описание alt.

Вы можете использовать инструмент Inspect в браузере, таком как Chrome, чтобы увидеть замещающий текст, связанный с изображением на веб-странице.Дэйв Джонсон / Business Insider

Лучшие методы работы с альтернативным текстом

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

Рекомендации относительно длины изменяются время от времени, но в настоящее время вы должны держать замещающий текст менее 100 символов, включая пробелы.
Опишите изображение четко, точно и лаконично.
Не начинайте замещающий текст фразой типа «Изображение…» или «Фотография…». Просто опишите, что изображено на картинке.
Не «набивайте» альтернативный текст ключевыми словами, относящимися к веб-странице, но будьте как можно более конкретными.Это помогает как слепым, так и слабовидящим посетителям, а также Google.

Что это такое, как это писать и почему это важно для SEO

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

Снимок экрана выше является первой страницей результатов поисковой системы (SERP), которую Google создает для поискового запроса «Примеры таблиц Excel». Обратите внимание, как, помимо вкладки «Изображения» вверху, Google помещает значительный пакет интерактивных изображений в начало основной страницы результатов — до того, как какие-либо результаты с обычным текстом станут даже видимыми.

Сегодня почти 38% результатов выдачи Google показывают изображения — и это число, вероятно, будет расти. Это означает, что, несмотря на все ваши усилия по поисковой оптимизации, вы все равно можете упустить другой источник органического трафика: изображения вашего сайта. Как вы попадаете в этот источник трафика? Альтернативный текст изображения.

Что такое замещающий текст?

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

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

Как добавить замещающий текст к изображениям

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

Давайте рассмотрим, что делать дальше для CMS Hub и WordPress ниже.

Как добавить замещающий текст в HubSpot CMS

В HubSpot, как только вы щелкнете изображение и щелкните значок редактирования (который выглядит как карандаш), появится всплывающее окно оптимизации изображения.

Вот как выглядит это окно оптимизации изображения в CMS на вашем портале HubSpot:

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

Как добавить замещающий текст в WordPress CMS

В WordPress при нажатии на изображение автоматически откроется вкладка Block на боковой панели. В разделе «Настройки изображения» добавьте замещающий текст в пустое поле.

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

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

3 примера замещающего текста изображений (хорошее и плохое)

1. Ключевое слово в сравнении с деталями

Неверный замещающий текст

 alt = "Стена офиса HubSpot Сингапур Фрески на рабочем месте входящий маркетинг оранжевые стены отправить его"

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

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

Что еще хуже, если вы наберете слишком много ключевых слов, вы можете понести штраф Google.

Хороший альтернативный текст

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

 alt = "Оранжевая фреска с надписью" отправить "на стене в сингапурском офисе HubSpot"

2. Детали против специфики

Изображение через Winslow Townson

Неверный замещающий текст

alt = "Бейсболист отбивает мяч на бейсбольном поле"

Строка замещающего текста выше технически следует первому правилу замещающего текста — быть описательной — но она не является описательной в правильном смысле.Да, на изображении выше показано бейсбольное поле и игрок, отбивающий бейсбольный мяч. Но это также фотография Фенуэй-Парка — и Дэвида Ортиса из Red Sox № 34, показывающего один на правом поле. Это важные особенности, которые Google потребуется для правильной индексации изображения, если оно, скажем, в блоге о спорте в Бостоне.

Хороший альтернативный текст

 alt = "Дэвид Ортис из команды Boston Red Sox отбивает мяч с домашней площадки в Fenway Park"

3.Специфика и контекст

Изображение через UCLA

Оба изображения выше имеют четкий контекст, который может помочь нам написать хороший альтернативный текст — один взят из офиса HubSpot, а другой — Fenway Park. Но что, если у вашего изображения нет официального контекста (например, названия места), которым можно было бы его описать?

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

Для статьи о посещении бизнес-школы

Неверный замещающий текст

alt = "Женщина, указывающая на экран компьютера человека"

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

Хороший альтернативный текст

 alt = "Профессор бизнес-школы указывает на экран компьютера студента"

Для веб-страницы образовательного программного обеспечения для учителей бизнес-школ

Неверный замещающий текст

alt = "Учитель указывает на экран компьютера ученика"

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

Хороший альтернативный текст

 alt = "Профессор, использующий образовательное программное обеспечение для обучения учащегося бизнес-школы"

Как альтернативный текст влияет на SEO

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

Таким образом, замещающий текст

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

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

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

Источник изображения

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

Почему важен замещающий текст изображения?

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

Доступность

Еще в 1999 году W3C опубликовал свои рекомендации 1.0 по обеспечению доступности веб-контента, чтобы объяснить, как сделать контент более доступным для пользователей с ограниченными возможностями. Одно из этих правил заключалось в том, чтобы «предоставить эквивалентные альтернативы звуковому и визуальному контенту». Это означало, что любые веб-страницы, включая изображения (или фильмы, звуки, апплеты и т. Д.), Должны включать информацию, эквивалентную своему визуальному или слуховому содержанию.

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

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

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

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

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

Источник изображения

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

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

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

Начиная с 2018 года, команда блога HubSpot внедрила новую стратегию SEO, которая, в частности, была более сосредоточена на оптимизации замещающего текста изображений.Это помогло увеличить трафик изображений в блоге на 779% менее чем за год, в результате чего количество обычных просмотров увеличилось на 160 000. Вы можете узнать больше об успехах команды в этом сообщении в блоге.

Добавление замещающего текста изображения на ваш сайт

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

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

Примечание редактора: этот пост был первоначально опубликован в сентябре 2018 года и был обновлен для полноты.

WebAIM: альтернативный текст

Введение

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

Важно

См. Также нашу статью об изображениях для получения дополнительной информации о доступности изображений.

Основы альтернативного текста

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

Альтернативный текст выполняет несколько функций:

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

Ключевой принцип заключается в том, что компьютеры и программы чтения с экрана не могут анализировать изображение и определять, что оно представляет. Как разработчики, пользователю необходимо предоставить текст, который представляет КОНТЕНТ и ФУНКЦИЯ изображений в вашем веб-контенте.

Альтернативный текст может быть представлен двумя способами:

В атрибуте alt элемента img .
В контексте или окружении самого изображения.

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

Важно

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

Каждое изображение должно иметь атрибут alt . Это требование стандарта HTML (возможно, с некоторыми исключениями в HTML5). Изображения без атрибута alt , скорее всего, будут недоступны. В некоторых случаях изображениям может быть присвоено пустое значение атрибута alt (например, alt = "" , иногда называемый «нулевым» альтернативным текстом).

Контекст — это все

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

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

Примечание

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

Пример 1

Из-за его роли главнокомандующего американскими войсками в войне за независимость, а затем и первого президента Соединенных Штатов Джорджа Вашингтона часто называют «отцом своей страны».

Какой альтернативный текст был бы подходящим для изображения в Примере 1?

«Изображение Джорджа Вашингтона»
«Джордж Вашингтон, первый президент США»
Достаточно пустого атрибута alt ( alt = "" ).
«Джордж Вашингтон»

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

Давайте рассмотрим некоторые важные правила, касающиеся атрибута alt .

Важно

Атрибут alt обычно должен :

Будьте точны и эквивалентны при представлении того же содержания , и функции изображения.
Будьте лаконичны. Это означает, что правильное содержание (если есть контент) и функция (если есть функция) изображения должны быть представлены настолько лаконично, насколько это необходимо.Обычно требуется не более нескольких слов, хотя редко могут быть уместными короткие предложения.
НЕ является избыточным или не предоставляет ту же информацию, что и текст в контексте изображения.
НЕ используйте фразы «изображение…» или «изображение…» для описания изображения. Обычно пользователю очевидно, что это изображение. И если изображение передает контент, обычно нет необходимости, чтобы пользователь знал, что это изображение передает контент, а не текст.Если тот факт, что изображение является фотографией или иллюстрацией и т. Д., Является важным содержанием, может быть полезно включить его в альтернативный текст.

Исходя из этих правил, вариант D ( alt = "Джордж Вашингтон" ), вероятно, будет лучшим альтернативным текстом в этом случае. Вариант А без необходимости описывает изображение как изображение. Вариант B предоставляет дополнительную информацию, которая не представлена непосредственно на изображении, а также является избыточной для содержимого, представленного позже в тексте.Вариант C (без атрибута alt ) не подходит, потому что изображение передает контент, который непосредственно не представлен в окружающем контексте. Несмотря на то, что окружающий текст указывает на то, что он относится к Джорджу Вашингтону, визуальные пользователи могут сказать это непосредственно по содержимому изображения — поэтому, если изображение передает контент, ему следует дать альтернативный текст.

Пример 2

Джордж Вашингтон

Каким будет соответствующий атрибут alt для изображения в примере 2?

«Джордж Вашингтон»
Достаточно пустого атрибута alt ( alt = "" ).
«Имидж»
Изображение не требует атрибута alt .

В этом случае содержимое изображения представлено в окружающем содержимом, поэтому вариант B ( alt = "" ) является лучшим выбором.Вариант А был бы лишним. Вариант C предоставляет постороннюю и бесполезную информацию. Вариант D (без атрибута alt ) никогда не будет правильным выбором — каждое изображение должно иметь атрибут alt .

Пример 3

Джордж Вашингтон

Каким будет соответствующий атрибут alt для изображения в примере 3?

Достаточно пустого атрибута alt ( alt = "" ).
«Запись в Википедии Джорджа Вашингтона»
«Подробнее»
«Джордж Вашингтон»

В этом случае изображение также является ссылкой, поэтому у него есть функция.Когда изображение находится внутри ссылки, функция изображения должна быть представлена в альтернативном тексте, который также находится внутри ссылки. В этом случае в ссылке, описывающей функцию, нет смежного текста, поэтому он должен быть представлен в атрибуте alt . В результате вариант D («Джордж Вашингтон»), вероятно, является лучшим выбором. Хотя слова «Джордж Вашингтон» в атрибуте alt являются избыточными в тексте, который следует ниже, в этом случае избыточность необходима для адекватного описания функции.

Вариант А не подходит. Изображение, которое является единственным элементом ссылки, никогда не должно иметь отсутствующего или пустого атрибута alt . Это потому, что программа чтения с экрана должна прочитать ЧТО-ТО, чтобы идентифицировать ссылку. Программы чтения с экрана могут считывать имя файла изображения или URL-адрес страницы, на которую ведет ссылка, что может оказаться полезным или бесполезным. И помните, что ссылка может быть прочитана вне контекста окружающего текста, например, когда пользователь перемещается по ссылкам на странице.Вариант B предоставляет контент, который недоступен только через изображение (т. Е. Вы не можете определить ссылки изображения на Википедию, просто взглянув на него). Вариант C не дает адекватного описания функции, особенно вне контекста.

Весь этот пример также можно было бы значительно улучшить, поместив изображение и текстовую подпись в одну ссылку:

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

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

Пример 4

В этой картине художник Эмануэль Лойце использовал свет, цвет, форму, перспективу, пропорции и движение для создания композиции.

Какой атрибут alt будет наиболее подходящим для изображения в примере 4?

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

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

Вариант А («Джордж Вашингтон»), вероятно, неадекватно описывает содержание изображения. Тот факт, что на картине изображен Джордж Вашингтон, не обязательно имеет значение в этом контексте. Вариант B («Картина Джорджа Вашингтона») может быть адекватным, но не дает особого дополнительного содержания.Однако может быть уместным описать изображение как картину, а не как фотографию или другой тип изображения. Вариант C предоставляет дополнительную информацию, которая может помочь пользователю идентифицировать сам контент. Помните, что альтернативный текст предназначен не только для слепых. Многие зрячие пользователи смогут идентифицировать конкретную рассматриваемую картину по этому описанию, тогда как «Джордж Вашингтон» сам по себе не будет достаточно описательным. Вариант D может быть подходящим, если целью изображения является представление определенной художественной техники, а содержание самого изображения не имеет значения.Вариант E также может быть подходящей альтернативой, если подробное изучение картины необходимо, но оно слишком длинное и многословное, чтобы быть полезным — такой текст лучше использовать в качестве текста на веб-странице.

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

Функциональные образы

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

Пример 5

Изображение «Продукты» является частью панели навигации.

Какой атрибут alt будет наиболее подходящим для навигационного изображения «Продукты» в примере 5?

«Товары»
«Ссылка на товары»
Изображение не передает контент, поэтому ( alt = "" ) будет достаточно.

В данном случае вариант А — лучший ответ. Он обеспечивает как содержание, так и функцию изображения.На изображении отображается слово «Продукты», а также ссылка на страницу продуктов на сайте. Изображение будет идентифицировано как находящееся внутри ссылки, поэтому «Ссылка на» не требуется, что делает вариант B плохим выбором. Поскольку изображение — единственный объект в ссылке, alt = "" никогда не подходит. Когда изображение содержит только текст, отображаемый текст обычно может использоваться как альтернативный текст.

Пример 6

Перейдите на следующую страницу, чтобы прочитать о президентстве Джорджа Вашингтона.

Какой атрибут alt будет наиболее подходящим для изображения синей стрелки в примере 6?

«следующая»
«следующая страница»
«Президентство Джорджа Вашингтона»
«Продолжить президентство Джорджа Вашингтона»

Опять же, это пример, на который нет однозначного наилучшего ответа. Фактически, в этом примере, вероятно, может быть уместен любой из вариантов.Вариантов A и B, вероятно, будет достаточно в большинстве случаев, если пользователю будет ясно, что в статье несколько страниц. Вариант C очень четко представляет функцию ссылки, но не указывает, что ссылка ведет на следующую страницу в серии. Вариант D может быть лучшим решением, поскольку он представляет функцию ссылки и сообщает, что она является частью серии страниц. Как указывалось ранее, определение наиболее подходящего альтернативного текста зависит от индивидуальной интерпретации, исходя из более широкого контекста рассматриваемого изображения.Описание этого изображения («стрелка») не подходит. Возможно, лучшим решением было бы разместить текст «Следующая страница» или аналогичный рядом с изображением и внутри ссылки, и в этом случае изображению можно было бы присвоить alt = "" .

Пример 7

Какой атрибут alt будет наиболее подходящим для изображения значка в примере 7? Обратите внимание, что значок находится внутри ссылки.

«Заявление о приеме на работу»
«PDF-файл»
«Значок PDF»
Содержание изображения представлено в контексте, поэтому ( alt = "" ) подходит.

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

Вариант A («Заявление о приеме на работу») дублируется окружающим текстом, поэтому это не лучший выбор.Вариант B — лучший выбор (хотя, возможно, будет достаточно даже более сжатого «PDF») — он четко предоставляет содержимое, которое представлено изображением — ссылка на файл PDF. Функция («Загрузить заявление о приеме на работу») представлена в тексте ссылки, поэтому ее не нужно снова включать в атрибут alt . Вариант C («значок PDF») действительно описывает само изображение, поэтому не подходит для данного контекста. В другом контексте может быть важно, чтобы пользователь знал, что это изображение действительно является значком.Вариант D (пустой текст или ) не предоставляет важную информацию, которую представляет изображение.

Здесь важно отметить, что если бы значок сам был ссылкой на документ, альтернативный текст должен обеспечивать полную альтернативу содержания и функции комбинации ссылка / изображение. Что-то вроде «Скачать заявление о приеме на работу в формате PDF». Самого по себе «формата PDF» будет недостаточно, особенно если есть несколько документов со ссылками такого рода.В этом случае пользователь программы чтения с экрана, переходящий по ссылкам на странице, услышит: «Формат PDF, формат PDF, формат PDF …». Как правило, если одно и то же изображение используется на странице несколько раз, чтобы ссылки на разные места, альтернативный текст внутри ссылки должен указывать на различия.

Декоративные изображения

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

Пример 8

Текст содержимого здесь.

Текст нижнего колонтитула здесь.

Каким будет соответствующий атрибут alt для изображения горизонтального разделителя в примере 8?

«декоративная строчка»
«Начало нижнего колонтитула»
«сепаратор»
alt = "" хватит

Поскольку изображение не передает контент и не находится внутри ссылки, вариант D является наиболее подходящим выбором.Описание изображения не подходит.

Примечание

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

Пример 9

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

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

Каким будет соответствующий атрибут alt для изображения в примере 9?

«рукопожатие»
«Бизнесмены пожимают друг другу руки для заключения контракта»
alt = "" хватит
«Гарантируем профессиональные услуги»

При анализе этого примера определите, представляет ли изображение важный контент.В этом случае я бы сказал, что это не так. В современной практике в Интернете многим таким изображениям дается описательный альтернативный текст , даже если изображения не содержат полезного контента. Вариант C ( alt = "" ), вероятно, будет наиболее подходящим в этом случае, потому что изображение не передает релевантный или важный контент. Варианты A и B описывают изображение, но не передают эквивалент того, что передает само изображение — что в данном случае является ничем или, возможно, только эмоциональным настроением или чувством.Другими словами, изображение в основном декоративное. Вариант D явно неверен, хотя стоит отметить, что дополнительная информация часто вводится в текст alt для предоставления дополнительной информации или предоставления дополнительных ключевых слов поисковым системам. Такая практика не является подходящим использованием альтернативного текста.

Примечание

Во многих случаях вы можете задать вопрос: «Если бы я не мог использовать это изображение, что бы я поставил на его место?» для определения подходящего альтернативного текста.

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

Расширенные изображения

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

Кнопки изображения формы

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

Карты изображений

При использовании клиентских карт изображений у основного изображения должен быть атрибут alt .Атрибут alt должен представлять любой контент, который представлен с изображением, но не представлен горячими точками карты изображения. Например, если у вас есть карта штата Нью-Йорк, на которой есть горячие точки для каждого региона, изображение может иметь значение атрибута alt «Регионы Нью-Йорка». Если основное изображение не передает контент, а в первую очередь является контейнером для горячих точек (например, панель навигации), тогда подходит alt = "" .

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

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

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

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

Фоновые изображения

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

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

Иногда для представления содержимого используются спрайты изображений или другие фоновые изображения. Хотя их обычно следует избегать, если они используются, любой контент, передаваемый через фоновое изображение, должен быть доступен в разметке страницы. Если вместо изображения значка PDF в примере 7 выше было представлено фоновое изображение CSS, вы могли бы использовать технику замены текста для представления содержимого в ссылке:

Загрузите заявление о приеме на работу (PDF)

Затем вы должны использовать CSS для размещения текста «(PDF)» (элемент span ) за пределами экрана.См. CSS в действии: невидимое содержимое только для пользователей программ чтения с экрана для получения дополнительных сведений. Зрячие пользователи увидят фоновое изображение PDF, а пользователи программ чтения с экрана услышат закадровый текст «(PDF)».

Логотипы

В Интернете распространена практика, когда основной логотип сайта также ссылается на домашнюю страницу сайта. Поскольку это довольно стандартная практика, обычно достаточно предоставить альтернативный текст для изображения, например название вашей компании ( alt = "Acme Company )».Идентификация логотипа как фактического логотипа ( alt = "Логотип компании Acme" ) обычно не требуется. Содержание и функции не являются «логотипом». Разработчики часто идентифицируют изображение как изображение для домашней страницы ( alt = "Домашняя страница компании Acme ), хотя, если изображение постоянно находится в начале страницы и альтернативный текст уместен, эта дополнительная информация не требуется.

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

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

Просмотреть данные о продажах

Примечание к longdesc

Атрибут longdesc был предназначен для ссылки на страницу с подробным описанием. Значение атрибута longdesc элемента img будет содержать URL-адрес страницы с подробным описанием, а НЕ — сам текст с подробным описанием. Однако longdesc работает только с некоторыми программами чтения с экрана. Кроме того, зрячие пользователи обычно не знают, что страница описания доступна.Кроме того, атрибут longdesc не является частью HTML5. По этим причинам не рекомендуется полагаться на longdesc при предоставлении доступа к этой странице с длинным описанием.

Мы представили обзор поддержки longdesc (проведен в сентябре 2015 г.).

Рисунок и figcaption

HTML5 представляет элемент figure , необязательно с figcaption , который является самодостаточным и обычно упоминается как единый блок из основного потока документа.Фигуру можно убрать из основного потока документа, не влияя на смысл документа.

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

Вы можете узнать больше о figure и figcaption в How do you figure?

Заключение

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

Добавление альтернативного текста к изображениям — один из самых простых способов доступа принципы, которые нужно изучить, и одни из самых сложных для освоения.
Альтернативный текст может быть предоставлен в атрибуте alt или в окружающем контексте изображения.
Каждое изображение должно иметь атрибут alt .
Альтернативный текст следует :
представляют СОДЕРЖАНИЕ и ФУНКЦИЮ изображения.
будьте лаконичны.
Альтернативный текст не должен :
быть избыточным (быть таким же, как смежный или основной текст).
используйте фразы «изображение…» или «изображение…».
Соответствующий альтернативный текст сильно зависит от контекста изображения.
Альтернативный текст функционального изображения (например, изображения в ссылке) должен описывать функция, а также содержание.
Для декоративных изображений по-прежнему требуется атрибут alt , но он должен быть пустым ( alt = "" ).

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

Что это и как работает?

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

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

Что такое замещающий текст для изображений?

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

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

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

Как показано в исходном коде справа, альтернативный текст для снимка экрана нашей панели инструментов Site Audit Tool:

Все просто, не правда ли?

Почему замещающий текст важен для SEO изображений?

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

Если в настоящее время вы создаете какой-либо контент для Интернета, скорее всего, вам понадобятся визуальные эффекты. С точки зрения пользователя, встроенные изображения на странице намного приятнее, чем нажатие на гиперссылку, и поисковая система Google догоняет это.

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

Это в основном связано с постоянным расширением Google в сторону визуальных исследований и с учетом новейших технологий машинного обучения и рендеринга AR.

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

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

Просмотрите свои изображения

с помощью инструмента аудита сайта

Как добавить замещающий текст к изображениям на вашей странице

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

Ознакомьтесь с нашим руководством по SEO изображений и тегам alt, чтобы узнать, как добавить замещающий текст к изображениям в WordPress, Shopify, Magento и Wix.

Как написать работающий замещающий текст

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

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

Опишите изображение как можно более объективно: в конечном итоге замещающий текст отображается, когда изображение не загружается, поэтому оно должно быть последовательным описанием изображения.
Обеспечьте контекст изображения: чтобы сканеры могли его точно проиндексировать.
Делайте это кратко и прямо: для более длинных описаний используйте атрибут longdesc (примечание: избегайте таких фраз, как «изображение» или «изображение» — это говорит само за себя, поскольку альтернативный текст сам по себе является описанием изображения).
Используйте ключевые слова, но избегайте переполнения ключевыми словами: все обычные правила хорошего качества контента применимы также к замещающему тексту. Заполнение ключевыми словами не работает для вашего контента и не будет работать для замещающего текста.

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

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

Как правило, обязательно добавляйте замещающий текст ко всем изображениям на странице. Сюда входят изображения, используемые в качестве кнопок. Альтернативный текст для кнопок может быть описанием типа «подать заявку» или «подписаться на рассылку новостей» и т. Д.

Примеры замещающего текста: От плохого к лучшему

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

Как написать замещающий текст для сайтов электронной торговли

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

Бесплатное коммерческое использование Pixabay

Хорошим альтернативным тегом при оптимизации изображений для веб-сайтов электронной коммерции может быть:

Выявление проблем с замещающим текстом изображения

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

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

Неработающие изображения

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

Инструмент Site Audit выделит причину неработающего изображения. Затем вам, вероятно, потребуется исправить:

URL с ошибкой или неверный путь к файлу: исправьте опечатку в URL; если файл изображения был перемещен, исправьте URL-адрес, чтобы он указывал на текущее местоположение.
Изображение больше не существует: если файл изображения был удален или поврежден, замените его на новый; или, если изображение больше не нужно, удалите его также из HTML-кода страницы.

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

Изображения без атрибутов Alt

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

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

Обратите внимание на пустой атрибут alt:

Измените это на:

Alt-текст FAQ

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

Как мне найти Alt-тег на странице?

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

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

Как прочитать замещающий текст в HTML-коде?

После того, как вы нажали «Осмотреть», вам нужно найти соответствующий тег HTML на панели, отображающей исходный код страницы.Альтернативному тексту предшествует тег, который читает «alt =», а за ним следует описание альтернативного текста.

Как узнать, есть ли в изображении замещающий текст?

При проверке изображения в исходном коде страницы, если тег alt после «alt =» показывает только две кавычки без содержимого между ними, тогда атрибут alt пуст, т. Е. Нет альтернативного текста.

Как добавить замещающий текст в файл JPG?

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

Можно ли использовать запятые и точки в Alt Текст?

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

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

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

Рекомендуемая максимальная длина замещающего текста для большинства программ чтения с экрана составляет 125 символов.

Важность замещающего текста для изображений

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

Просмотрите свои изображения

с помощью инструмента аудита сайта

Что такое замещающий текст (альтернативный текст)?

К
Альтернативный текст (альтернативный текст) — это слово или фраза, которые можно вставить в качестве атрибута в документ HTML (язык гипертекстовой разметки), чтобы сообщить посетителям веб-сайта о характере или содержании изображения.Альтернативный текст появляется в пустом поле, которое обычно содержит изображение. Альтернативный текст полезен, когда ссылка на изображение недоступна из-за неработающего или измененного URL-адреса или по какой-либо другой причине.
Атрибут alt начинается с последовательности символов alt = и затем содержит текст alt в кавычках. Например, атрибут alt = «Storm Surge» может появиться в теге изображения HTML для фотографии паводка во время урагана. В большинстве браузеров при наведении указателя мыши на изображение, содержащее атрибут alt, текст alt появляется в небольшом поле под указателем.
При выборе замещающего текста важно убедиться, что он рассказывает зрителям как можно больше об изображении, используя как можно меньше слов. Это соображение становится все более важным по мере того, как изображения становятся физически меньше. Если альтернативный текст слишком длинный, он может занять слишком много места, чтобы поместиться внутри прямоугольника изображения (который имеет тот же размер, что и изображение, если бы оно было видимым). Например, для маркированных ссылок, которые имеют внешние текстовые метки, замещающий текст будет только вызывать беспорядок. В таких случаях альтернативный текст может состоять из одного пробела между кавычками (alt = «») или две кавычки могут быть помещены вплотную друг к другу (alt = «»).
Alt-атрибуты всегда должны находиться внутри тегов изображений, даже если альтернативные блоки не нужны. Если автор веб-страницы не хочет, чтобы поле alt отображалось вместе с изображением, в тег изображения следует вставить пустой атрибут alt, чтобы гарантировать, что последовательность символов по умолчанию, показывающая веб-адрес изображения, не появится, когда зритель наводит курсор на значок указатель на изображение.
Альтернативный текст — хорошее место для размещения релевантных ключевых слов для улучшения поисковой оптимизации (SEO) вашего сайта.Однако, как и в случае с текстом в любом другом месте, не рекомендуется использовать набивку ключевых слов — практику вставки большого количества ключевых слов в веб-контент. Согласно Google, такая практика не только неэтична, но и неэффективна.
Последнее обновление: октябрь 2012 г.
Почему и как следует размещать замещающий текст на своем веб-сайте для аудитории с ослабленным зрением
28 мая 2019 г.
Добро пожаловать в серию статей о соответствии требованиям ADA, в которых наш эксперт делится советами с отельерами, стремящимися соблюдать Закон об американцах с ограниченными возможностями.Это третья часть серии блогов.
Часть 1. Как обеспечить соответствие веб-сайта вашего отеля требованиям ADA
Часть 3: Что делать, если ваш отель получил судебный иск о соответствии требованиям ADA
Визуальный контент играет огромную роль на всех сайтах отелей. Великолепные изображения позволяют отелю продемонстрировать свою собственность, оживить место назначения и предоставить важную информацию потенциальным гостям. Однако для пользователей с ослабленным зрением визуальный контент должен быть представлен по-другому.
Вот где появляется альтернативный текст.
В этой первой из трех статей о соответствии требованиям ADA мы объясняем, что такое альтернативный текст, почему важно соответствовать требованиям ADA и как правильно использовать его на веб-сайте вашего отеля.
Что такое замещающий текст?
Альтернативный текст (также известный как «альтернативные атрибуты» и «альтернативные описания») используется для описания изображений на вашем веб-сайте. Чаще всего он используется для такого контента, как фотографии, графика, анимация и видео.
Атрибут alt начинается с последовательности символов alt = и затем содержит текст alt в кавычках.Например: alt = «бизнесмены пьют коктейли»>
Однако большинство платформ веб-сайтов позволяют добавлять замещающий текст без ввода каких-либо специальных символов. Можно просто написать: бизнесменов пьют коктейли.
Ниже вы можете увидеть, как выглядит текстовое поле alt в Travel Tripper Web:
Почему замещающий текст имеет значение?
Добавление альтернативного текста часто используется в качестве тактики поисковой оптимизации. Поисковые системы не могут «видеть» изображения на вашем сайте.Добавляя замещающий текст, вы описываете изображение, чтобы его могли найти и понять сканеры поисковых систем, тем самым гарантируя, что изображение правильно проиндексировано.
Еще одна важная причина для включения альтернативного текста на ваш сайт — доступность. Когда слабовидящие или слепые пользователи посещают ваш веб-сайт, их программы чтения с экрана будут читать замещающий текст вслух, чтобы они понимали любые изображения на странице.
Важно помнить, что визуальный контент иногда используется вместо текста для предоставления информации или контекста.Если вы неправильно используете замещающий текст (или не используете его вообще), пользователи с ослабленным зрением могут пропустить важную часть вашего сообщения. Помимо ограниченного онлайн-опыта, это отсутствие заботы и внимания может вызвать негативное отношение к вашему бренду.
Имея это в виду, вот некоторые из лучших приемов использования замещающего текста, о которых следует помнить.
1. Будьте проще
Прежде всего, сохраняйте простой замещающий текст. Он должен давать краткое и точное описание того, что видно на фото.Как правило, старайтесь ограничить замещающий текст 125 символами или меньше — некоторые программы чтения с экрана перестанут читать замещающий текст после этого.
2. При необходимости будьте конкретны
Принимая во внимание вышеизложенное, бывают случаи, когда лучше сделать альтернативный текст более конкретным. Например, возможно, у вас есть изображение, рассказывающее историю или создающее настроение, которое невозможно передать с помощью базового описания. Возьмем следующий пример:
Самый простой альтернативный текст здесь: «пара на пляже»
Лучше альтернативный текст: «Пара, бегущая по пляжу на закате»
Наконец, если бы этот пляж находился прямо возле отеля, можно было бы включить и название отеля: «Пара, бегущая по пляжу в бутик-отеле на закате»
В этом последнем примере добавленная информация обеспечивает более богатый мысленный образ и релевантную информацию, которая помогает продать отель и вдохновить целевую аудиторию.
3. Декоративные изображения
Иногда изображения используются только в декоративных целях. Примером может служить декоративная рамка для улучшения визуального дизайна веб-страницы. В таком случае вы должны использовать «нулевой» (пустой) замещающий текст.
Пустой атрибут alt записывается так: alt = ””.
Когда программа чтения с экрана встречает изображение с пустым атрибутом alt, оно просто пропускает его. Если вы не укажете пустой атрибут alt, программа чтения с экрана прочитает имя файла вслух.Излишне говорить, что это может сильно отвлекать и мешать работе пользователей.
Руководство по обеспечению доступности веб-содержимого (WCAG) содержит подробную статью, в которой объясняется, как применить пустой атрибут alt к декоративным изображениям.
4. Альтернативный текст не должен начинаться с «изображения» или «изображения»
При использовании замещающего текста изображения не включайте: «изображение» или «изображение». Программы чтения с экрана автоматически объявляют изображение как изображение, просматривая исходный HTML-код статьи.Таким образом, альтернативный текст, такой как «Изображение бассейна», будет прочитан программой чтения с экрана как «Изображение, изображение бассейна».
5. Пишите для пользователя, а не только для SEO
Когда вы выбираете замещающий текст, убедитесь, что вы ориентируетесь на своих пользователей, а не на поисковые системы. Вот что Google говорит по этому поводу:
«Выбирая замещающий текст, сосредоточьтесь на создании полезного, насыщенного информацией содержания, которое использует ключевые слова надлежащим образом и согласуется с контекстом страницы.Избегайте заполнения атрибутов alt ключевыми словами (наполнение ключевыми словами), поскольку это отрицательно сказывается на пользовательском опыте и может привести к тому, что ваш сайт будет рассматриваться как спам ».
Таким образом, альтернативный текст не следует рассматривать исключительно как шанс улучшить ваше SEO. И, как объясняет Google, это потенциально может нанести вред вашему рейтингу в поисковой системе.
Конечно, бывают случаи, когда вам следует включить целевое ключевое слово. Например, вполне уместно упоминать название вашего отеля на изображениях вестибюля отеля.В конце концов, лучший совет — экономно использовать ключевые слова и включать их, когда они имеют отношение к изображению, которое вы описываете.
Рекомендации по использованию альтернативного текста
Каждое изображение на вашем веб-сайте должно иметь замещающий текст, описывающий его содержание. Это важно не только для целей SEO, но и для того, чтобы ваша слепая и слабовидящая аудитория получила наилучший пользовательский опыт. Чтобы узнать больше о соответствии требованиям ADA, ознакомьтесь с нашей недавней публикацией, в которой приведены дополнительные советы по обеспечению соответствия веб-сайта вашего отеля требованиям ADA.Следите за новостями из нашей последней серии статей о соответствии требованиям ADA!
Travel Tripper может работать с вами, чтобы обеспечить соответствие веб-сайта вашего отеля стандартам ADA. Запросите консультацию сегодня, чтобы получить дополнительную информацию и поддержку!
Нейт переулок
Нейт Лейн — старший глобальный директор по развитию бизнеса, разработке продуктов и агентским операциям с более чем 10-летним опытом стимулирования роста и инноваций в качестве «внутреннего предпринимателя».«Он заядлый велосипедист, любитель кофе и крафтового пива и гордый семьянин. Свяжитесь с ним по адресу nate.lane@pegs.com.
Категории: Веб-дизайн и взаимодействие с пользователем
Что такое альтернативные теги изображений?
Альтернативный текст для изображений — или альтернативный текст — это дескриптор скрытого текста изображения, который появляется для изображения, если страница не загружается или используется программа чтения с экрана. Программное обеспечение для чтения с экрана — это вспомогательные технологии, которые устно переводят текст для защиты от вирусов.Он был создан, чтобы помочь людям с ослабленным зрением получить оптимальное взаимодействие с пользователем. Однако альтернативные теги изображений также важны для здоровья вашего SEO и являются неотъемлемой частью веб-дизайна.
Вы можете улучшить видимость вашего сайта для слабовидящих пользователей, которые заходят на ваш сайт. Замещающий текст используется программами чтения с экрана, программами, используемыми людьми с ослабленным зрением, чтобы обеспечить этим пользователям удобство работы. Соответствие требованиям ADA и обеспечение доступности вашего сайта для пользователей с ограниченными возможностями будет иметь большое значение для вашего сайта и вашего бренда в плане увеличения целевой аудитории, улучшения вашего SEO и избежания штрафов.
Вы можете повысить рейтинг своих страниц и изображений, убедившись, что они полностью оптимизированы, включая замещающий текст. По словам Google, «добавив больше контекста к изображениям, результаты могут стать намного более полезными, что может привести к повышению качества трафика на ваш сайт».
Какова SEO-ценность альтернативных тегов изображений?
Хотя замещающий текст не является одним из самых важных факторов ранжирования SEO, он используется поисковыми системами для понимания содержания изображения и ранжирования в результатах поиска.
Чтобы правильно использовать замещающий текст, вы можете сделать несколько вещей.
Длина альтернативного текста. Как и длина метаописаний, длина замещающего текста изображения имеет значение. Хотя окончательного количества символов для замещающего текста нет, вам следует подумать о том, чтобы его длина не превышала 100 символов. Если ваш альтернативный текст длиннее 100 символов, это будет отображаться как ошибка при аудите сайта.
Описание изображения. Вы хотите четко описать изображение, используя замещающий текст. Поисковые системы будут использовать описание, чтобы определить, о чем изображение.Ваш замещающий текст должен передавать суть изображения, особенно для людей с ослабленным зрением.
Увеличить замещающий текст. Ваш замещающий текст присутствует, потому что это описание изображения. Поскольку у вас ограниченное количество символов для описания изображения, не тратьте их впустую, используя «изображение», «фото» или «изображение».
Избегайте переполнения ключевыми словами. Короче говоря, не используйте ключевые слова ради качественного SEO. Добавление слишком большого количества ключевых слов приведет к обратным результатам. Если у вас есть возможность использовать целевое ключевое слово, сделайте это.В противном случае остального содержания вашей страницы должно быть достаточно.
Редактирование замещающего текста для изображений
В зависимости от CMS, которую использует ваш сайт, процесс будет отличаться. Как правило, вы редактируете замещающий текст в поле, предоставленном после загрузки изображения, или путем непосредственного редактирования HTML. Помните, что замещающий текст отличается от текста подписи и заголовка изображения. Не перепутайте эти элементы и не оставьте поле замещающего текста пустым.
Хотя хороший замещающий текст изображения важен для SEO вашего изображения, его нетрудно придумать.Ниже приведены примеры хорошего и плохого альтернативного текста для BrightEdge.
Хороший пример альтернативного текста
«alt = Уточните свою стратегию SEO, используя эти 10 советов»
Пример неверного альтернативного текста
«alt = seo platform use seo platform seo basics top seo platform best seo platform for me»
В дополнение к оптимизации изображений замещающий текст обеспечивает дополнительный контекст для всей вашей страницы. Оптимизация замещающего текста создаст хороший пользовательский интерфейс как для пользователей, так и для поисковых систем, а также улучшит видимость вашего изображения для SEO.
.

Что такое Alt текст изображения и насколько он важен для SEO?

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

Зачем вообще заполнять alt теги?

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

Как добавить ALT-тег к изображениям – Справочный центр Vigbo

Виджет Фотография

Виджет Фотогалерея

Alt-тег для изображений товаров

Правила заполнения alt-тегов

Что такое Alt и Title для изображений и для чего они нужны

Атрибуты Alt и Title

Составление Alt и Title

Решение проблем с заполнением Alt и Title

Несколько снимков одного товара

Огромный ассортимент

Что такое alt-текст, и почему его нужно добавить прямо сейчас

Для Wix-сайта:

Для блога на Wix:

Alt-текст для SEO: как оптимизировать изображения

Чем важен alt-текст?

1. Alt-текст повышает уровень доступности

2. Alt-текст может улучшить «тематическую релевантность»

3. Alt-текст может повысить рейтинг страницы в Google Images

4. Alt-текст служит якорным текстом для ссылок-изображений

Как добавить alt-текст к изображениям

Нужно ли добавлять alt-текст ко всем изображениям?

Как составить хороший alt-текст

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

Как найти и исправить проблемы с атрибутами alt

Шаг 1. Определите страницы с наибольшим естественным трафиком

Шаг 2. Проверьте свои атрибуты alt

Шаг 3. Сделайте то же самое с другими страницами

Напоследок

Что такое alt тег? — TemplateMonster

Синтаксис

Пример

Как применять альт теги?

Значение альт тегов для SEO

Как прописать тег ALT — советы и примеры

Что такое атрибут ALT?

Синтаксис html описания картинки

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

А как же нужно прописывать теги для картинок?

Подпись под картинкой

Ранжирование картинок в Google

А что по поводу атрибута Title

Что такое замещающий текст? Как использовать элемент страницы для изображений

Назначение замещающего текста

Как добавить замещающий текст к изображению и увидеть его в HTML

Лучшие методы работы с альтернативным текстом

Что это такое, как это писать и почему это важно для SEO

Что такое замещающий текст?

Как добавить замещающий текст к изображениям

Как добавить замещающий текст в HubSpot CMS

Как добавить замещающий текст в WordPress CMS

3 примера замещающего текста изображений (хорошее и плохое)

1. Ключевое слово в сравнении с деталями

Неверный замещающий текст

Хороший альтернативный текст

2. Детали против специфики

Неверный замещающий текст

Хороший альтернативный текст

3.Специфика и контекст

Для статьи о посещении бизнес-школы

Неверный замещающий текст

Хороший альтернативный текст

Для веб-страницы образовательного программного обеспечения для учителей бизнес-школ

Неверный замещающий текст

Хороший альтернативный текст

Рекомендации по использованию замещающего текста изображения

Как альтернативный текст влияет на SEO

Почему важен замещающий текст изображения?

Доступность

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

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

Добавление замещающего текста изображения на ваш сайт

WebAIM: альтернативный текст

Введение

Основы альтернативного текста

Контекст — это все