Люди сегодня, открывая страницу, сначала «сканируют» ее целиком. Им не интересен текст, они хотят оценить оригинальность подачи и подход. Сплошной текст или некачественные картинки сразу отпугнут пользователя.
Будьте в курсе последних новостей партнерского маркетинга, статей, руководств и тематических исследований. Подпишитесь на наш Telegram канал сегодня!
На основании анализа особенностей поведения человека поисковые системы сформировали ряд критериев, по которым теперь анализируют картинки. Если говорить кратко, то они сводятся к улучшению качества контента в поисковой выдаче, чтобы изображения были красивыми, оригинальными, качественными и быстро грузились.
Визуальный контент несомненно заставляет пользователей проводить больше времени на странице и читать имеющийся текст. К тому же он служит дополнительным источником органического поискового трафика.
Качественно увеличить поисковый трафик с помощью картинок можно, оптимизировав фотографии. Давайте рассмотрим примеры картинок по коммерческим тематикам в Яндекс:
Что мы видим? Во-первых, изображения демонстрируются достаточно наглядно. Во-вторых, их расположение побуждает пользователей, обеспокоенных поиском ответа, нажимать на них. Давайте разберемся, какие запросы эффективнее всего продвигать при помощи картинок?
Мультизапросы. Когда пользователь добавляет к проблеме приставку «фото». Например:
- дизайн квартиры фото;
- пластиковые окна фото;
- кованые ворота фото.
И так далее в подобном ключе. Это запросы, связанные с информацией, где картинка часто важнее содержания.
Общее + событие. Работа с такими запросами может дать очень весомое увеличение трафика. Например, картинка, подходящая под запрос «сало», прибавила кулинарному сайту пару десятков переходов в сутки через Google.
События. Это настоящая «золотая жила». Такие картинки приводят больше всего клиентов на страницу. Это может быть Татьянин день, День защиты детей, день святого Валентина, 1 сентября и так далее. Те, с которыми пользователь знаком.
Формат
Начнем с того, что каждый пользователь имеет свои предпочтения относительно выбора браузера, а значит ваша картинка должна отображаться корректно везде. Форматы, приведенные ниже, поддерживаются всеми популярными браузерами:
- JPEG — самый выбираемый формат для растровой графики, сжатие происходит с потерями. Другими словами, если вы пересохраняете картинку по несколько раз, то вы ухудшаете её качество при каждом следующем действии.
- PNG — тоже формат для растровой графики с прозрачностью (альфа-каналом).
- GIF — ещё один формат растровой графики с анимацией, основанной на зацикливании смены кадров.
- SVG — а вот это уже векторная графика с анимацией. Отметим, что при увеличении изображения оно не теряет в качестве.
- WebP — особенность данного формата: меньший вес по сравнению с остальными. Однако чтобы картинка корректно отображалась во всех браузерах, нужно будет повозиться с полифиллами и добавить дополнительные версии изображений во всех форматах.
Доставка контента
Здесь подразумеваются пользователи, находящиеся вдали от сервера вашего сайта. Чтобы у них тоже все быстро загружалось, нужно подключить CDN (Content Delivery Network). Это значительно сокращает путь между сайтом и клиентом. Суть в том, что ваша картинка будет передаваться с ближайшего к человеку сервера.
Микроразметка
Поисковики не определяют, что именно на картинке, они смотрят её уникальность. А информацию об объекте, изображенном на снимке, вам нужно передавать самостоятельно. Можно использовать словарь Schema.org со схемой ImageObject, которая передает поисковым системам: ссылки на само изображение и миниатюру, описание, подпись и размеры (ширину, высоту). Все это добавляется к информации в поиске. К тому же микроразметка добавляет красиво оформленную карточку сайта, когда вы прикрепляете ссылку в социальных сетях. ImageObject оказывает заметное влияние на публикации в Facebook и ВК:
Добавить разметку можно через веб-мастера.
Самые высокие ставки по RU, BY, KZ от прямого рекламодателя FONBET PARTNERS!
К заливам!
Атрибуты Alt и Title
Alt — это своеобразный альтернативный текст для изображений. Для чего нужен: если картинка по какой-то причине не загрузилась, например, сбой соединения, тогда отобразится содержимое атрибута, которое считывает система для определения релевантности. К тому же в Яндексе этот атрибут используется для формирования заголовка.
Добавьте к этому программы для слабовидящих людей, которые озвучивают картинку по содержимому атрибута .
Как заполнить атрибут Alt правильно:
- Использовать только ключевые слова, избегать переспама;
- Содержимое нужно продумать до мельчайших деталей, так как оно должно точно описывать картинку. Советуем указывать для товара бренд, модель, характеристики (цвет, форма и так далее);
- Желательный объем — 150 символов;
- Если у вас несколько картинок, товар с разных сторон, то прописывать атрибуты нужно для каждого, добавляя номер и точное определение ракурса. Например: «фото 5», «вид сзади».
Атрибут Title. Он нужен, чтобы показывать пользователю подсказку, когда он наводит курсор на картинку. Можно добавлять дополнительную информацию, которая не будет занимать место на страничке. К тому же этот атрибут поисковики не используют для релевантности, но он влияет на ранжирование самой странице в поиске.
Как заполнить атрибут Title правильно:
- Атрибут = тому, что изображено;
- Описание должно быть компактным;
- Атрибут Title не равен атрибуту Alt;
- Не стоит заполнять атрибут у технических изображений (лого, баннеры). Перегруз всплывающими подсказками серьезно затрудняет навигацию по сайту.
Названия файлов
Самое главное правило, что в названии мы не допускаем никаких творческих выдумок, оно должно однозначно обозначать то, что у вас на картинке. Например, для фотографий на сайте интернет-магазина необходимо указывать в названии файлов не только данные о производителе и модели товара, но и уникальные характеристики товара (цвет, размер) и ракурс фотографии.
Посмотрите на пример: iphone-8-black-128gb-front.jpg. И без картинки мы можем себе представить, что на ней изображено, в отличие от имен типа: img_60791.
Карты для индексации
Такие ссылки, расположенные в карте сайта, нужны поисковикам, чтобы индексировать картинку. К тому же, если ваши изображения отображаются только при помощи JavaScript, то это единственный способ указать путь к таким файлам.
Для этого укажите все ссылки на все изображения, размещенные на странице в sitemap (контейнер <url>). Используем контейнер <image:image> с тегом <image:loc>.
Во всех контейнерах <url> не больше 1000 ссылок на изображения. Внутри контейнера <image:image> вы можете добавить дополнительную информацию об изображениях, например:
- <image:caption> — подпись для картинки;
- <image:geo_location> — место съемки;
- <image:title> — название самой картинки;
- <image:license> — URL лицензии картинки/фотографии.
Уникальность
Рассмотрим уникализацию с позиции продвижения страницы и с продвижения самого изображения для увеличения дополнительного трафика.
1. Продвижение страницы. На ранжирование страницы неуникальные картинки практически не влияют, поэтому если такие у вас есть, то это всегда лучше, чем ничего. Это способствует увеличению процента дочитывания за счет облегчения текстовых блоков, улучшает поведенческие факторы, НО: если само содержание является полезным, уникальным. Помните об этом обоюдоостром копье.
2. Продвижение картинок в поиске. Если вы хотите увеличить поисковый трафик за счёт поиска по картинкам, то уникальность и возраст становятся ключевыми показателями ранжирования. Другими словами, изображения из первоисточников всегда ранжируются выше. Если ваша картинка не уникальна, то она будет в блоке «похожие». В поисковой выдаче, скорее всего, отображаться не будет.
Самое время поговорить о качестве картинок. В Google и Яндекс вам придется найти оптимальное решение между размером и качеством. Всегда стоит помнить о людях по ту сторону экрана. Следите, чтобы графика была четкой и красивой, привлекательной. Кстати, некачественной является не только размытая, пиксельная картинка, но и та, которая не соответствует своему расположению по смыслу или своему описанию.
Вес и размер. Размер имеет значение. Он влияет на скорость загрузки, сама скорость влияет на ранжирование страницы. Много картинок — здорово, но это сильно тормозит загрузку страницы, а пользователи ждать не любят. Но и оставлять страницу голой не стоит. Просто воспользуйтесь инструментами для сжатия без потери качества, не забывайте при этом сверять вариант до и после.
Картинку изначально нужно создавать в том размере, в котором она будет представлена на вашем сайте. Чтобы браузеру было проще сканировать контент, прописывайте в CSS ширину и высоту изображения. Для экранов с ретиной добавляйте картинки в размере 2x и настраивайте отображение разных размеров одной и той же картинки для разных дисплеев. Иначе не миновать потери качества.
Теперь давайте на примерах посмотрим, как правильно оптимизировать картинки.
- Описание: должно быть кратким и содержательным, имя должно содержать вместо пробелов дефисы и латинницу: jzbdfjklJ_KSD5667.jpg — неправильно; go-pro.jpg или go-pro-hero-5-black-front.jpg (вариант для магазинов) — правильно. Используйте ключевые слова.
- Хранение: похожие картинки — одна дирекция. Если картинок много, то храните их на сервере: example.com/images/clothes/blue-jeans.jpg.
- Расположение: поисковики ранжируют по соответствию запрос-текст, рядом с которым размещено изображение.
- Бэклинки: также поисковики учитывают анкоры ссылок, поэтому с вниманием относитесь к внешним ссылкам на ваше изображение. Анкор равен содержанию.
- Sitemap: карты желательно иметь две: сайта и картинок (sitemap-image.xml)
Стоит отметить, что карта сайта для картинок подходит Google. Если же вы работаете в Яндексе, то в sitemap.xml нужно добавить два файла с картой картинок сайта и стандартную, со списком страниц (sitemap-pages.xml). Нужно добавить строчку в robots.txt для бота Яндекса, карту только со страницами сайта. Для Googlebot — sitemap.xml, в котором содержатся ссылки на обе карты.
Пример:
- User-agent: Googlebot
- Sitemap: https://example.com/sitemap.xml
- User-agent: Yandex
- Sitemap: https://example.com/sitemap-pages.xml
Где искать изображения
Вопрос, волнующий многих. Первое, о чем стоит помнить — авторские права. Несмотря на то, что многие используют чужие изображения, нужно понимать,что при обнаружении такого нарушения правообладатель может изрядно испортить вам карьеру и жизнь. Но не стоит отчаиваться, есть легальные хитрости. Найти подходящие картинки для коммерческих целей можно при помощи того же расширенного поиска в Гугл.
На самом деле в интернете много качественных фотостоков для коммерции. Даже если вы работаете с бесплатным вариантом, то стоковое изображение всегда можно сделать красивее и «аппетитнее» при помощи несложной ретуши. Например, вот это:
Превращается в это:
Чтобы так обработать картинку хватит бесплатных онлайн-сервисов, например: Canva или Crello.
Также мы подготовили для вас подборки сервисов для креативов и ИИ-сервисов для работы с изображениями, которые помогут создать уникальные картинки с нуля.
Итог
Применяя советы по эффективной оптимизации изображений и работая над внутренней перелинковкой сайта, вы в значительной степени можете повысить поисковый трафик при помощи картинок. Все вышеописанные шаги предельно просты, поэтому каждый из вас может самостоятельно внести необходимые изменения и увеличить трафик на ваш сайт. Не забывайте, что качество и ценность вашего контента — важные показатели для любых поисковым систем. Вперед к оптимизации!
Еще больше полезных материалов в наших Телеграм-каналах:
