Отраслевые решения
Отраслевые решения

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

19 марта 2018 (обновлено 23 февраля 2023)
100.3K
4 мин.

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

Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега <img>).

Что такое атрибут Alt для картинок

Атрибут Alt для картинок – это текст, описывающий изображение в html-теге <img>. Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).

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

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

не заполненный Alt тега img

А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега <img>:

заполненный Alt тега img

Атрибут Alt дает возможность узнать, что изображено на картинке, когда пользователь не может ее увидеть. Кроме того, прописанный текст в атрибуте Alt учитывается поисковыми роботами при индексации сайта. Наконец, оптимизация названий картинок и атрибутов Alt в теге <img> упрощает поиск изображений, например, в Яндекс или Google Картинках.

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

  1. Оптимальное количество слов – 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
  2. Обязательное условие – использование ключевых запросов.
  3. Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
  4. Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
  5. Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.

Атрибут Title для изображений

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

Атрибут Title для картинок

В html-коде заполненный атрибут Title для картинок выглядит так:

Заполненный атрибут Title для картинок

Правильно составленный атрибут Title даже помогает улучшить поведенческие факторы.

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

  1. Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
  2. Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.
  3. Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.

Пример правильного заполнения атрибутов Alt и Title для тега <img>

Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.

Пример правильного заполнения Alt и Title

При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».

Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».

Трудности при заполнении Alt и Title

  1. Несколько фотографий одного и того же товара

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

  2. Один и тот же товар, но разного цвета

    В данном случае можно порекомендовать добавлять название цвета в текст Alt и Title. Например, для платья зеленого цвета можно составить такой Alt: «женское зеленое платье», а для платья красного цвета – «женское красное платье».

    Alt и Title для одинаковых товаров, но разного цвета Alt и Title для одинаковых товаров, но разного цвета

  3. Большое количество товаров

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

    Заполнение Alt и Title для интернет-магазина

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

8
1
1
0
0

Мария Егорова

SEO-специалист сервиса 1PS.RU

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна

50+ нейросетей и инструментов для маркетологов и бизнеса

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

Забрать список

Популярные статьи

7 июня 2024

Как найти и устранить битые ссылки на сайте

Читать статью 8.2K 8 мин.
29 декабря 2020

Яндекс YATI: о новом алгоритме ранжирования простыми словами

Читать статью 23.1K 5 мин.
7 марта 2019

Coca-cola vs. Pepsi, BMW vs. Audi: войны брендов, или «мое кунг-фу круче, чем твое»

Читать статью 47.5K 12 мин.
22 сентября 2018

Что лучше: SEO-продвижение или контекстная реклама?

Читать статью 38.6K 10 мин.
4 октября 2024

Яндекс.Вордстат: инструкция по применению

Читать статью 303K 8 мин.
5 августа 2024

Что такое семантическое ядро и как его правильно составить

Читать статью 36.5K 12 мин.
8 сентября 2018

Еще 49 инструментов для интернет-маркетолога

Читать статью 43.2K 6 мин.
8 мая 2019

Будущее за мессенджерами: продвижение в WhatsApp, Viber и Telegram

Читать статью 33.3K 11 мин.
25 февраля 2020

Проверка адаптивности сайта для мобильных устройств с помощью Google Mobile-friendly

Читать статью 37K 5 мин.
20 января 2020

31 причина, почему у вас нет продаж

Читать статью 193.5K 19 мин.
18 октября 2019

Сколько стоит продвижение сайта в Яндекс и Google?

Читать статью 164.8K 11 мин.
18 апреля 2018

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

Читать статью 55.1K 3 мин.

Все популярные статьи

Закрытый клуб для маркетологов и владельцев бизнеса. Оставьте запрос на вступление!

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

250 000 участников сообщества каждую неделю получают письма от нас

Еженедельные полезные советы по продвижению бизнеса и эксклюзивные предложения абсолютно бесплатно – подайте заявку на вступление!

Услуги, которые могут вас заинтересовать

Полный глубокий анализ сайта, аналогов которого нет на рынке. Проверим сайт по более 40 параметрам, ошибки разметим по степени критичности.

Стоимость:
от 20 000

Привлечем новых клиентов текстами! Напишем качественные статьи, промаркируем их, разместим на сторонних площадках – вы получите большие охваты, рост узнаваемости и трафика на сайт.

Стоимость:
от 32 500

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

Стоимость:
от 9 900

Смотреть все услуги Попробовать бесплатно