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

19 марта 2018 (обновлено 23 февраля 2023)
100.1K
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 самых полезных сервисов на основе искусственного интеллекта для продвижения бизнеса.

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

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

25 мая 2020

Полный гид по оптимизации мобильного сайта

Читать статью 18K 10 мин.
7 июня 2024

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

Читать статью 8.1K 8 мин.
16 апреля 2018

Законы РФ для владельцев сайтов: штрафовать, нельзя помиловать

Читать статью 31.2K 20 мин.
28 августа 2024

SEO-сопровождение сайта: кому это выгодно?

Читать статью 9.4K 5 мин.
19 января 2021

Новые факторы ранжирования Google: рассказываем, что будет важно в 2021 году

Читать статью 19.9K 10 мин.
18 сентября 2023

Эволюция не по Дарвину: все алгоритмы Яндекса с 2007 по 2023 год

Читать статью 33.7K 18 мин.
14 марта 2020

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

Читать статью 40K 17 мин.
11 ноября 2018

Что такое https: зачем и кому нужен, полная инструкция по переезду на HTTPS

Читать статью 58K 7 мин.
21 августа 2018

Метод AARRR, или 5 пиратских метрик для продвижения бизнеса

Читать статью 41.7K 9 мин.
5 апреля 2024

Пошаговое руководство, как вывести сайт на Tilda в топ поисковых систем

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

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

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

Онлайн-калькуляторы и прочие полезные фишки на сайте

Читать статью 17.5K 8 мин.

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

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

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

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

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

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

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

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

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

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

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

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

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