11 советов по оптимизации изображений для сайта (SEO)

Согласно данным Jumpshot, больше 20% всего поиска в Google приходится на Google Images.

Любители и профессионалы в области SEO знают, что оптимизация изображений на сайте стоит потраченного времени. Она даёт вам множество преимуществ, таких как улучшение поведенческих факторов, более быстрая загрузка страниц и лучшее ранжирование по целевым запросам. С каждым годом эта роль становится всё более значимой.

Без надлежащей оптимизации изображений вы теряете ценные возможности SEO.

Советы по оптимизации изображений, о которых должен знать каждый

1. Выбирайте правильный формат изображений.

Прежде чем добавлять изображения на сайт, изучите все форматы и убедитесь, что выбран подходящий. Их существует множество, но среди них PNG и JPEG наиболее распространены в интернете.

• PNG: изображение высокого качества, но и большой размер файла.

• JPEG: изображение имеет возможность изменения уровня качества, чтобы добиться баланса между качеством и размером файла.

• WebP: изображение может быть сжато без потери качества, но формат файла поддерживается не всеми браузерами.

В большинстве случаев PNG является универсальным вариантом, но если изображение большое и сделано профессиональным фотографом, то обратите внимание на формат JPEG.

2. Сжимайте изображения.

Согласно HTTP Archive, изображения в среднем составляют 21% общего размера страницы.

Вот почему рекомендуем вам использовать сжатие изображений перед загрузкой на сайт. Сделать это можно с помощью редактора Photoshop или инструмента TinyPNG.

Использование CDN сетей, так же определяет устройство и оптимизирует способ доставкой контента. Среди достойных представителей Cloudinary и Imgix.

Например, сайт increasingly.com увеличил скорость загрузки на 33% (2 секунды) только благодаря сжатию изображений.

Чтобы проверить и узнать, насколько изображения смогут повлиять на скорость сайта, воспользуйтесь проверенным инструментом Google PageSpeed ​​Insights.

3. Создавайте уникальные изображения.

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

Вспомните хотя бы сайты о бизнесе, все они имеют одни и те же изображения улыбающегося бизнесмена. Наверняка вы такое видели:

Даже когда стоковые изображения идеально оптимизированы, они не будут иметь такого же влияния и преимуществ для SEO, как оригинальные и высококачественные.

Чем больше на сайте оригинальных изображений, тем выше будет удовлетворённость пользователей и выше шанс попасть в ранжирование по релевантным поисковым запросам.

Google рекомендует:

«Большие изображения должны иметь ширину не менее 1200 пикселей и разрешаться настройкой max-image-preview: large или с помощью AMP».

Такие изображения с большей вероятностью попадут в Google Discover.

4. Не забывайте про авторские права на изображения.

Независимо от того, какие изображения используются, убедитесь, что отсутствует нарушение авторских прав.

Если Getty, Shutterstock, DepositFiles или любой другой поставщик стоковых фотографий владеет изображением, которое используется на вашем сайте, и у вас нет лицензии на его использование, то это риск получить дорогостоящий судебный иск.

В соответствии с Законом об авторском праве, вам должно быть направлено уведомление, если нарушение действительно есть, то его необходимо немедленно устранить.

Google Images позволяет фильтровать результаты поиска по типу лицензии на использование.

5. Настройте имена файлов изображений.

Когда дело доходит до SEO, создание описательных с ключевыми словами имён файлов имеет важное значение.

Имена файлов изображений предупреждают Google и других роботов поисковых систем о сути изображения.

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

На это потребуется время, в зависимости от количества изображений на сайте, но это будет правильное решение с точки зрения SEO.

Например, изображение шоколада — файл можно назвать «chocolate», но лучше «bar-with-chocolate-flavor».

6. Пропишите альтернативный текст к изображениям.

Alt — это альтернативный текст для изображений, когда браузер не может их правильно отобразить. Подобно заголовку, он используется для описания содержимого изображения.

Важен альтернативный текст и для общей стратегии SEO на странице. Если изображение не загружается по какой-то причине, отображается текст о содержимом изображения. Правильное использование тега помогает вашему сайту повысить рейтинг в поисковых системах.

Google отмечает:

«Он предоставляет Google полезную информацию об изображении. Мы используем эту информацию, чтобы определить и вывести наиболее релевантное изображение по запросу пользователя».

Альтернативный текст может быть таким:

<img src = ”chocolate.jpg” alt = ”chocolate” />

Но лучше, если альтернативный текст будет более конкретным:

<img src = ”chocolate.jpg” alt = ”dark chocolate coffee flavored bar” />

7. Структурируйте файлы изображений.

В 2018 году Google обновил правила для изображений. Одним из основных обновлений, которые были обнаружены, стало то, что он использует путь к файлу и имя файла как фактор ранжирования.

Повторимся: путь к файлу и имя файла являются фактическим фактором ранжирования.

Например, если это электронная торговля, вместо того, чтобы помещать все изображения товаров в общую папку /media/, правильнее будет структурировать подпапки по темам, связанным с категориями, например /shorts/ или /denim/.

8. Пропишите Title и Description страниц.

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

На странице поддержки Google говорится:

«Google Images автоматически генерирует заголовок и описание, чтобы лучше пояснить каждый результат и то, как он соотносится с запросом пользователя… Мы используем ряд различных источников для этой информации, включая информацию из заголовка и описания».

Это означает, что все важные факторы SEO на странице, такие как заголовок, описание, текст, разметка и т.д., тоже влияют на то, как Google ранжирует изображения.

9. Укажите размеры изображений.

Если вы используете AMP или PWA, необходимо указывать размеры изображений в исходном коде.

Однако, если они не используются, рекомендуется указать ширину и высоту, что обеспечит лучшее удобство для пользователей.

Атрибуты размеров изображения также важны для предотвращения проблем с CLS, которые могут повлиять на Core Web Vitals.

Они сообщают браузеру, сколько места следует выделить для ресурса, и предотвращают смещение содержимого, снижающего оценку CLS.

10. Адаптируйте изображения для мобильных устройств.

В худшем случае отсутствие мобильной оптимизации может дать высокий показатель отказов и низкую конверсию. А, в лучшем случае, она может дать больше преимуществ для ранжирования и улучшить взаимодействие с пользователями.

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

Для этого Mozilla предлагает набор атрибутов srcset и sizes, предоставляя браузерам дополнительные исходные изображения, что позволяет отображать идентичное содержимое изображений с изменёнными размерами для разных устройств.

Пример использования:

<img srcset="elva-fairy-480w.jpg 480w,

                      elva-fairy-800w.jpg 800w"

         sizes="(max-width: 600px) 480px,

                                                    800px"

         src="elva-fairy-800w.jpg"

         alt="Elva dressed as a fairy">

Подробнее об использовании srcset и sizes вы можете узнать на официальном сайте Mozilla.

11. Добавьте изображения в sitemap.

Добавляются изображения в общий или отдельный sitemap неважно, но они там должны быть.

Это простое действие увеличивает ваши шансы быстрой индексации изображений поисковыми системами, что положительно сказывается и на росте посещаемости сайта.

После не забывайте загружать ссылку на sitemap в Google Search Console.

Ключевые выводы по оптимизации изображений

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

Самое главное — изображение и альтернативный текст должны быть релевантны странице. Не стоит забывать о технических факторах, таких как формат, размер, адаптивность, которые в той или иной степени могут повлиять на мнение посетителей. И всегда добавляйте ссылку в sitemap.

С каждым годом изображения приобретают всё большее значение для поиска и сайт от этого только выиграет.

С оригиналом статьи вы можете ознакомиться на Search Engine Journal.