Изображения стали неотъемлемой частью современных сайтов, в частности интернет-магазинов. Чтобы заинтересовать посетителей и подтолкнуть их на покупку каких-либо товаров или заказать услугу, клиент должен увидеть их фотографии. Более детально узнать о назначении картинок и как правильно их оформлять, вы можете, прочитав в нашей статье «Картинки для SEO. Где искать, как правильно размещать и оптимизировать.»
___________
Использование графического контента на интернет-ресурсе не только заинтересует посетителей, но и принесет дополнительный наплыв клиентов, которые нашли сайт по поиску изображений на Google и Yandex. Для этого следует лишь научиться грамотно применять атрибут Alt и Title, о чем вы и узнаете из данной статьи.
Атрибут Alt в теге img — что это?
Атрибут Alt — это описание картинки, находящееся в html-теге. Оно проявляется вместо фото, если по каким-то причинам изображение не отображается на странице.
Рассмотрим на сравнительном примере. Вот так будет отображаться незагруженное фото, если Alt оставить пустым:
А если написать в свойствах тега название товара, то вид поменяется:
То есть, Alt позволяет понять, что находится на фото, если посетитель не может открыть его. Также заполненный текст в упомянутом берется во внимание при индексировании поисковыми системами. Еще одно назначение — облегчение поиска картинок в Гугл или Yandex.
Как заполнять атрибут Alt для изображений
- Ключевые слова указываем обязательно. Для облегчения поиска их лучше прописывать в именительном падеже.
- Текст не должен быть больше 80 знаков, а по количеству — 3-5 слов. Советуем писать коротко и по сути, при этом содержательно.
- Старайтесь не спамить: не перегружайте многообразием ключевых запросов.
- Описание должно соответствовать тому, что представлено на фотографии.
Использование Title тега для картинок
Кроме того, оптимизация изображений зависит от заполнения данных в параметрах Тайтл. Этот атрибут отвечает за дополнительные сведения о картинке, появляющиеся во время наведения курсора мышки на фотографию:
Заполненный параметр Тайтл в html разметке выглядит следующим образом:
Кроме того, поведенческие факторы можно усовершенствовать благодаря корректному применению атрибута.
Правила составления Title для изображений
- Описание атрибута должно касаться того, что представлено на картинке. Не нужно придумывать текст, не соответствующий смыслу фото.
- Желательно делать короткие заголовки, ведь мало кому понравится читать длинные подсказки.
- Стоит использовать ключевые фразы. Но не используйте общие слова, например, «изображение», «фотография», так как это само собой понятно.
Пример грамотного составления атрибутов Alt и Title
Разберем на примере картинки с сайта строительной фирмы, как нужно заполнять рассматриваемые параметры.
При заполнении следует уделять внимание товару/услуге, которую предлагаете. В нашем случае рациональнее указать «строительство домов из оцилиндрованного бревна» вместо «стройка» или «дом».
Параметр Тайтл в этом случае можно немного поменять, прописав: «Стройка домов под ключ».
Сложности при составлении Alt и Title
1. Одинаковый товар представлен на нескольких фото.
Что делать онлайн-магазинам, которые предоставляют фото с разных ракурсов для лучшего обозрения своим пользователям? В такой ситуации лучше заполнить параметры Альт и Титл одинаково для группы изображений.
2.Продукт тот же, но отличия в расцветке.
Здесь советуем указывать название цвета. К примеру, для брюк коричневой расцветки напишите следующий Альт: «Женские брюки коричневые», а для синей расцветки — «Женские брюки синие».
3. Широкий ассортимент товаров
Для больших онлайн-магазинов часто становится проблемой значительное количество товаров и, соответственно, необходимость составления атрибутов Альт и Титл для каждого из изображений. Если прописывать их вручную, уйдет немало времени и сил. Поэтому существует возможность сделать автоматический вывод этих параметров, исходя из заголовка или наименования товара, а также дописать артикул продукции.
____________________________________________
С помощью грамотно составленных атрибутов Alt и Title к изображениям улучшится оптимизация картинок, а значит, и оптимизация в целом Вашего сайта в поисковых системах. Хотя, не следует пренебрегать и другими, не менее важными деталями, — названием, размером и качеством картинок.