Если вы не уделяете время оптимизации изображений, которые загружаете на сайт, то теряете возможность привлечь больше трафика и улучшить позиции в поисковой выдаче. О том, как превратить картинки на страницах в эффективный инструмент SEO, рассказывает руководитель платформы LinksSape Александр Шестаков.
Чем полезна оптимизация изображений
Оптимизация изображений на сайтах – отдельное направление внутреннего SEO, популярное в рунете и у зарубежных специалистов. Выделять на него средства вполне оправдано – картинки могут привлекать органический трафик с отдельных вкладок в выдаче Яндекса и Google, а также отображаться в общих результатах поиска, делая их привлекательнее.
Этот сниппет в поисковой выдаче дополнен изображением товара и выглядит более интересно для потенциального покупателя
От того, насколько грамотно оптимизированы изображения, зависят скорость загрузки страниц, корректность их отображения на разных устройствах и реакция аудитории. Эти факторы непосредственно влияют на видимость всего сайта в выдаче.
Как оптимизировать изображения
Разберем, как оптимизировать изображения, чтобы привлечь больше трафика на сайт и улучшить его оценку поисковиками.
1. Используйте только уникальные изображения
Для эффективного продвижения стоковые изображения не подходят и поэтому от их использования в чистом виде лучше отказаться. Есть вероятность, что поисковики сочтут такой контент дублированием, а это крайне негативно сказывается на позициях в выдаче.
Фото, сделанное в офисе на обычный телефон способно принести сайту больше пользы, чем любая идеальная картинка со стока. Еще один способ получить эксклюзивные изображения – использовать сервисы на базе нейросетей, например, Diasp или Batchtools, которые вносят в картинки незначительные изменения, в результате чего поисковые системы начинают воспринимать обработанные изображения как уникальные. Кроме того, качественные картинки можно генерировать с нуля с помощью Midjourney или другой подобной нейросети.
2. Выбирайте подходящий формат и уровень сжатия
Количество форматов сегодня измеряется десятками, однако, большинство не поддерживается поисковиками. Актуальными для размещения в сети являются:
-
JPEG – формат позволяет сжимать изображение, уменьшая размер файла и увеличивая скорость загрузки. Чем сильнее сжимается изображение, тем хуже качество. Картинки этого типа не могут быть прозрачными.
-
PNG – более тяжелые файлы, но их сжатие не приводит к потере качества. Кроме того, картинки PNG могут быть прозрачными.
-
GIF – файлы не теряют качества при сжатии изображения, удобны для анимированных картинок. При этом максимальное количество цветов у такого файла – только 256, он не подходит для графики высокого качества.
-
SVG – векторные изображения, которые масштабируются как угодно. Обычно применяются для адаптивных элементов дизайна, таких как логотипы и значки.
-
BMP – изображения этого типа нельзя сжать. Файлы имеют максимально возможное качество, но применяются редко, поскольку утяжеляют сайт.
-
WebP – аналог файлов JPEG, позволяющий сжимать изображение сильнее с меньшими потерями качества.
Для размещения изображений – фотографий и других иллюстраций – оптимально использовать файлы типов JPEG и WebP, однако, второй тип не поддерживается на некоторых устаревших браузерах и может не отображаться. Это может вызвать проблемы с пользовательским опытом, если значительная доля посетителей сайта использует гаджеты с устаревшим софтом. В элементах интерфейса все чаще применяется SVG.
WebP обеспечивает максимальную скорость загрузки – в два раза быстрее, чем JPEG и в несколько раз быстрее, чем PNG. Главное – не сжать изображение настолько, чтобы вызвать у аудитории негативную реакцию. Если высокое разрешение картинок – одна из ключевых особенностей сайта, выгоднее применять формат PNG.
Можно также применять специальные инструменты на основе искусственного интеллекта, которые сжимают файлы по более сложному алгоритму – например, ShortPixel или TinyJPG. В первую очередь уменьшается разрешение элементов, которые не так сильно бросаются в глаза, а также убираются наименее значимые метаданные. В результате объем файла снижается с минимальной потерей качества.
Сжатие почти в 4 раза по такой технологии почти незаметно человеческому глазу
При использовании таких сервисов сначала опытным путем проверьте, до какого уровня можно безболезненно уменьшать изображения. Например, текст на картинках обычно страдает от сжатия сильнее всего.
3. Оптимизируйте имена файлов и теги
Чтобы изображения лучше ранжировались в выдаче, оптимизируйте заголовок. Включите в него ключевые слова, по которым картинка будет продвигаться в выдаче. Тем не менее не злоупотребляйте ключевиками – название должно быть логичным и осмысленным.
При пересечении ключевых слов в названии файла, заголовке и описании страницы, поисковики будут выше ранжировать изображения. Учитывайте это при оптимизации картинок.
Также добавьте тег alt – он отвечает за надпись, всплывающую при наведении курсора на изображение. Это позволяет добавить к одной картинке еще больше ключевиков. Они также могут выступать в качестве анкорного текста для ссылок при внутренней перелинковке.
Пример иллюстрации с альтернативным текстом в статье
При продвижении зарубежных ресурсов имейте в виду, что в некоторых странах использование альтернативного текста для изображений закреплено законом. Это делается, в том числе, для удобства пользователей с ограниченными возможностями.
4. Адаптируйте изображения для просмотра со смартфонов
Используйте специальные атрибуты изображений, чтобы картинки корректно отображались на экранах мобильных устройств – это актуально для большей части пользователей.
Например, добавьте атрибуты srcset и sizes в тег <img>, чтобы тегировать картинки и указать их ширину – это упрощает браузеру загрузку разных версий изображения. Для участков с шириной до 300 пикселей будет подобрано изображение именно 300 пикселей, а не 600, и так далее.
Также можно использовать ленивую загрузку изображений. В этом случае картинка начнет загружаться только когда пользователь долистает до нее. Так можно значительно ускорить сайт, особенно для пользователей смартфонов, на экране которых одновременно отображается только небольшая часть страницы.
Чтобы использовать эту опцию, добавьте в тег <img> атрибут loading="lazy". Однако лучше не прибегать к ленивой загрузке картинок, расположенных на первом экране. Это может негативно повлиять на показатели сайта. Таким изображениям лучше прописать предварительную загрузку с помощью свойства rel="preload".
5. Улучшайте ранжирование изображений поисковиками
Чем быстрее картинки попадут в индекс поисковиков, тем быстрее начнут ранжироваться в выдаче. Чтобы ускорить процесс, пропишите изображения в карте сайта – файле Sitemap.
Также добавьте микроразметку Schema.org, чтобы дополнительно выделить картинки в поиске. Это может принести пользу при продвижении онлайн-магазинов, в которых описания товаров и их вариации сопровождаются фотографиями. В этом случае увеличивается вероятность получить в поисковой выдаче расширенный иллюстрированный сниппет.
Если на сайте используются тысячи крупных изображений, одно из решений – применять облачные сервисы хранения. Загрузив картинки на сервер CDN, вы также сможете дополнительно обработать и проработать их. Например, переформатировать загруженные файлы типа PNG или JPEG в более емкий формат WebP.
Итоги
Изображения, которые вы загружаете на сайт, могут принести дополнительный трафик и улучшить позиции сайта в поисковой выдаче. Оптимизируйте картинки перед тем, как публиковать их:
- Найдите подходящие уникальные изображения или обработайте стоковые картинки с помощью нейросетей.
- Выберите оптимальный формат и сожмите изображения, чтобы уменьшить их вес, но не сильно потерять в качестве.
- Проработайте названия и теги, добавьте актуальные ключевики.
- Адаптируйте изображения для просмотра с мобильных устройств.
- Дополните картинки микроразметкой и внесите их в карту сайта для ускорения индексации.
Комментарии