Атрибуты 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.
Посадочную страницу невозможно раскрыть без сопровождающих текст изображений. Например, если предлагаете услуги фотографии, то образцы ваших работ просто необходимы для демонстрации вашего уровня. Если вы продаете облачное ПО, то при помощи скриншотов вы сможете легко объяснить принципы работы в нем.
И самое главное, что делает alt-тег— это позволяет представить все ваши изображения в формате гиперссылок, открывая вашему сайту еще один источник привлечения посетителей.
Содержание статьи
Что такое alt-текст?
Также известный под названиями «alt-тег» и «alt-описание», alt — это тот текст, который вы можете видеть на месте изображения на странице сайта, если оно вдруг не загрузилось, другими словами — словесное описание изображения. Он помогает скринридерам пояснять смысл изображений для слабовидящих пользователей, а поисковым системам — лучше сканировать и ранжировать ваш сайт.
Вот, как выглядит данный атрибут для поисковиков:
Независимо от того, тратите вы время на SEO или нет, оптимизация альтернативного текста изображений — это ваш шанс сделать пользовательский опыт еще более комфортным для посетителей.
Как добавить альтернативный текст к изображениям
В редакторе LPgenerator при нажатии на изображение в теле страницы справа появляется выделяется окно, в котором можно создать или изменить альтернативный текст.
Альтернативный текст автоматически записывается в исходный HTML-код веб-страницы, и в некоторых CMS вы можете редактировать alt-тег изображения прямо там, если вдруг в вашем редакторе иначе это сделать невозможно. Вот пример alt-тега в исходном коде статьи:
При составлении альтернативных текстов для изображений главное — оставаться информативным и конкретным. Но имейте в виду, что это правило может потерять свой смысл, если альтернативный текст не учитывает контекст изображения. Alt-текст может оказаться не к месту в трех разных случаях.
3 ошибки при создании atl-текстов
1. Просто набор ключевых слов
Это пример не самого удачного альтернативного текста:
Что не так? Дело в том, что здесь альтернативный текст представляет собой простой набор ключевых слов, которые дают мало контекста. Эти слова могут быть важны для автора, но не Google.
Приведенный выше альтернативный текст сильно затрудняет для Googlе понимание того, как изображение соотносится с остальной частью страницы или статьи, в которой оно размещено, делая невозможным ранжирование изображения для релевантных низкочастотных запросов (longtail keywords), которые, как правило, вводятся наиболее заинтересованными в поиске пользователями.
Правильнее было бы снабдить изображение таким текстом:
«Сделать landing page за 25 минут бесплатно и с гарантией результата»
2. Номер, дата или другая техническая информация
Этот пример нарушает первое правило написания alt-текста — быть информативным. При этом в подписи к изображению мы видим предложение, которое могло бы стать alt текстом, но автор предпочел указать в теге чисто техническую информацию, которая не несет никакой пользы ни для посетителей, ни для поисковиков.
Важно помнить, что alt-текст, прежде всего, используется в процессе индексации, и в данном случае такое описание равносильно его отсутствию.
Вот еще один пример:
На этом сайте все изображения имеют один и тот же alt-текст.
3. Не учитывает контекст
Хорошо, когда контекст очевиден и подобрать правильное описание не так сложно. Но что делать, если ваше изображение не имеет контекста и вам попросту не на что опереться, чтобы дать ему описание?
В этом случае вам придется обратиться к заголовку статьи или лендинга, на которой размещена картинка. Ниже — несколько хороших примеров альтернативного текста для таких изображений.
Для статьи о дизайне лендингов:
Хорошое описательное предложение, а учитывая то, что картинка опубликована в статье о дизайне лендингов, она поможет поисковикам связать изображение с определенным разделом статьи.
Для страницы, посвященной фрилансерским услугам по созданию лендингов:
Этот текст отлично сочетается с изображением в блоке примеров работ конкретного дизайнера, но в данном контексте в описании неплохо бы указать еще и имя автора.
В этом примере указано имя заказчика лендинга, но, как и в предыдущем случае, не указано название компании, сделавшей дизайн.
Как писать эффективные альтернативные тексты
Альтернативный текст изображения должен быть конкретным, быть обращен к теме статьи или заголовку/блоку лендинга. Если у вас возникают трудности с написанием такого текста, ниже — несколько важных приемов, которые помогут вам с подбором наиболее эффективного варианта альтернативного текста:
Заключение
Итак, прежде чем начинать работу по оптимизации альтернативных текстов вашего лендинга или блога, для начала было бы неплохо провести общий аудит существующего контента и добавить описания в те изображения, которые до сей поры оставались без alt-тега.
Обратите внимание на то, как изменится объем поступающего трафика на те страницы, где вы изменили или добавили описания.
Чем больше изображений вы оптимизируете, тем более заметным будет результат.
Какие тексты использует робот для поиска изображений
Текст атрибута alt тега img
Атрибут alt — это альтернативный источник информации для пользователей, у которых показ изображений в браузере отключен. Если атрибут alt определен, то, когда показать картинку будет невозможно, на ее месте отобразится текст атрибута:
Без заданного атрибута alt изображение будет показано как пустое:
Особенно важно описание картинок с помощью атрибута alt для сайтов, контент которых составляют преимущественно изображения.
Задать атрибут alt можно следующим образом:
В атрибуте alt следует писать не все ключевые слова сайта или страницы, а лишь те, которые действительно относятся к картинке. Это поможет роботу точнее найти картинку, а пользователю Яндекса — выбрать ее в результатах поиска и перейти на ваш сайт. Оставлять атрибут alt пустым нежелательно.
Если вы добавляете несколько похожих изображений (например, фотографии товара из интернет-магазина), то стоит задать уникальные атрибуты alt (вид спереди, вид сзади).
Текст атрибута title тега img
Атрибут title предоставляет дополнительную информацию о картинке. Текст, заключенный в этом атрибуте, появляется при наведении курсора на картинку:
Задать атрибут title можно так:
Если картинка является ссылкой, то title лучше указывать в ссылке:
Другие тексты
Кроме значений атрибутов alt и title при поиске по картинкам используются следующие тексты:
тексты ссылок на картинки с других страниц и с других сайтов;
прилегающий к картинке текст — расположенный на странице в непосредственной близости к картинке;
тексты и заголовки коротких документов, обрамляющих одиночную картинку;
имена файлов и скриптов картинок, в том числе с учетом транслитерации и упрощенного подстрочного перевода.
Однако атрибуты alt и title являются наиболее универсальными, поэтому их стоит прописывать всегда.
