Для чего атрибут alt

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

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

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

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

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

Картинка

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

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

Ссылка

Диаграмма

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

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

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

Figure и figcaption

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

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

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

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

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

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

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

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

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

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

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

Alt-текст — капля в море фронтенда

Всё остальное — в тренажёрах по вёрстке. 11 вводных глав бесплатно, и −30% на подписку в первую неделю.

Нажатие на кнопку — согласие на обработку персональных данных

Источник

Атрибуты Alt и Title для картинок. Ответы на популярные вопросы

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

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

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

В HTML-коде атрибут прописывается следующим образом:

Рассмотрим на примере.

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

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

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

Появляется следующий вопрос: что же нужно добавлять в Alt, чтобы он был максимально полезным и для пользователя, и для поисковика?

Как правильно заполнить атрибут Alt для картинок

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

Есть несколько вариантов заполнения атрибута:

Вариант 1. В качестве альтернативного текста используем «Фото №1», «Картинка 1» и т. д. Такой альтернативный текст не несёт никакой пользы, так как не даёт информации об изображении. Более того, как пишет Яндекс: «Картинки, у которых отсутствуют содержательные описания, не попадают в поиск, так как не могут быть найдены по запросам». Подробнее: «Индексирование картинок».

Вариант 2. Пишем в Alt «Собака с мячиком во рту». В этом случае мы описываем саму картинку, но нужно обратить внимание, что запрос «Собака с мячиком во рту» – информационный. Для описания изображения интернет-магазина он не подойдёт.

Вариант 3. Alt «Мячик для собак» – этот вариант нам больше подходит, но, так как мячиков в магазине может быть много, лучше уточнить запрос.

Вариант 4. Alt «Мячик для собак Humunga Chomp» – этот вариант оптимален для нас. Атрибут содержит название товара и его производителя. Если такого товара много, можно расширить Alt, используя цвет, название модели.

Вариант 5. Alt «Мячик для собак Humunga Chomp, игрушка Humunga Chomp, купить, недорого, Москва» – такой вариант может быть воспринят поисковой системой как спам и нужного результата не принесёт.

Из этих примеров следует, что атрибут Alt:

Зачем нужен атрибут Title?

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

На картинке выше видно, как отображается атрибут на странице.

В HTML-коде атрибут прописывается следующим образом:

Если картинка будет ссылкой, Яндекс рекомендует указывать Title в ссылке:

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

Основные требования к Title похожи на требования к Alt:

Зная это, перейдём к вопросам.

Ответы на популярные вопросы по Alt и Title

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

Не совсем. Alt – это альтернативное описание, которое будет выводиться вместо картинки, если у пользователя не отображаются изображения.

Обязательно ли заполнять атрибуты Alt и Title для картинок?

Если Вас интересует трафик из поиска по картинкам, Alt обязательно нужно заполнять, Title – по желанию.

Alt и Title должны быть разными или одинаковыми?

Существует два основных мнения по этому поводу:

1) Alt и Title должны быть уникальными;

2) атрибуты должны быть одинаковыми.

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

Яндекс по этому поводу пишет следующее:

Я считаю, что эти атрибуты могут быть одинаковыми. Главное, чтобы они давали чёткое структурированное описание вашей картинке.

Нужно ли прописывать возле атрибута Alt ещё и Title?

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

В Alt картинки надо ставить те же ключевые слова, что и у статьи, или другие?

Желательно. Главное, чтобы Alt был содержательным и описывал картинку.

Нужно ли прописывать в этих атрибутах ключевые слова?

Если эти ключевые слова будут описывать картинку, то да.

Как правильно писать атрибут Alt: кириллицей или латиницей?

Если ваш сайт на русском, заполняйте кириллицей.

Как писать – с большой или маленькой буквы?

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

Можно. Когда поисковики переиндексируют вашу страницу, они учтут эти описания.

Где заполнять Alt и Title?

Всё зависит от того, на какой CMS сделан ваш сайт.

Если это чистый HTML, то:

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

Если же ваш сайт на 1С-Битрикс, в дополнительных настройках параметров изображения есть поле для атрибута Alt. Атрибут Title будет подтягиваться из поля «Заголовок».

Нужно понимать, что всё индивидуально. Многое зависит от того, на какой CMS сделан ваш сайт и как настроен.

Стоит ли и возможно ли прописывать Alt и Title для своих картинок в комментариях?

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

Когда к картинкам пишу тайтл и альт на русском, на сайте высвечиваются иероглифы, что делать?

Такое происходит из-за кодировки. Нужно преобразовать текущую кодировку в UTF-8.

Итоги

Ещё раз пробежимся по тому, какими же должны быть Alt и Title.

Основные требования к атрибуту Alt:

Почему стоит заполнять Alt:

1. учитывается поисковыми системами при ранжировании картинок, а значит, если ваша картинка попадёт в ТОП, – это источник дополнительного трафика;

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

Почему стоит заполнять Title:

1. будет полезен пользователю, которому сложно разобраться, что изображено на картинке;
2. подсказки Title могут положительно отразиться на поведенческих показателях сайта.

Источник

Alt (атрибут)

Alt (Альт) – это атрибут для тега img, в котором устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке. Название «alt» HTML-тег получил от слова alternative – альтернативный вариант текста.

Зачем заполнять атрибут alt

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

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

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

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

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

Для достижения максимального результата от заполнения тегов alt нужно придерживаться следующих правил.

Источник

ALT и TITLE атрибуты: оптимизируем картинки

Блог / ALT и TITLE атрибуты: оптимизируем картинки

Поиск

Категории блога

ALT и TITLE атрибуты: оптимизируем картинки

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

Содержание статьи:

1. Что такое атрибут ALT

Атрибут Alt – это текстовое описание для изображения внутри HTML тега img src >. Данное описание (тег ALT для изображений) становиться видимым пользователю в случае невозможности загрузки картинки. На месте, где должна быть картинка пользователь увидит данное текстовое описание. Другими словами, ALT артибут – это альтернативный источник информации об изображение для пользователя.

Почему пользователь может не видеть картинку:

Поэтому, если ALT атрибут заполнен, пользователь увидит текстовое описание картинки:

В HTML-коде атрибут ALT имеет следующею конструкцию:

Почему ALT атрибут важен для заполнения:

2. Правильное заполнение атрибута ALT для картинок

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

3. Частые ошибки при заполнение атрибута ALT

Разберем наиболее частые ошибки и неправильное заполнение атрибута ALT изображения:

Ошибка 1. Отсутствие заполнения:

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

Ошибка 2. Отсутствие описания содержания изображения:

Ошибка 3. Переспам или перечисление ключевых слов:

4. Что такое атрибут TITLE

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

В HTML-коде атрибут TITLE имеет следующею конструкцию:

Как TITILE видит пользователь:

Как TITLE выглядит в коде:

Важно:
Google игнорирует тег TITLE в своих рекомендациях по оптимизации картинок. В свою очередь Яндекс. выводит конкретные рекомендации по его использованию тут :

Дополнительно:
Если картинка будет ссылкой – указываем атрибут для ссылки (рекомендация Яндекса):

5. Правильное заполнение атрибута TITLE

Какие требования для заполнения атрибута TITLE для картинки и как правильно заполнить данные. Объективно, основные требования аналогичны ALT:

6. Практические примеры заполнения ALT и TITLE

Примеры заполнения ALT атрибута:

Пример 1. Для карточек товаров в категории:
Т.к. товаров может быть тысячи, используем шаблон, например:

Где в ## – указаны переменные (такое решение, как правило, внедряется с помощью веб-программиста).

Пример 2. Для фотографий товара на странице товара:

При этом, на качественной странице товара, как правило, больше 3+ фотографии, поэтому, есть 2 варианта:

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

Пример 3. Для фотографий одного товара с разными цветами:

Оптимальный вариант – добавление переменной цвета:

Если же цвет уже есть в название товара, к примеру:

Это делать не нужно.

Также, нужно обратить внимание на пример от Google:

7. Как проверить отображение ALT атрибута

Как посмотреть ALT и TITLE атрибуты на сайте? Есть 2 простых способа это сделать:

Способ 1. Через браузер

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

Способ 2. Через программный код

Нажмите правой кнопкой миши на изображение – далее посмотреть код:

8. Ответы на частые вопросы

Alt и TITLE – это описание изображение?
Нет. ALT – это альтернативное описание картинки. Title – это дополнительная подсказка. Google не рекомендует делать длинные атрибуты.

Могут ли Alt и Title дублировать друг друга?
Дублирование содержания допустимо.
Согласоно комментариями Джона Мюллера (Google) – при дублирование атрибутом это безусловно будет считаться дубликатом, но в этом нет никакой проблемы.

Яндекс рекомендует делать TITLE уникальным (но ничего не указывает, относительно дублирования содержания атрибута ALT и TITLE):

Но в других источниках можно встретить, что дублирование допустимо:

Многие крупные магазины используют формат повторения H1, пример:

Обязательно ли заполнять атрибуты Alt и Title для картинок?
Что говорит Яндекс:

Что говорит Google:

Объективно, поисковые системы рекомендуют заполнять атрибуты. На практике, основным тегом атрибутом ALT, тайтл удобно использовать как дополнение для юзабилити. Поэтому, если вам нужен трафик из поиска по картинкам и у вас отсутствует альт – у вас будут трудности.

Писать с большой буквы или маленькой?
Это не имеет значения.

На каком языке заполнять атрибуты Alt и TITLE?
На том языке, на котром сайт. Если ваш сайт на русском языке – заполните атрибуты на русском.

Где обычно заполняются атрибуты Alt и TITLE?
Как правило, это делается с помочью системы управления контентом (CMS). Поэтому, все зависит от возможностей админки.

Какой ALT и TITLE должен быть у логотипа сайта
Исключительно название компании.

Через CMS:
К примеру, в WordPress есть предустановленное поле при загрузке изображения:

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

Атрибуты:
alt=”Альтернативное описание” title=”Дополнительная информация”

Источник

Атрибуты Alt и Title картинок: заполняем правильно

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

Немного истории

Для лучшего понимания назначения этих двух атрибутов предлагаю сперва вернуться во времена dial-up’а на 56 Кб/сек и оплаты за каждый мегабайт трафика. Тогда скорость интернета была по современным меркам практически нулевой и одна картинка на странице могла загружаться минуту. А если добавить сюда оплату за трафик, то загрузка становилась настоящей роскошью.

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

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

Что такое атрибут alt и title

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

Title картинки

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

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

Поэтому я рекомендую заполнять Title и тем самым повышать удобство вашего сайта.

Alt для картинок

Как и в случае с предыдущим атрибутом, в названии alt уже скрыта подсказка к расшифровке — alternative text или альтернативный текст. Данный атрибут является обязательным с точки зрения валидации и продвижения.

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

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

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

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

Атрибут alt не обязательно должен описывать непосредственно то, что изображено на картинке. Учитывайте контекст, в котором посетитель увидит этот текст. Например, на фотографии предупреждающего знака не стоит писать “треугольник с восклицательным знаком”. Вместо этого лучше написать “опасность” или “внимание”. Это добавит больше смысла, если только ваша страница не посвящена детальному описанию знаков.

Почему их нужно прописывать

Подводя итоги всего вышесказанного, вот две основные причины:

Польза от заполнения Alt:

Польза от заполнения Title:

В примере выше значение альта равно “Extract text”. Этот текст увидит посетитель при отключенных медиа. А вот атрибут тайтл в примере не заполнен, т.к. это он не обязателен.

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

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

Алгоритм определил с вероятностью 98%, что это — мопс. 97% что это — собака. И ещё с десяток менее точных, но все же подходящих определений. Неплохо, Google, совсем неплохо.

И возникает логичный вопрос:

А нужно ли заполнять альты, если поисковики и сами отлично распознают изображения?

Да и посетители все с включенными картинками в браузерах. И ответ — «Да, нужно». Сейчас объясню почему.

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

Именно поэтому надо помогать поисковикам определять что именно изображено на фото через заполнение альтернативного текста. Алгоритмы в свою очередь наградят вас за такое внимание к деталям более высокими позициями и релевантным трафиком. В этом видео гуру Google Matt Cutts на наглядном примере показывает почему нужно заполнять атрибут alt и как это делать правильно:

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

Советы по заполнению атрибута alt

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

Как придумать описание для картинки

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

«На этой фотографии изображен лабрадор, гуляющий на улице»

Источник