Весь контент на сайте создан для двух групп:
1) пользователей, они же потенциальные покупатели наших товаров и услуг
2) поисковых ботов, чтобы наш сайт показали нашим будущим пользователям.
Самые популярные поисковые площадки это Яндекс и Гугл, а остальные занимают мизерную долю рынка уже много лет. Поэтому все силы логично направить на оптимизацию сайта именно для этих поисковиков. Стоит отметить, что говорим мы про российскую аудиторию, ну а на мировом рынке ситуация несколько иная. На диаграммах видно соотношение самых популярных поисковиков нам 2023 год. И если для российского рынка самым популярным остается Яндекс, то на мировом рынке его даже и не видно. В 2024 году ситуация не особо изменилась, но Google продолжает активно набирать обороты.
Вернемся к изображениям на сайте:
Изображения должны быть полезны для пользователя и понятны для поисковых ботов.
Боты вытаскивают из изображений всю текстовую информацию, чтобы наиболее точно определить, может ли конкретное изображение быть полезным пользователю или нет.
И вот наши шаги по оптимизации изображений на сайте. К слову я пользуюсь всеми шагами для оптимизации изображений. Эта статья написана благодаря моему проекту по оптимизации сайта по ремонту квартир master-remonta74
1. Размещаем свои изображения хорошего качества
Изображения должны быть хорошего качества и соответствовать теме на странице.
Стоит избегать стоковых фотографий, которые уже заполонили сотни сайтов (это слишком часто встречается в тематике фриланса, клининговых и других услуг). На сайте нужно использовать уникальные изображения и избегать копирования картинок (да и всего контента) с других сайтов. Поисковики любят уникальность. Они умеют определять дубли картинок и быстро определяют, на каких еще ресурсах есть такие же изображения. Поэтому вооружаемся фотоаппаратом и работаем над контентом. Если же нет возможности бегать с фотиком и создавать контент, то стоит подключать фотошоп к работе и изменять картинки так, чтобы они воспринимались ботами как уникальные (например, можно взять картинку с интернета и сильно обрезать, взяв от нее только небольшой кусок, поработать над цветокоррекцией и изображение получится новым).
Картинку можно проверить на уникальность на сервисе TinyEye. Сервис бесплатный. Можно загрузить как свою кратинку, так и прикрепить только ссылку на изображение и сервис выдаст все результаты с этим изображением. Если результатов не будет, то картинка считается уникальной и ее смело можно и нужно использовать на сайте.
2. Используем название изображений
И самый лучший результат будет, если в названии изображения использовать одну из ключевых фраз конкретной страницы.
Названия должны оставаться простыми и понятными.
Названия пишем латиницей (Гугл плохо распознает кириллицу, да и не все системы управления сайтом хорошо с ней работают)
3. Делаем легкие изображения
Все изображения нужно сжимать без потери качества. Для небольших сайтов подойдет онлайн-сервис iloveimg. Но вообще можно использовать любой сервис, достаточно написать в поисковые “Сжать изображения онлайн”.
4. Используем нужный размер
Если на сайте нужна картинка с размерами 250px x 100px, а мы используем картинку в 10 раз больше 2500px x 1000px, то хотя и на сайте будет отображаться нужный размер, но для загрузки всего изображения нужно будет сначала загрузить большое изображение и только потом отбросить пользователю ее наименьший вариант. Поэтому экономим драгоценные миллисекунды для загрузки страницы и уменьшаем размер картинок до реально используемого.
5. Заполняем название, описание и подпись
title – дополнительная информация о картинке, появляется при наведении мышкой на само изображение
alt – альтернативное описание изображения, описывает суть изображения. Отображается на сайте если изображение не загрузилось.
подпись – помогает понять к чему относится изображение. Пользователи намного чаще “пробегают” по контент страницы и взгляд всегда цепляется за подписи к картинкам быстрее, чем к основному тексту страницы. Поэтому подписям также нужно уделить внимание и стараться добавлять ключевые слова. Только не переусердствуйте – хотя поисковики и любят подписи, они все же должны быть уместны на сайте.
6. Настраиваем отзывчивые адаптивные изображения
Это изображения, которые правильно отображаются на разных устройствах.
srcset – содержит несколько ссылок на изображения для разных устройств и описывает их размеры. В таком случае браузер сам выбирает какое изображение показать пользователю в зависимости от используемого устройства.
Правило, которое работает и для Яндекса, и для Google:
Браузер всегда показывает то, что в srcset, а бот всегда индексирует то, что в src.
Поэтому в атрибут src нужно класть самую большую качественную картинку, а в атрибут srcset несколько небольших превью. Так в индекс попадет хорошая картинка максимального качества.
7. Создаем карту для изображений
Для картинок можно создать отдельный XML-файл или обновить существующую карту сайта. Такая карта поможет поисковикам проиндексировать картинки, которые они сразу не нашли (например, если картинка загружается через скрпт).
Для сайтов на WordPress есть специальный плагин Google XML Sitemap for Images, который автоматически создает Sitemap-файл для всех изображений, которые вы загружаете на сайт.