Копируете изображения для сайта из «Яндекс.Картинок»? «Отличная» работа! Если раньше вы сомневались по поводу того, получаете ли максимум трафика, теперь можете быть уверены: не получаете! Вы точно упускаете долю, которая могла бы идти по картинкам. Согласно замерам SEO-экспериментаторов, эта доля может составлять до 10%.
Даже если 10 потерянных процентов вас особо не беспокоят, должно обеспокоить то, что за кражу изображений в интернете можно «попасть» на крупную сумму. Пока такие случаи – редкость, однако прецеденты уже были.
Нужно ли оптимизировать картинки
Есть минимум 3 причины заняться оптимизацией картинок на сайте:
- Хочу получать дополнительный трафик. Этот трафик имеет небольшую ценность для блогов, однако для интернет-магазинов – вполне себе. Пользователи нередко ищут подходящий товар именно в картинках.
На заметку! В 2018 году Samsung заключила с «Яндекс.Маркет» соглашение, по которому технология корейцев «Камера Bixby» будет самостоятельно подбирать для пользователя подходящие товары в «Маркете» по фото. Выглядит это так: вам понравились кроссы друга, вы наводите на них «камеру Bixby», удерживаете несколько секунд, и технология советует магазины, где можно купить такие. Как производится поиск товара в интернете в данном случае? Именно по картинкам.
- Не хочу идти под суд. Вас не посадят за кражу картинок. Однако, если правообладатель задастся целью наказать вас и проявит упорство, штраф может оказаться нешуточным. Например, в 2016 году интернет-магазин мебели из Перми не стал заморачиваться и просто скачал 82 фото с сайта аналогичного магазина из Екатеринбурга. Правообладатель подал в суд и выиграл, отсудив 820 тыс. рублей – по 10 тыс. рублей за фото. На деньги «попали» сама компания и администратор её сайта.
- Не хочу, чтобы картинки мешали SEO. Неоптимизированные картинки негативно воздействует на скорость загрузки страницы – страница загружается дольше. Это серьёзно влияет на трафик. Согласно исследованию Google, увеличение времени загрузки с 0,4 до 0,9 секунд приводит к снижению трафика сайта на 20%.
Требования поисковиков к картинкам
Поисковые системы предъявляют к картинкам требования по следующим критериям.
Формат
Если изображение имеет диковинный формат, вероятно, поисковик просто не распознает его как изображение. Перечень рекомендуемых форматов, распознаваемых поисковиками – в таблице:
|
|
«Яндекс» |
|
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. Это тег, который содержит альтернативный текст для описания изображения. Если картинка на странице не загрузилась, вместо неё пользователь увидит текст из тега 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 – если картинка весит слишком много, страница будет долго загружаться. Во-вторых, можете пострадать от претензий поборников авторских прав. Поэтому, если собираетесь поднимать на ноги амбициозный проект, не поскупитесь и внесите в смету расходы на услуги графического дизайнера и контент-менеджера.
