Атрибуты 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 самых полезных сервисов на основе искусственного интеллекта для продвижения бизнеса.

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

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

24 января 2023

16 бесплатных инструментов для SEO-продвижения

Читать статью 20.5K 13 мин.
20 марта 2023

Как умная камера от Яндекс облегчает жизнь пользователям

Читать статью 53K 4 мин.
9 января 2019

Хитрости написания title и description

Читать статью 146.7K 5 мин.
8 апреля 2019

Сим-сим, откройся: что важно знать о ключевых запросах

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

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

Читать статью 31.2K 20 мин.
11 января 2021

SEO-аудит сайта самостоятельно: анализ и проверка оптимизации сайта

Читать статью 103.1K 20 мин.
14 февраля 2024

24 способа увеличить посещаемость сайта

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

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

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

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

Читать статью 8.1K 8 мин.
6 февраля 2024

Инструкция, как добавить свою компанию в Яндекс.Карты

Читать статью 8.6K 4 мин.
13 июня 2019

Настройка robots.txt: что на сайте стоит спрятать от робота?

Читать статью 31.3K 5 мин.
4 февраля 2021

Оптимизация блога: что делать, чтобы статьи в блоге занимали высокие позиции

Читать статью 14.9K 11 мин.

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

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

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

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

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

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

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

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

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

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

Любые работы по оптимизации: составление сем. ядра, настройка вебмастеров, теги Title, Description, H1-H6, файлы robots.txt, sitemap и др.

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