В процессе работы над поисковым продвижением изображениям не всегда уделяется должное внимание. Считается, что нужно оптимизировать код и контент, а визуальным оформлением можно заняться, когда будут решены другие задачи. Это ошибка. Поисковые системы уделяют картинкам целый раздел. Да и многие из нас довольно часто вводят поисковый запрос для того, чтобы найти в выдаче именно изображения. Что уж говорить о дизайнерах, специалистах по контекстной рекламе и художниках, работающих с картинками все время.
Выдача в разделе «Картинки» и на основной странице поиска различается. Это неудивительно. В одном случае, показываются релевантные запросу изображения, а в другом – релевантные страницы, при ранжировании которых важен текстовый контент и ряд других параметров. Поисковая оптимизация изображений принесет вам дополнительный трафик за счет выхода на первые позиции в разделе «Картинки». Прочитав эту статью, вы узнаете, как вывести сайт в топ выдачи «Яндекс.Картинок» и Google Images – самых распространенных поисковых систем в СНГ.
При оптимизации важно сделать так, чтобы роботы поисковых систем понимали изображение и могли определить, по каким запросам пользователей его нужно показывать. Также нужно позаботиться о скорости загрузки и отображении на разных экранах, в этом поможет правильный выбор размера и веса файла. Эти и другие характеристики влияют на поведенческие факторы, играющие важную роль в ранжировании.
Изображения должны соответствовать тематике и заголовку страницы. Они не просто украшают сайт и дополняют текст, они вместе с контентом сочетаются таким образом, что создается нечто уникальное и полезное. Как тексты дополняют картинки, так и картинки дополняют текстовую часть. Нет главного, все важно в одинаковой степени.
В некоторых тематиках изображения трудно сделать релевантными. Например, при рекламе SEO-услуг в голову приходит мало идей и практически все они из разряда уже использованных. Но если нельзя придумать что-то новое, можно видоизменить старое. Мы тестировали много вариантов и можем точно сказать, что стандартные фотографии со стоков использовать нельзя. Об этом мы еще поговорим ниже.
Поисковые системы следят за качеством выдачи. Им тоже важно выдавать пользователям лучшие варианты из существующих, не просто фото по теме, а фото лучшего качества, соответствующие запросу.
Нечеткие, размытые, пиксельные картинки не просто ухудшат ваши позиции, но и могут оттолкнуть пользователя. Яркие и красивые фотографии, наоборот, привлекут внимание и удержат его.
Качество определяется не только четкостью и красотой, но и размерами. Используйте большие изображения, конечно же, с оптимизированным весом (без потери или с минимальной потерей качества). Если у поисковой системы есть возможность выбора между размерами, в большинстве случаев будет показан самый большой из имеющихся.
Изображения меньше 150 пикселей поисковые системы могут расценить как элемент дизайна и не пустить в выдачу, поэтому подбирайте картинки шириной от 1200 px и высотой от 800 px.
Для крупного формата лучше используйте превью со ссылкой на оригинал.
<a href="ссылка на оригинальное изображение"><img src="ссылка на миниатюру" /></a>
В этом случае в выдаче будет открываться оптимизированная версия, а по клику – оригинал большого размера на отдельной странице.
У каждой иллюстрации должна быть цель. Это может быть демонстрация самого продаваемого продукта, повторение сказанного в тексте, подтверждение информации и т. п. Если вы подбираете главное фото к статье, значит, его цель – привлечь внимание и корректно показываться на разных устройствах и площадках. Главные фото размещаются не только в текстах и анонсах в блоге сайта, они подтягиваются к результатам поисковой выдачи, поэтому должны быть привлекательными для поисковых систем.
Используйте скриншоты с целью подробного объяснения, например, пользования интерфейсом. Рисуйте инфографику, которая соберет много информации в один понятный рисунок. Но не размещайте изображения без цели.
Старайтесь использовать уникальные изображения: фотографируйте, делайте скриншоты, рисуйте или пользуйтесь услугами дизайнера и фотографа. Так вы получите контент, который в интернете закрепится именно за вами. Уникальность изображений влияет на авторитетность домена в глазах поисковых систем. Если создаете уникальный контент, поисковые системы непременно это оценят. Помимо доказательства основательности и серьезности вашей компании, оригинальные изображения помогают поисковым системам быть уникальными и давать пользователям большой выбор.
Если у вас нет возможности создать уникальную картинку, используйте фотостоки. При этом нужно обязательно видоизменить (наложить фильтры, скорректировать яркость, контрастность), оптимизировать и улучшить оригинальное изображение. Также можно создать уникальный коллаж из нескольких готовых фото, удалить или добавить отдельные элементы и т. п. Таким образом, вы уникализируете изображение, оно будет казаться поисковикам оригинальным.
Не используйте для уникализации зеркальное отражение. Этот прием поисковые системы давно научились распознавать.
Проверить уникальность созданного контента можно с помощью Яндекс.Картинок и Images Google. Для этого используйте функцию поиска по картинке и загрузите созданное изображение по ссылке или с компьютера.
Расположите изображение между абзацами, к которым оно относится. Важно именно окружить картинку текстом. Благодаря этому поисковым системам будет проще понять, к какому текстовому отрывку относится изображение. Если разместить его снизу или сверху, релевантность снизится, так как поисковые системы будут считать, что фото относится и к другой части текста, поэтому будут показывать его не по тем ключевым запросам. Это приведет к тому, что пользователи не будут реагировать на ваше изображение в выдаче, и поисковики понизят его позиции.
Поисковые системы, конечно же, совершенствуются: умеют распознавать картинки и даже изображенные на них объекты. Но лучше облегчить их работу и помочь им, так как релевантность выдачи важна именно нам.
Это дополнение к предыдущему пункту. Текстом можно описать все, что есть на картинке, или передать общее значение.
<img src="ссылка на изображение" alt="описание" />
Атрибут alt информирует читателя о том, что изображено на картинке. Он отображается, если в браузере отключена возможность показа картинок или если произошла ошибка при загрузке.
Поисковые системы не любят длинные описания, поэтому старайтесь уложиться в 50 символов. Используйте максимально точное описание, без лишней информации. Лишние слова могут отрицательно повлиять на ранжирование. Добавляйте высокочастотные запросы, но не переусердствуйте. Текст должен быть органичным, поэтому ни в коем случае не перечисляйте просто все запросы через запятую.
Данный атрибут обычно используется с тегом <a>, когда картинка размещается по ссылке, title показывает название этой ссылки. Если изображение размещено на сайте, в title можно прописать дополнительную информацию, отличную от той, что вы уже указали в alt. Используйте второстепенную информацию, так как основная должна быть в атрибуте alt.
Название должно пояснять, что изображено на картинке (латинскими буквами, можно транслитом на языке сайта). Пользователю должно быть сразу понятно, что там изображено. Это крайне сильно помогает поисковым системам.
Самыми распространенными форматами являются .jpg, .png и .gif, но появляются и новые, например AVIF и WebP – они потребляют меньше мобильного трафика и способствуют быстрой загрузке сайта.
PNG обычно весит больше других форматов, но дает более высокое качество. Используется как элемент дизайна или в тех случаях, когда нужна прозрачность или детализированность.
WebP – относительно новый формат, поддерживается еще не всеми браузерами. Если хотите его использовать, установите плагин (например, EWWW Image Optimizer), который будет адаптировать фотографию, если посетитель зайдет через браузер, не поддерживающий WebP.
SVG – формат логотипов и значков, подходит для создания интерактивных элементов на сайте: онлайн-калькуляторов, визуальных конструкторов и т. п.
Обычно это делается через онлайн-сервисы. Для автоматизации процесса можно использовать плагин. Изображение будет сжато практически без потери качества и данных.
EXIF – это техническая информация об изображении, которая записывается во время его создания. Данные могут различаться в зависимости от устройства, самые распространенные:
Показывает уникальность фото, ваше авторство для поисковых систем. Наличие чужих метаданных плохо отражается на уникальности, особенно если указан чужой сайт.
Метаданные часто теряются при сжатии, поэтому проверяйте перед публикацией или используйте специальные настройки, чтобы они не удалялись.
Удаляйте лишнюю информацию. Например, при сохранении файла через графический редактор появляется ненужная XML-разметка.
Sitemap – это карта сайта на языке, который понимают поисковые роботы. Она помогает им быстрее и точнее распознать контент. Для картинок можно создать отдельную карту, используя следующие теги:
Более подробно об этом написано в Справке Яндекса и Google
Lazy loading (ленивая, или асинхронная загрузка) загружает контент асинхронно, то есть пользователь прокручивает страницу, и картинки появляются по мере достижения их места размещения. Это позволяет тратить меньше ресурсов и времени на открытие сайта. Пользователю не нужна та информация, которая находится вне поля зрения (экрана), но нужна быстрая загрузка того, что находится в центре внимания.
Обычно на месте изображения ставится заглушка, и пользователь при прокрутке доли секунды видит именно ее. Чтобы страница не «прыгала» по мере прогрузки, лучше сделать заглушку такого же размера, как и подгружаемое фото. Уделите этому особое внимание, так как иногда после загрузки картинки страница «уползает» и пользователь теряет то место, где он был, а когда находит, может загрузиться следующее изображение, и текст вновь «убежит». Это неправильно.
Структурируйте изображения с помощью семантической, или микроразметки. Например, указав тип контента «товар», вы сможете увидеть это фото в выдаче по картинкам при выборе соответствующего фильтра.
Микроразметка помогает поисковым системам лучше понять тип контента, к которому относятся ваши картинки. С помощью Schema.org можно добавить логотип бренда, он отобразится в Knowledge Graph в Google. В справочных материалах Google даны развернутые рекомендации для товаров и рецептов.
Чтобы фотографии корректно отображались на всех цифровых устройствах, стоит пояснить, какие из них при каких размерах экрана нужно показывать. Данные прописываются в srcset, в него же можно добавить миниатюры для картинок. Атрибут src используется для индексации главной фотографии, а srcset отвечает за загрузку правильного размера.
Пример HTML-кода:
Open Graph и Twitter Card помогают задать внешний вид страницы при ее репосте с сайта в соцсеть. Это поможет улучшить показатели шеринга и будет положительно оценено поисковыми системами. Укажите, какую картинку нужно использовать для социальных сетей, и именно она будет прикрепляться при репосте.
Некоторые вебмастера размещают изображения на сторонних ресурсах, чтобы сэкономить место в хранилище хостинга. Это чревато сбоями при загрузке контента, так как если у сторонних ресурсов сервера будут перегружены, наши фотографии не прогрузятся с нужной скоростью, и страница потеряет в качестве. Если у вас высокая посещаемость, лучше используйте CDN.
Не ограничивайте доступ к папке с картинками, а также проследите, чтобы отсутствовал запрет на индексирование определенных форматов файлов:
Чтобы убедиться в том, что вы не допустили ошибок, посмотрите файл robots.txt или используйте данные Google Search Console и «Яндекс.Вебмастера».
Уделив все внимание поисковой выдаче, мы часто забываем про еще одно немаловажное направление в SEO. После оптимизации изображений ваш сайт получит больше трафика, чем было до этого. Наш мир с высокой скоростью становится визуальным. Если раньше преобладал текстовый контент, то современная модель потребления изменилась. Сейчас актуально получать информацию из видео и картинок. С помощью качественных изображений вы сможете не только рассказать клиенту о вашем продукте и его свойствах, но и реализовать практически любую бизнесовую и маркетинговую цель. При этом, так как доля мобильного трафика растет с каждым годом, нужно обязательно оптимизировать картинки для просмотра с мобильных устройств.
Будьте в тренде, и тогда возможности для роста к вам подтянутся. Если не хотите сами проделывать огромную работу, связанную с оптимизацией изображений и в целом с оптимизацией сайта, обращайтесь в «Поисковую индустрию». Мы гарантируем углубленный подход к вашему проекту: мы вникаем в суть бизнеса и помогаем развивать его, а не просто занимаемся продвижением сайта в поисковых системах. Выбирайте сильных!
Если у вас есть вопрос
