Оптимизация и продвижение картинок: как увеличить посещаемость за счёт изображений

Копируете изображения для сайта из «Яндекс.Картинок»? «Отличная» работа! Если раньше вы сомневались по поводу того, получаете ли максимум трафика, теперь можете быть уверены: не получаете! Вы точно упускаете долю, которая могла бы идти по картинкам. Согласно замерам SEO-экспериментаторов, эта доля может составлять до 10%.

Даже если 10 потерянных процентов вас особо не беспокоят, должно обеспокоить то, что за кражу изображений в интернете можно «попасть» на крупную сумму. Пока такие случаи – редкость, однако прецеденты уже были.

Нужно ли оптимизировать картинки

Нужно ли оптимизировать картинки - картинка

Есть минимум 3 причины заняться оптимизацией картинок на сайте:

  • Хочу получать дополнительный трафик. Этот трафик имеет небольшую ценность для блогов, однако для интернет-магазинов – вполне себе. Пользователи нередко ищут подходящий товар именно в картинках.

На заметку! В 2018 году Samsung заключила с «Яндекс.Маркет» соглашение, по которому технология корейцев «Камера Bixby» будет самостоятельно подбирать для пользователя подходящие товары в «Маркете» по фото. Выглядит это так: вам понравились кроссы друга, вы наводите на них «камеру Bixby», удерживаете несколько секунд, и технология советует магазины, где можно купить такие. Как производится поиск товара в интернете в данном случае? Именно по картинкам.

  • Не хочу идти под суд. Вас не посадят за кражу картинок. Однако, если правообладатель задастся целью наказать вас и проявит упорство, штраф может оказаться нешуточным. Например, в 2016 году интернет-магазин мебели из Перми не стал заморачиваться и просто скачал 82 фото с сайта аналогичного магазина из Екатеринбурга. Правообладатель подал в суд и выиграл, отсудив 820 тыс. рублей – по 10 тыс. рублей за фото. На деньги «попали» сама компания и администратор её сайта.
  • Не хочу, чтобы картинки мешали SEO. Неоптимизированные картинки негативно воздействует на скорость загрузки страницы – страница загружается дольше. Это серьёзно влияет на трафик. Согласно исследованию Google, увеличение времени загрузки с 0,4 до 0,9 секунд приводит к снижению трафика сайта на 20%.

Требования поисковиков к картинкам

Требования поисковиков к картинкам - картинка

Поисковые системы предъявляют к картинкам требования по следующим критериям.

Формат

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

Google

«Яндекс»

BMP

JPEG

GIF

GIF

JPEG

PNG

PNG

 

SVG

 

WebP

 

У Google своё мнение по этому поводу. Он называет современными форматы JPEG 2000, JPEG XR, WebP. Google обязательно посоветует сконвертировать картинки на странице в эти форматы, если вы воспользуетесь программой для оценки скорости загрузки PageSpeed Insights.

Современные форматы изображений - скриншот

Конечно, глупо спорить с компанией, которой мы в рамках SEO пытаемся угодить всеми средствами. Однако в данном случае смысл есть. Проблема перечисленных Google форматов такова: они «читаются» не всеми браузерами. WebP не загрузится в Safari, JPEG-XR не будет распознан Mozilla Firefox. Поверьте, прирост скорости после конвертации изображений на сайте из традиционного JPEG в WebP не компенсирует урон, который возникнет, когда на вашем сайте в некоторых браузерах вместо картинок будет отображаться тег alt.

Вес

Ориентируйтесь на значение 70 Кб – столько максимум должна весить картинка на сайте. Конечно, это значение примерное – если опубликуете картинку, которая весит 100-150 Кб, серьёзных негативных последствий не будет. Отталкивайтесь от того, сколько картинок на странице – их веса суммируются.

Картинки, вес которых исчисляется мегабайтами, допустимо использовать только интернет-магазинам – если собираетесь настроить изображения в карточках товаров так, чтобы при наведении на них курсора мыши они увеличивались. Подобное решение использует, например, популярный портал Wildberries.

Вес картинки для интернет-магазина - скриншот

На Wildberries изображение товара увеличивается, когда наводишь курсор

Качество

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

Инструментов для сжатия картинок множество – ваш контент-менеджер наверняка знает не меньше дюжины. Однако если собираетесь сжимать сами, советуем бесплатный онлайн-сервис Compressor.io. Программа позволяет выполнять сжатие с потерей качества и без неё. Возможно уменьшить вес изображения на 90%. Единственный минус: есть ограничение по весу исходной картинки – до 10 Мб.

Релевантность и размещение

Описание изображения должно соответствовать содержанию. Можете попытаться по тегам оптимизировать картинку с рыжим котом под запрос «белая собака», но только лишите себя шансов «зацепить» картиночный трафик. В «Яндекс.Картинках» по запросу «белая собака» показывают лишь белых собак, и никакое «шаманство» SEO-шников не позволит пропихнуть сюда рыжего кота.

Картинка релевантная запросу - скриншот

Для поисковика также важно, чему посвящён текст, который окружает изображение. В нём рассказывается о белой собаке или о ремонте загородных коттеджей? Если второе, робот просто не сможет сделать вывод, что изображено на рисунке.

Наличие заполненных тегов

У рисунков обязательно должны быть заполнены теги Title и Alt, в идеале – ещё подпись. В WordPress теги заполняются в админке.

Заполнение alt и title для картинок - скриншот

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

Уникальность

Обращали ли вы внимание, что крупные блоги не используют изображения, взятые из «Яндекс.Картинок» и фотостоков, а предпочитают рисовать сами? Использование уникальных изображений – «плюсик» к ранжированию страницы.

Можете брать абстрактные картинки с фотостоков – например, вставить в качестве заглавного изображения к юридической статье фото с молотком и Фемидой. Так избавите себя от тревоги, что однажды прилетит «письмо счастья» от правообладателя. Однако использование таких изображений – признак дурного тона. Сколько статей в интернете предваряется схожими абстрактными картинками? Отказываясь от уникальных изображений, вы добровольно становитесь частью серой массы.

Как оптимизировать картинки на странице

Как оптимизировать картинки на странице - картинка

Вот ряд рекомендаций, которые помогут вам начать получать картиночный трафик.

Правильно заполните теги и укажите название

Начнём с Alt. Это тег, который содержит альтернативный текст для описания изображения. Если картинка на странице не загрузилась, вместо неё пользователь увидит текст из тега Alt. Также он увидит текст перед появлением изображения – если содержимое страницы загружается медленно.

Альт не должен быть слишком большим – 4-7 слов (50 символов). Лучше сделать его уникальным. Если у вас, скажем, интернет-магазин одежды, не стоит использовать для фото галстука альт в духе «синий галстук». Сколько ещё синих галстуков у вас в продаже? Пропишите в Alt уникальные свойства – например, название производителя. Wildberries использует для фото товаров альты наподобие таких:

Галстук бабочка STYLE Hype JAKAMEN. Цвет красный.

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

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

Третий тег – подпись. Есть минимум 2 причины заполнить тег:

  • Добавляя подпись, вы повышаете релевантность текста, который окружают изображение.
  • Согласно исследованию Нила Пателя, подписи к изображениям пользователи читают на 300% (!) чаще, чем непосредственно текст статьи.

Название графического файла тоже имеет значение – его поисковая система использует, чтобы понять, что изображено на рисунке. Название должно отражать содержание картинки и быть написанным на транслите. Рекомендуется отказаться от нижнего подчёркивания.

На заметку! URL картинки формируется на основе названия, поэтому есть смысл в название добавить ключ. «Яндекс» ключи в URL не видит, а Google – очень даже.

Используйте адаптивные изображения

Чтобы картинки корректно отображались на различных мобильных и десктопных устройствах, загрузите несколько вариантов исходного изображения и показывайте для экранов с разными разрешениями соответствующие. Для этого используют атрибут srcset. Посредством данного атрибута в тег img можно внести несколько версий изображения. Выглядит это примерно так:

<img srcset="pic-1.jpg 320w,

             pic-2.jpg 480w,

             pic-3.jpg 800w

     sizes="(max-width: 320px) 280px,

            (max-width: 480px) 440px,

            800px"

     src="pic-3.jpg" alt="рисунок">

Сделайте микроразметку

Микроразметка – ещё один способ «разжевать» для робота, контент какого типа представлен на странице. За счёт микроразметки Schema.org SEO-шники прежде всего пытаются сделать максимально симпатичными сниппеты в выдаче – но она даёт и другой толк. В частности, в «Google Картинках» изображения из размеченных карточек товаров показываются с подписью «Продукт».

Микроразметка для изображений - скриншот

Когда пользователь откроет такое изображение, он сразу увидит цену товара и его короткое описание, а также узнает, есть ли данный товар в наличии у продавца.

Настройте отложенную загрузку

«Ленивая» загрузка (lazy loading) – «палка о двух концах», весьма неоднозначная вещь. Суть технологии в том, что картинки начинают загружаться не вместе со страницей, а позже – например, последовательно, когда пользователь доскроллит до них, или по клику.

Что даёт lazy loading? У браузера не случается истерики, когда вы заставляете его загружать страницу с огромным количеством тяжёлых картинок. Он загрузит только титульную картинку и текст – остальное потом, по необходимости.

«Ленивая» загрузка помогает повысить оценку Google PageSpeed. Однако её не рекомендуется настраивать, если вы получаете много трафика с картинок. Боты поисковых систем не умеют скроллить страницы – поэтому изображений с отложенной загрузкой просто не увидят. Следовательно, такие изображения выпадут из индекса.

На заметку! Нет особой необходимости настраивать «ленивую» загрузку, если используете адаптивные изображения с атрибутом srcset. Эти два метода дублируют друг друга, поскольку преследуют одну цель – ускорить загрузку страницы.

Можно ли уникализировать картинку

Как сделать картинку уникальной - картинка

Можно, но нужно знать алгоритм, по которому поисковая система определяет уникальность. Например, вы не добьётесь уникализации путём цветокоррекции, ведь при проверке ПС преобразует изображения в чёрно-белый формат.

Рабочие методы уникализации:

  • Разместить на изображении надпись – по примеру мемов.
  • Сделать поворот картинки на 15-20° – используя Фотошоп.
  • Обрезать края – также при помощи Фотошопа.

На заметку! Для проверки уникальности изображения рекомендуем использовать программу TinEye.

Подводим итоги

Картинки – контент, способный быть как врагом, так и другом SEO. Грамотно оптимизировав сами изображения и текст вокруг них, правильно заполнив теги, вы сможете получать дополнительный, «картиночный» трафик. Он отнюдь не бесполезный и хорошо конвертируется.

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

Обсудим сотрудничество?

Какие задачи нужно решить:
Разработка сайта / интернет-магазина
Продвижение (SEO, Директ и т.п.)
Контент-маркетинг
Поддержка сайта (информационная, техническая)
Аудит сайта / интернет-магазина
Консультация
Задать вопрос специалисту
Заполните форму и мы вам быстро ответим

Комментарии

Добавить комментарий

* Поля, обязательные для заполнения
Добавляйся в наши социальны сети:
Каждый день интересные материалы про маркетинг и не только.

Провести бесплатный SEO-аудит вашего сайта?

Провести бесплатный SEO-аудит вашего сайта?

Хочу бесплатный аудит
Заказ сайта
Оставить заявку
Заявка на расчет
Оставить заявку
Оставить заявку
Заказ услуги
Заказ услуги
Заказ работ
Продвижение от 10.000 рублей
Form
X
Хочу быть автором