Зачем нужен атрибут Alt?
Во времена медленного Интернета Alt нужен был для информации об изображениях. Если они не загружались, на их месте выводился альтернативный текст из атрибута. И сейчас, если картинки не работают или отключены, вместо них мы видим пустую рамку с кратким текстовым описанием.
Если Alt не заполнить вообще, на месте изображения будет просто квадрат без описания. Но это не самое обидное. Важнее то, что поисковый робот не определит, с каким запросом связана картинка, и она не попадет в выдачу по изображениям.
Как Alt и Title влияют на SEO
В некоторых тематиках трафик из картинок по средне- и низкочастотным запросам может быть очень значительным и даже превышать трафик из основной выдачи.
Соответственно, чтобы изображение попало в выдачу по этим запросам, их надо указывать в строке Alt.
Со стороны это выглядит так. Ваш потенциальный посетитель задает запрос во вкладке «картинки» или с уточнением «фото». Для ответа поисковый робот проверяет не только названия файлов, текст и ссылки. Когда краулер обходит ваш сайт, он анализирует в том числе и содержание атрибутов. Если они заполнены корректно и сайт заслуживает доверия, изображение попадает в выдачу. Если в строке Alt нет соответствующих ключевых слов (или вообще никаких), картинка окажется в результатах намного ниже, чем могла бы.
Яндекс постоянно дорабатывает поиск по изображениям. Если запрос связан с конкретным товаром, в превью могут быть адреса сайтов, цены и подпись, которая формируется в том числе за счет атрибутов.
При определении релевантности робот также учитывает «альт», точнее, запросы из текста атрибута. Это важно, когда нам нужно подняться в выдаче максимально высоко — при жесткой конкуренции имеет значение каждая деталь.
Последнее и самое интересное: наличие изображений относится к важным коммерческим факторам ранжирования. Это критично прежде всего для интернет-магазинов. Нужно не только загрузить сами фотографии, но и обозначить для поисковой системы, с какими запросами они связаны. Без этого позиции будут гораздо ниже желаемых.
Атрибуты изображений — такая же важная часть seo-стратегии, как, например, алгоритм, как сделать перелинковку. При сомнениях и колебаниях можно начать с эксперимента на 2-3 страницах и через месяц оценить результаты: в частности, наличие картинок в выдаче по определенным запросам.
Зачем нужен атрибут Title?
Если говорить очень упрощенно, Alt — это название изображения и его описание для поисковых систем. Title мы пишем для пользователей, поисковый робот его не требует. Но именно Title виден посетителям при наведении как пояснение к картинке. Яндекс уточняет в Справке, что лучше не оставлять тайтл пустым и не делать его одинаковым для всех иллюстраций. Остальное — на усмотрение вебмастера. Чаще всего в тексте Title пишут название товара, услуги или статьи. Иногда туда добавляют ключевой запрос. Можно также дублировать Alt, если он корректно составлен и описывает содержание изображения.
Как правильно заполнять атрибуты
Как прописать Alt для картинок, фото или рисунка
В теге изображения после атрибута нужно добавить описание, которое увидят поисковые системы. В готовом виде фрагмент кода будет выглядеть примерно так:
<div class="list_services_img">
<span>Технология</span>
<h3>Бетонирование площадки и дорожек с укладкой плитки</h3>
<img src="https://ramplitstroy.ru/wp-content/uploads/2022/04/services7-optimized.png" alt="Бетонирование площадки и дорожек с укладкой плитки" ></div>
Между div class и img src могут быть любые строки, главное — точно заполнить тег для изображения.
Строка для более подробного альтернативного варианта, когда в теге можно писать размеры картинки, будет выглядеть так:
<img border="0" alt="Бетонирование площадки и дорожек с укладкой плитки" src="/wp-content/uploads/2022/04/services7-optimized.png"
width="50" height="50">Интент запроса в строке Alt должен соответствовать контенту страницы. Для товаров и услуг мы формируем коммерческие фразы, преимущественно с названием товара или услуги, очень часто — с основными характеристиками (как видно в примере). В статьях и новостях атрибуты заполняются с учетом тематики и информационного посыла. Чаще всего это название статьи либо подпись к фото.
Маленькие, но важные детали
Alt не должен состоять только из ключевых слов: надо описать содержимое картинки как можно точнее. Если на фото породистый кот, текст «купить кошку» будет слишком общим и потому неподходящим. А вот «взрослый кот мейн-кун базового окраса «черный мрамор» — предельно конкретное описание, понятное и роботам, и людям.
Слова «купить», «заказать», «цена» и т.п. можно использовать только точечно: в частности, если иллюстрация с ними размещается в прайсе. В других случаях они будут восприниматься поисковыми системами как переспам.
Длина текста должна быть разумной — до 10 слов, особенно при коротком запросе.
При заполнении атрибутов для большого количества фото рекомендуем сделать табличку с ключевыми словами перед тем, как составить ТЗ для программиста. Можно сформировать для автоматического заполнения шаблоны с переменными или определить части страницы, откуда будут подтягиваться Alt, например,
.
Как прописать Title для картинок
Чтобы Title отображался на сайте корректно, нужно добавить текст в атрибут тега img src.
<div class="list_services_img">
<span>Технология</span>
<h3>Бетонирование площадки и дорожек с укладкой плитки</h3>
<img src="https://ramplitstroy.ru/wp-content/uploads/2022/04/services7-optimized.png" alt="Бетонирование площадки и дорожек с укладкой плитки" title="Бетонирование площадки и дорожек с укладкой плитки"> </div>Внешний вид картинки не изменится, но при наведении на нее мышки пользователь увидит фразу из поля Title.
Для фото, которое загружается по ссылке, заполненный Title будет выглядеть так:
<a href="/images/mercedes/kata1221.jpg"> <img src="/images/mercedes/kata1221.jpg" alt="Удаление катализатора Mercedes-Benz-Benz E-класс W211" title="Удаление катализатора Mercedes-Benz Е-класс W211">
</a>
Альт и тайтл можно указывать не только для основного фото. Картинки могут относиться и к другим элементам страницы, например, к выпадающим пунктам меню.
Пример html-кода:
<div class="nav-sites__dropdown-image">
<img src="/upload/uf/8ec/8ecd5b913f5e277e2ff9c7ba7857ab22.svg" alt="" title="Печать на футболках" style="width: 65px; height: 65px;"></div>В данном случае в теге не указано значение Alt, так как страница ранжируется по другим запросам, но прописан Title, чтобы понятно было, к чему относится фото.
В некоторых CMS можно указывать атрибуты не вручную, а через панель управления. Например, в WordPress интерфейс позволяет заполнять альт и Title, просто кликнув на картинку.
В целом принципы правильного заполнения атрибутов можно описать так:
| Хороший пример | Плохой пример | |
| Alt | alt=Фотопечать на плитке | alt=img_1720 |
| Title | Title=Пример фотопечати на плитке | Title=pechat5 |
Можно ли делать атрибуты одинаковыми?
Текст из Title может полностью дублировать Alt. Поисковые системы этого не запрещают и нарушением не считают. Но нужно помнить, что содержание Title видно всем посетителям сайта, когда они наводят курсор на картинку. Значит, оно должно быть понятным и легко читаемым.
Чего точно не стоит делать — одинаково заполнять Alt для всех иллюстраций на странице. Тогда в них будет только один запрос, а это некорректно с точки зрения оптимизации. То же касается и добавления множества ключевых запросов. Поисковая система не будет учитывать такие атрибуты при оценке релевантности. Они будут отфильтрованы роботами. В итоге позиции по запросам будут хуже, а иллюстрации со страницы не попадут в Яндекс.Картинки.
Когда (и где) Alt-текст нужен обязательно
Интернет-магазины и маркетплейсы
В карточках необходимо заполнить Alt для фотографий товаров. Он должен строго соответствовать ключевому слову. Как правило, это название товара, которое также размещается в Title страницы и заголовке Н1.
<div class="tcp-slide"><img src="//techport-st.cdn.ngenix.net/_mod_files/ce_images/eshop/p77917-0mw.jpg" class="product_image" alt="Газовая плита GEFEST 3200-08" itemprop="image" width="300" height="300" /></div>
Источник кода и фото: techport.ru
В карточки товаров можно добавлять в качестве иллюстраций фото из каталогов, в том числе официальных брендовых. Это не воспрещается и не наказывается.
Сайты услуг
На страницах услуг почти всегда есть тематические иллюстрации. Для них тоже нужно прописывать атрибуты. Например, вы работаете со студией фотопечати. Пользователи ищут эту услугу не только по текстовым запросам, но и по картинкам, поэтому разумно будет использовать ключевые слова.
Строка с тегом img src при необходимости вставляется в соответствующий контейнер. Как минимум для одной фотографии в ней нужно прописать название услуги.
<div class="list_services_img">
<h3>Укладка асфальта на подготовленную подушку с материалами под ключ</h3>
<img src="https://ramplitstroy.ru/wp-content/uploads/2022/04/services2-optimized.png" alt="Укладка асфальта на подготовленную подушку с материалами под ключ" title="Укладка асфальта на подготовленную подушку с материалами под ключ">
</div>
Информационные сайты
В каждом материале, как правило, есть фото и инфографика. Они всегда связаны по смыслу с содержимым статьи, поэтому для них тоже надо заполнять альтернативный текст. Для одной из картинок в тегах должен быть указан основной запрос, под который оптимизирована страница. Он учитывается при определении релевантности и ранжировании.
Пример html-кода:
<img src="/ftproot/textphotos/2022/07/01/p700.jpg" title="Экспортная пошлина на пшеницу из РФ с 6 июля составит 4600 руб. за тонну" alt="Экспортная пошлина на пшеницу из РФ с 6 июля составит 4600 руб. за тонну" />
Источник кода и фото: www.interfax.ru
Логотипы
Alt логотипа должен быть лаконичным, содержать в себе название сайта или компании и соответствующий общетематический запрос из двух или трех слов.
В примере — фрагмент кода для логотипа Московской Биржи. Название компании в этом случае и есть общетематический запрос. Как правило, тайтлы в таких случаях тоже совпадают с названием организации.
<a href="/" class="header-content-bottom__logo-outer"><img src="/assets-redesign-2021/images/logo-ru.svg" alt="Московская биржа" class="header-content-bottom__logo"></a>Когда писать alt-текст не нужно
Для баннера на первом экране — чаще всего это динамический элемент.
Для сквозных картинок, которые отображаются на всех страницах. Единственное исключение — логотип.
Альт не нужен навигационным элементам: иконкам, стрелочкам и прочим аналогичным символам.
Альт не заполняется для фоновых картинок, которые задаются стилями. Это изображения, которые нельзя открыть в отдельной вкладке или посмотреть путь при клике правой кнопкой.
Заключение
Проверить, как отображается текст из атрибутов, можно тремя способами.
-
01.
Через запрет изображений. Отключите картинки в настройках браузера и посмотрите, есть ли на их месте необходимые фразы.
-
02.
Через поиск в коде. Откройте вкладку “просмотр кода страницы” и введите в строку поиска название атрибута. В коде будут выделены цветом все места, где нашлось нужное слово.
-
03.
С помощью дополнительных сервисов: например, онлайн через Alt Tag Checker.
Еще один вариант — скачать парсер. Screaming Frog сканирует сайты и выгружает не только содержимое атрибутов, но и количество ссылок на картинки. Существуют также расширения для браузеров, которые после установки показывают атрибуты для картинок — в частности, Alt Attribute Viewer для Chrome. Каждый SEO-специалист выбирает удобный для него способ.
Страница и сами изображения должны быть открыты к индексированию в robots.txt. Проверить, находит ли их поисковая система, можно с помощью оператора site. Его нужно ввести в строку поиска слитно с адресом сайта, например, site:101kote.ru. В выдаче будут все проиндексированные иллюстрации с заданного сайта. При этом в заголовке выдачи будет написано, сколько картинок нашлось именно на этом ресурсе. Так вы сможете определить общее количество проиндексированных изображений на сайте.
Альтернативный текст из атрибутов — это основная обязательная информация для поисковых систем. Без него Яндекс и Google не ранжируют фото и рисунки. Для SEO-оптимизации это важно как часть хорошо работающей тактики (аналогично, например, микроразметке сайта). Если относиться к ним по остаточному принципу, мы проигрываем конкурентам, у которых они проработаны лучше. Если же заполнять Alt для всех изображений на странице, мы улучшаем не только шансы попасть в выдачу по картинкам, но и коммерческие факторы сайта.
Загрузка...
