Оптимизируй их полностью: как собрать дополнительный поисковый трафик через картинки на сайте

Оптимизируй их полностью: как собрать дополнительный поисковый трафик через картинки на сайте

15 августа 2019 22 0 3 216
На вашем сайте много изображений — от логотипа и иконок в меню до баннеров и иллюстраций к тексту на странице. Если сейчас они служат только для украшения — эта статья для вас. 

Картинки не только разбавляют текстовый контент на сайте и помогают управлять вниманием пользователя. Еще они нужны для SEO: Яндекс и Google хуже ранжируют сайты без изображений, с поиска по картинкам можно получать дополнительный поисковый трафик, а оптимизация внутри сайта может улучшить поведенческие характеристики. Ниже разберемся, что для этого нужно сделать.
Картинки на сайте могут дать дополнительный трафик из поисковых систем
Примеры трафикодающих изображений

Форматы изображений для сайта

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

Выбор зависит от типа изображения (векторное, растровое) и его особенностей — наличия сжатия, альфа-канала (отвечает за прозрачность) и возможности создания анимации.

Указанные ниже форматы поддерживаются всеми популярными браузерами, поэтому мы советуем использовать на сайте именно их. JPEG — наиболее популярный формат растровой графики, осуществляет сжатие с потерями. Это значит, что сохраняя изображение по несколько раз, вы ещё больше ухудшаете его качество. Рекомендуем использовать для фотографий.

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

GIF — формат растровой графики, поддерживает анимацию: несколько кадров, указание времени задержки кадров и их зацикливание. Рекомендуем использовать для растровой анимации (например, с кадрами из фильмов).

SVG — формат векторной графики, поддерживающий анимацию. В векторном формате изображения записываются в виде формул описывающих фигуры, а потому при увеличении изображение не теряет качества. Рекомендуем для иконок и векторной анимации.

Еще есть WebP — формат растровой графики с альфа-каналом, сжатием (как с потерями, так и без потерь) и анимацией. Отличительная особенность: меньший вес файла в сравнении с PNG и JPEG — это позволяет быстрее загружать файлы на сайте. Но он относится к современным мало поддерживаемым форматам. Чтобы WebP корректно отображался в разных браузерах, придется подключить соответствующие полифиллы и добавить альтернативные версии изображений в популярных форматах.
Какой формат изображения лучше для сайта: таблица по WebP
Данные актуальны на август 2019 года

Сеть доставки контента

Чтобы изображения и другие объемные файлы быстро загружались у пользователей, которые находятся вдали от сервера сайта, рекомендуем подключить CDN (Content Delivery Network). Для этого можно подключить сайт к сервису Cloudflare CDN.

Идея сетей доставки и дистрибуции содержимого предельно проста — сокращение пути между пользователем и сайтом (в данном случае — его изображениями).

Cloudflare CDN разместит изображения на нескольких серверах, расположенных в удалении друг от друга, а когда пользователь зайдет на сайт — изображение будет передаваться с ближайшего к нему сервера.

Микроразметка изображений

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

Разметка изображений по словарю Schema.org с использованием схемы «ImageObject» позволяет передавать поисковикам:
  • ссылку на изображение,
  • ссылку на миниатюру изображения,
  • название и описание содержимого,
  • подпись к изображению,
  • параметры изображения (высоту и ширину).
Эти данные появляются в поиске по картинкам, а значит информация о сайте в нем выглядит лучше.

Дополнительный бонус — микроразметка изображений формирует более привлекательную карточку сайта при публикации ссылок в социальных сетях.

Так микроразметка ImageObject влияет на публикацию ссылки в Facebook:
Микроразметка изображений Schema.org передает данные о картинке в поиск Яндекс и Google
...и во ВКонтакте:
Микроразметка помогает сформировать красивый опен граф в соцсетях
Установить такую микроразметку поможет документация по внедрению Sсhema.org, передайте ее своему веб-мастеру.

Атрибуты Alt и Title

Alt

Атрибут Alt — это альтернативный текст для картинок. Решает сразу несколько задач:
  1. Если изображение на сайте не загрузилось из-за низкого качества соединения или недоступности файла, содержимое атрибута отобразится вместо изображения.
    Если картинка недоступна, без атрибута alt на сайте просто останется пустой квадрат
    Недоступное изображение без атрибута alt
  2. Заполненный атрибут alt показывается вместо изображения, если оно недоступно
    Недоступное изображение с атрибутом alt

  3. По этому атрибуту поисковые системы определяют содержимое изображения и его релевантность поисковым запросам.
  4. Содержимое отображается в поиске по картинкам Google как описание изображения, а в Яндекс участвует в формировании заголовка.
    Атрибут alt используется в описании изображения в поиске по картинкам Google
    Пример сниппета в поиске по картинкам в Google
    Атрибут alt тега img формирует заголовок в поиске по картинкам Яндекс
    … и в Яндекс

  5. Специальные программы для слабовидящих людей (скринридеры) озвучивают содержимое атрибута при чтении текста на странице.
При заполнении атрибута alt придерживайтесь следующих рекомендаций:
  • По содержимому атрибута определяется релевантность поисковому запросу, поэтому в нем необходимо отразить соответствующие ключевые слова. Старайтесь избегать «переспама», не указывайте много ключевиков в одном атрибуте.
  • Содержимое атрибута должно максимально точно описывать изображение. В случае интернет-магазина рекомендуем указывать в атрибуте не только бренд и модель товара, но и цвет, используемые материалы и другие значимые для пользователей характеристики.
  • Не используйте длинное описание изображений, 120-150 символов — оптимальный объем.
  • Если на странице размещено несколько схожих изображений (например, фотографии товаров с нескольких ракурсов), пропишите уникальный атрибут для каждого из них, добавив номер фотографии или ракурс съемки — «фото 1», «фото 2», «вид спереди», «вид сбоку».

Title

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

При формировании атрибута title, придерживайтесь следующих правил:
  • Атрибут должен соответствовать содержимому изображения.
  • Не стоит использовать длинное описание изображения — всплывающая подсказка большого размера может мешать навигации по странице.
  • Старайтесь не дублировать содержимое атрибута title и атрибута alt.
  • Не стоит заполнять атрибут у технических изображений — логотипов, пиктограмм меню, баннеров и т.д. Наличие всплывающих подсказок на каждом изображении сайта может затруднять навигацию по сайту.

Названия файлов

Название должно однозначно указывать на то, что изображено на картинке. Так поисковые системы смогут точнее определить ее содержимое.

Например, для фотографий на сайте интернет-магазина необходимо указывать в названии файлов не только данные о производителе и модели товара, но и уникальные характеристики товара (цвет, размер) и ракурс фотографии.

Смотрите: в названии файла «iphone-8-black-128gb-front.jpg» содержатся все ключевые характеристики товара, и оно полностью описывает содержимое самого изображения, в отличие от названий вида «img_60791» или «43194bcc5c5cddf99acff0.jpg».

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

Карты для индексации изображений

Ссылки на изображения в карте сайта помогают поисковым системам индексировать иллюстрации. А в некоторых случаях (например, если все изображения на сайте отображаются с использованием JavaScript) это единственная возможность указать поисковым системам на такие файлы.

Для этого необходимо указать ссылки на все изображения, размещенные на странице в файлах sitemap (в контейнере <url>), используя контейнер <image:image> с тегом <image:loc>.
Sitemap для изображений помогает поисковым системам индексировать картинки на сайте
В каждом контейнере <url> допускается размещение не более 1000 ссылок на изображения.

Также, внутри контейнера <image:image> можно разместить дополнительную информацию об изображениях:

<image:caption> — подпись для изображения;
<image:geo_location> — место съемки фотографии;
<image:title> — название изображения;
<image:license> — URL лицензии изображения.

Требования и рекомендации поисковых систем о создании карт с изображениями можно изучить в Документации Google и Документации Яндекс

Уникальность изображений

Уникальность — важная часть оптимизации изображений.

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

Продвижение страниц

На текущий момент неуникальные изображения почти не влияют на ранжирование самой страницы в выдаче поисковых систем.

Поэтому наличие на странице даже неуникальных изображений — более выгодный вариант, чем их отсутствие. Это позволит облегчить текстовые блоки и улучшить поведенческие факторы самой страницы. Правда, в этом случае текст на странице должен быть уникальным и полезным.

Продвижение изображений в поиске по картинкам

Совершенно противоположная ситуация наблюдается при попытке получить дополнительный поисковый трафик из поиска по картинкам.

Здесь уникальность изображения и его возраст — один из факторов ранжирования. Картинки от первоисточников в большинстве случаев ранжируются выше остальных изображений.

Если изображения не уникальные — вероятность их отображения на странице поисковой выдачи минимальна, но они будут отображаться в блоке «Похожие картинки».
Так выглядит продвижение сайта с помощью картинок в Яндекс и Google
Блок «Похожие картинки»
Для проверки изображений на уникальность можно использовать как специальные сервисы (например, TinEye) и расширения для браузеров, так и стандартный функционал поисковых систем «Поиск по картинке».
Проверка изображения на уникальность проводится через поиск по картинке

В заключение

Используйте контент на сайте максимально эффективно, оптимизируйте все имеющиеся изображения. А после оптимизации не забудьте удостовериться, что изображения открыты в файле robots.txt для индексации (проверить это можно, например, через инструмент «Анализ robots.txt» в Яндекс.Вебмастере или «Инструмент проверки файла robots.txt» в Google Search Console) и регулярно следите за изменениями в трафике с поиска по картинкам.

Этой статьей с Callibri поделились специалисты агентства RACURS.

Поделиться:

Комментарии

Советуем прочитать:

Почему нельзя оценивать эффективность SEO только по росту позиций или трафика? И как вообще ее оценить?
14 18.10.2018
Микроразметка Open Graph: зачем она контент-маркетингу и как её настроить
10 29.11.2018
Почему агентство не сделает сайт за неделю? Разбираем сроки и как вы можете все ускорить
14 28.03.2019