На вашем сайте много изображений — от логотипа и иконок в меню до баннеров и иллюстраций к тексту на странице. Если сейчас они служат только для украшения — эта статья для вас.
Картинки не только разбавляют текстовый контент на сайте и помогают управлять вниманием пользователя. Еще они нужны для SEO: Яндекс и Google хуже ранжируют сайты без изображений, с поиска по картинкам можно получать дополнительный поисковый трафик, а оптимизация внутри сайта может улучшить поведенческие характеристики. Ниже разберемся, что для этого нужно сделать.
Примеры трафикодающих изображений
Форматы изображений для сайта
Пользователи заходят на ваш сайт с десятка разных браузеров. Чтобы изображения корректно отображались в каждом из них, нужно правильно выбрать формат.
Выбор зависит от типа изображения (векторное, растровое) и его особенностей — наличия сжатия, альфа-канала (отвечает за прозрачность) и возможности создания анимации.
Указанные ниже форматы поддерживаются всеми популярными браузерами, поэтому мы советуем использовать на сайте именно их.
JPEG — наиболее популярный формат растровой графики, осуществляет сжатие с потерями. Это значит, что сохраняя изображение по несколько раз, вы ещё больше ухудшаете его качество. Рекомендуем использовать для фотографий.
PNG — формат растровой графики, имеющий альфа-канал. Рекомендуем для изображений, в которых используется прозрачность.
GIF — формат растровой графики, поддерживает анимацию: несколько кадров, указание времени задержки кадров и их зацикливание. Рекомендуем использовать для растровой анимации (например, с кадрами из фильмов).
SVG — формат векторной графики, поддерживающий анимацию. В векторном формате изображения записываются в виде формул описывающих фигуры, а потому при увеличении изображение не теряет качества. Рекомендуем для иконок и векторной анимации.
Еще есть WebP — формат растровой графики с альфа-каналом, сжатием (как с потерями, так и без потерь) и анимацией. Отличительная особенность: меньший вес файла в сравнении с PNG и JPEG — это позволяет быстрее загружать файлы на сайте. Но он относится к современным мало поддерживаемым форматам. Чтобы WebP корректно отображался в разных браузерах, придется подключить соответствующие полифиллы и добавить альтернативные версии изображений в популярных форматах.
Данные актуальны на август 2019 года
Сеть доставки контента
Чтобы изображения и другие объемные файлы быстро загружались у пользователей, которые находятся вдали от сервера сайта, рекомендуем подключить CDN (Content Delivery Network). Для этого можно подключить сайт к сервису Cloudflare CDN.
Идея сетей доставки и дистрибуции содержимого предельно проста — сокращение пути между пользователем и сайтом (в данном случае — его изображениями).
Cloudflare CDN разместит изображения на нескольких серверах, расположенных в удалении друг от друга, а когда пользователь зайдет на сайт — изображение будет передаваться с ближайшего к нему сервера.
Микроразметка изображений
Поисковые системы не могут определить, что именно изображено на фотографии, а могут лишь определить ее уникальность. Поэтому вам необходимо передавать им информацию о содержании изображений самостоятельно.
Разметка изображений по словарю Schema.org с использованием схемы «ImageObject» позволяет передавать поисковикам:
ссылку на изображение,
ссылку на миниатюру изображения,
название и описание содержимого,
подпись к изображению,
параметры изображения (высоту и ширину).
Эти данные появляются в поиске по картинкам, а значит информация о сайте в нем выглядит лучше.
Дополнительный бонус — микроразметка изображений формирует более привлекательную карточку сайта при публикации ссылок в социальных сетях.
Так микроразметка ImageObject влияет на публикацию ссылки в Facebook:
Атрибут Alt — это альтернативный текст для картинок. Решает сразу несколько задач:
Если изображение на сайте не загрузилось из-за низкого качества соединения или недоступности файла, содержимое атрибута отобразится вместо изображения.Недоступное изображение без атрибута alt
Недоступное изображение с атрибутом alt
По этому атрибуту поисковые системы определяют содержимое изображения и его релевантность поисковым запросам.
Содержимое отображается в поиске по картинкам Google как описание изображения, а в Яндекс участвует в формировании заголовка.Пример сниппета в поиске по картинкам в Google … и в Яндекс
Специальные программы для слабовидящих людей (скринридеры) озвучивают содержимое атрибута при чтении текста на странице.
При заполнении атрибута alt придерживайтесь следующих рекомендаций:
По содержимому атрибута определяется релевантность поисковому запросу, поэтому в нем необходимо отразить соответствующие ключевые слова. Старайтесь избегать «переспама», не указывайте много ключевиков в одном атрибуте.
Содержимое атрибута должно максимально точно описывать изображение. В случае интернет-магазина рекомендуем указывать в атрибуте не только бренд и модель товара, но и цвет, используемые материалы и другие значимые для пользователей характеристики.
Не используйте длинное описание изображений, 120-150 символов — оптимальный объем.
Если на странице размещено несколько схожих изображений (например, фотографии товаров с нескольких ракурсов), пропишите уникальный атрибут для каждого из них, добавив номер фотографии или ракурс съемки — «фото 1», «фото 2», «вид спереди», «вид сбоку».
Title
Основное предназначение атрибута title — отображать подсказку при наведении курсора на изображение.
Атрибут позволяет предоставить посетителям сайта дополнительную информацию, не занимая место на странице, но поисковые системы не используют его для определения релевантности изображений или их ранжирования. Зато это может повлиять на ранжирование самой странице в поиске, за счет изменения поведенческих факторов на странице.
При формировании атрибута title, придерживайтесь следующих правил:
Атрибут должен соответствовать содержимому изображения.
Не стоит использовать длинное описание изображения — всплывающая подсказка большого размера может мешать навигации по странице.
Старайтесь не дублировать содержимое атрибута title и атрибута alt.
Не стоит заполнять атрибут у технических изображений — логотипов, пиктограмм меню, баннеров и т.д. Наличие всплывающих подсказок на каждом изображении сайта может затруднять навигацию по сайту.
Названия файлов
Название должно однозначно указывать на то, что изображено на картинке. Так поисковые системы смогут точнее определить ее содержимое.
Например, для фотографий на сайте интернет-магазина необходимо указывать в названии файлов не только данные о производителе и модели товара, но и уникальные характеристики товара (цвет, размер) и ракурс фотографии.
Смотрите: в названии файла «iphone-8-black-128gb-front.jpg» содержатся все ключевые характеристики товара, и оно полностью описывает содержимое самого изображения, в отличие от названий вида «img_60791» или «43194bcc5c5cddf99acff0.jpg».
При этом не рекомендуем использовать в названиях файлов кириллические символы и пробелы — лучше заменить их на латинские символы и тире.
Карты для индексации изображений
Ссылки на изображения в карте сайта помогают поисковым системам индексировать иллюстрации. А в некоторых случаях (например, если все изображения на сайте отображаются с использованием JavaScript) это единственная возможность указать поисковым системам на такие файлы.
Для этого необходимо указать ссылки на все изображения, размещенные на странице в файлах sitemap (в контейнере <url>), используя контейнер <image:image> с тегом <image:loc>.
В каждом контейнере <url> допускается размещение не более 1000 ссылок на изображения.
Также, внутри контейнера <image:image> можно разместить дополнительную информацию об изображениях:
Уникальность — важная часть оптимизации изображений.
Рассмотрим ее с точки зрения продвижения страниц, на которых размещены изображения, и с точки зрения продвижения самих картинок, для получения дополнительного трафика из поисковых систем.
Продвижение страниц
На текущий момент неуникальные изображения почти не влияют на ранжирование самой страницы в выдаче поисковых систем.
Поэтому наличие на странице даже неуникальных изображений — более выгодный вариант, чем их отсутствие. Это позволит облегчить текстовые блоки и улучшить поведенческие факторы самой страницы. Правда, в этом случае текст на странице должен быть уникальным и полезным.
Продвижение изображений в поиске по картинкам
Совершенно противоположная ситуация наблюдается при попытке получить дополнительный поисковый трафик из поиска по картинкам.
Здесь уникальность изображения и его возраст — один из факторов ранжирования. Картинки от первоисточников в большинстве случаев ранжируются выше остальных изображений.
Если изображения не уникальные — вероятность их отображения на странице поисковой выдачи минимальна, но они будут отображаться в блоке «Похожие картинки».
Блок «Похожие картинки»
Для проверки изображений на уникальность можно использовать как специальные сервисы (например, TinEye) и расширения для браузеров, так и стандартный функционал поисковых систем «Поиск по картинке».
В заключение
Используйте контент на сайте максимально эффективно, оптимизируйте все имеющиеся изображения. А после оптимизации не забудьте удостовериться, что изображения открыты в файле robots.txt для индексации (проверить это можно, например, через инструмент «Анализ robots.txt» в Яндекс.Вебмастере или «Инструмент проверки файла robots.txt» в Google Search Console) и регулярно следите за изменениями в трафике с поиска по картинкам.
Этой статьей с Callibri поделились специалисты агентства RACURS.
Комментарии