12 важных советов по SEO для изображений, которые вам нужно знать

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

Изображения часто занимают наибольшую часть веб-страниц.

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

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

Как поисковые системы индексируют и понимают изображения

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

Google учитывает такие факторы, как окружающий текст, имя файла изображения, alt-текст, подписи и содержимое страницы, чтобы понять контекст изображений, и использует технологии распознавания изображений для понимания их содержания.

Что такое SEO для изображений?

Оптимизация изображений – это набор техник, направленных на увеличение видимости на страницах результатов поисковых систем (SERP) на основе наших знаний о том, как поисковые системы сканируют, понимают и ранжируют изображения.

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

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

Рассмотрим различия между форматами и их влияние на ваш сайт и SEO.

• PNG: Использует без потерь сжатие, что сохраняет качество изображения без потери данных. Поддерживает прозрачность, но имеет больший размер файла, что делает его идеальным для печати.
• JPEG: Применяет сжатие с потерями, что может ухудшить качество изображения, но позволяет регулировать уровень качества для нахождения баланса между размером файла и качеством.
• WebP: Разработан Google и поддерживает как без потерь, так и с потерями сжатие. Эффективнее, чем JPEG (на 25-80%), обеспечивая меньшие размеры файлов при сопоставимом качестве. Поддерживается всеми основными браузерами.
• GIF: Использует без потерь сжатие, но ограничен 256 цветами, что делает его менее подходящим для высококачественных изображений и более подходящим для простых графиков и анимаций.
• SVG: Векторный формат, используемый для логотипов, иконок и других дизайнов, так как может масштабироваться до любого размера без увеличения размера файла. Это делает его идеальным для адаптивного веб-дизайна.
• BMP: Большие и несжатые файлы изображений, сохраняющие очень высокое качество. Из-за размера не используются на сайтах, так как могут значительно замедлить загрузку страниц.

Для меня наилучший вариант — это PNG, который можно затем конвертировать в WebP для использования на веб-сайтах.

Что касается преобразования GIF в WebP, следует учитывать, что старые браузеры, такие как Safari 15.6 (macOS Catalina) и более старые версии, не поддерживают анимацию WebP.

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

Как правило, при использовании определенной технологии рекомендуется регулярно отслеживать процент устройств, поддерживающих её, через Google Analytics.

Как сжатие влияет на качество изображения и время загрузки

Чтобы понять это, давайте используем образец изображения в формате BMP и преобразуем его в различные форматы.

Посмотрим, как изменяются размер файла и время загрузки на веб-странице:

Формат изображения	Размер файла	Время загрузки при соединении 3G	Время загрузки при быстром соединении (128 МБ/сек)
WebP	41.2 КБ	1.77 сек	29 мсек
JPG	91.5 КБ	2.91 сек	47 мсек
GIF	265 КБ	5.89 сек	89 мсек
PNG	552 КБ	9.16 сек	156 мсек
BMP	1900 КБ	17.22 сек	311 мсек

Этот пример показывает, насколько эффективен формат WebP. Он имеет самый маленький размер файла и загружается в пять раз быстрее, чем PNG, и почти в два раза быстрее, чем JPG.

Поэтому рекомендуется использовать WebP. Если вы уже сделали это, значит, вы достигли значительного прогресса в оптимизации времени загрузки. (Иногда размер изображения в формате WebP может быть больше оригинального файла. Подробнее об этом можно узнать на странице FAQ Google.)

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

Например, если у вас сайт фотографий, где важно сохранить высокий уровень деталей, лучше использовать PNG, а не JPG или WebP.

В таком случае можно отображать миниатюры в формате WebP, которые ссылаются на изображения в формате PNG с полным качеством.

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

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

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

Поэтому всегда рекомендуется тщательно проверять и выбирать типы оптимизации.

Что насчет формата AVIF?

AVIF — это новый формат, поддерживаемый всеми основными браузерами, но пока не поддерживаемый Google, поэтому мы не включили его в наш первоначальный список.

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

Например, тот же файл изображения в формате AVIF занимает 11 КБ по сравнению с 41 КБ в формате WebP.

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

Если вас устраивает качество AVIF и вы хотите его использовать, вы можете сделать это, включив его в тег <picture> в качестве первого <source>.

Браузеры, которые поддерживают AVIF, будут отображать его с меньшим размером файла.

Google, который пока не поддерживает его на момент написания этой статьи, просто проигнорирует его и перейдет к следующему формату, указанному в теге <picture>.

Вот пример кода:

<picture>
    <!-- Формат AVIF будет обработан, если клиент (т.е. браузер) поддерживает его первым в списке -->
    <source type="image/avif" 
    srcset="image-300w.avif 300w, image-600w.avif 600w, image-1200w.avif 1200w"
    sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px">
    
    <!-- Формат WebP будет обработан, если клиент не поддерживает AVIF -->
    <source type="image/webp" 
    srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w"
    sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px">
    
    <!-- Если WebP также не поддерживается, браузер вернется к формату PNG -->
    <source type="image/png" 
    srcset="image-300w.png 300w, image-600w.png 600w, image-1200w.png 1200w"
    sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px">
    
    <!-- Наконец, если ни один из продвинутых форматов не совместим, браузер отобразит изображение в формате JPEG -->
    <img src="image-300w.jpg" 
    srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w" 
    sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
    alt="Описание изображения">
</picture>

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

В дальнейшем в этой статье мы рассмотрим атрибуты srcset и sizes, объяснив, как использовать их для оптимизации изображений для разных устройств и размеров экранов, чтобы они загружались эффективно и были удобны для мобильных устройств.

Используем только уникальные изображения

Многие веб-сайты переполнены одинаковыми шаблонными фотографиями, поэтому вам важно сделать ваши фотографии яркими и ценными для посетителей сайта.

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

Подумайте о корпоративном сайте, консалтинговой фирме или бизнесе, который гордится своим обслуживанием клиентов. Все эти сайты используют практически одинаковые стоковые изображения улыбающегося бизнесмена.

Я уверен, вы видели такие изображения:

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

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

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

Google рекомендует, чтобы изображения были шириной не менее 1200 пикселей и включали настройку max-image-preview в метатеге robots, чтобы гарантировать их отображение в виде крупных изображений в Google Discover.

<meta name='robots' content='index, follow, max-image-preview:large' />

Вот пример того, как это может помочь вашим изображениям выглядеть крупнее:

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

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

Оптимизируем атрибут alt для изображений

Alt-атрибуты (альтернативный текст) представляют собой текстовые альтернативы изображениям на случай, если браузер не может их правильно отобразить. Подобно заголовку, атрибут alt описывает содержимое файла изображения.

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

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

Он предоставляет Google полезную информацию о содержании изображения. Google использует эту информацию для определения наилучшего изображения для отображения по запросу пользователя.

Кроме того, альтернативный текст требуется в соответствии с Законом о правах инвалидов США (ADA) для лиц, которые не могут самостоятельно просматривать изображения.

Описательный alt-текст может точно указать пользователям, что изображено на фотографии. Например, если у вас на сайте есть изображение шоколада.

Alt-текст может выглядеть так:

<img src="chocolate-1.jpg" alt="шоколад"/>

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

<img src="chocolate-1.jpg" alt="плитка черного шоколада с вкусом кофе"/>

Для дополнительной SEO-ценности alt-текст может служить якорным текстом внутренней ссылки, если изображение ссылается на другую страницу на сайте.

Оптимизируем имена файлов изображений

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

Как правило, имена файлов типа «IMG_722019» или похожие на них не помогают Google лучше понять изображение.

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

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

В зависимости от объема вашей медиа-библиотеки это может потребовать некоторого времени, но изменение стандартных имен файлов всегда является хорошей идеей.

Оптимизируем заголовок и описание самой страницы

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

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

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

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

<picture>
<!-- Формат WebP для поддерживающих его браузеров -->
<source type="image/webp"
        srcset="image-300w.webp 300w,
                image-600w.webp 600w,
                image-1200w.webp 1200w"
        sizes="(max-width: 600px) 300px,
               (max-width: 900px) 600px,
               1200px">

<!-- Резервный формат JPEG -->
<img src="image-300w.jpg"
     srcset="image-300w.jpg 300w,
             image-600w.jpg 600w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 300px,
            (max-width: 900px) 600px,
            1200px"
     alt="Описание изображения">
</picture>

Понимание атрибута srcset:

• Атрибут srcset внутри тега <img> перечисляет разные файлы изображений с указанием их ширины (w дескриптор), что указывает на ширину изображения в пикселях. Это необходимо, потому что браузеры не могут определить размеры изображений до их загрузки.
• Это объясняет необходимость указывать ширину, чтобы сообщить браузеру о размере каждой версии изображения. Например: srcset="image-300w.jpg 300w, image-600w.jpg 600w"

Понимание атрибута sizes:

• Атрибут sizes используется браузером вместе с srcset для выбора подходящего ресурса. Он указывает предполагаемую ширину отображения изображения для различных размеров видовых окон.
• Он определяет, как браузер должен выбирать среди доступных размеров изображений, перечисленных в srcset. Например, для более узких видовых окон до 600 px ширины выбирается изображение шириной 300 px, до 900 px — 600 px, а для более крупных видовых окон — изображение шириной 1200 px.

Дополнительные возможности:

• Вы можете использовать дескрипторы “x”, которые говорят браузеру выбирать наиболее подходящий размер изображения на основе разрешения экрана устройства (например, 1x, 2x или 3x для стандартных, ретина и супер-ретина экранов).

Автоматизация и поддержка sizes="auto":

• Недавно Chrome начал поддерживать функцию sizes="auto", которая инструктирует браузер определять размер лениво загружаемых изображений на основе макета HTML и CSS.
• Это означает, что браузер будет учитывать размеры изображений в соответствии с правилами CSS, что позволяет точнее рассчитывать, как они будут отображаться на странице, вместо предположения о занимаемой полной ширине видового окна.

Указываем размеры (Борьба с подпрыгивающими картинками)

Знаете, как бывает неприятно, когда страница резко меняет размер при загрузке из-за картинок? Это портит впечатление и снижает оценку сайта по показателям Core Web Vitals.

К счастью, есть простое решение! Нужно всего лишь указать ширину и высоту для каждой картинки/видео на сайте. Благодаря этому браузер заранее знает, сколько места нужно выделить под изображение, и страница грузится плавно, без неприятных скачков.

Используем Lazy-loading

Хотите, чтобы ваш сайт грузился быстрее? Тогда обратите внимание на изображения!

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

Есть решение – ленивая загрузка (lazy loading). Она откладывает загрузку картинок, которые пока не нужны пользователю, на тот момент, когда он прокрутит страницу вниз и они попадут в видимую область.

Благодаря этому сайт изначально грузится быстрее, а Largest Contentful Paint (LCP) – показатель, который оценивает скорость отрисовки главного контента – улучшается.

Для ленивой загрузки достаточно добавить всего один атрибут loading="lazy" в тег <img>.

Но важно! Не используйте ленивую загрузку для картинок в верхней части сайта, которые видны сразу. Это замедлит отрисовку самого важного контента (First Contentful Paint, FCP).

Для важных картинок лучше воспользоваться предзагрузкой (preload) или атрибутом fetchpriority="high".

Preload поддерживается всеми браузерами, в отличие от fetchpriority, который не работает в Firefox и Opera.

Вот примеры preload и fetchpriority:

<img src="image.jpg" fetchpriority="high" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Description">

<link rel="preload" as="image" href="image-600w.jpg" imagesrcset="image-300w.jpg 300w, image-600w.jpg 600w" imagesizes="(max-width: 600px) 300px, 600px">

Preload и fetchpriority сообщают браузеру заранее подгрузить нужные картинки, что ускоряет отрисовку важного контента.

Следим за авторским правом

Красивая картинка может обернуться серьезными проблемами, если вы использовали ее без разрешения.

Недавно Почтовая служба США заплатила 3,5 миллиона долларов за использование чужого изображения, а компания Skechers – 2,5 миллиона.

Даже если вы нашли картинку на бесплатном сервисе, убедитесь, что она действительно бесплатная. Иначе, если изображение принадлежит Getty Images, Shutterstock, Depositphotos или другому фотобанку, а у вас нет лицензии – вам грозит дорогостоящий судебный иск.

По закону об авторском праве в цифровой среде (DMCA) вам могут выставить предупреждение, если вы нарушили чьи-то авторские права. Владелец изображения, увидев его на вашем сайте, может потребовать его удаления через DMCA Takedown. Игнорировать такое требование нельзя.

Лучше перестраховаться: используйте только те изображения, на которые у вас есть права.

Используем CDN для изображений

Знаете, почему картинки на некоторых сайтах грузятся мгновенно, а на других приходится ждать? Всё дело в специальных сетях – CDN (Content Delivery Network).

CDN – это сеть серверов, расположенных по всему миру. Они хранят ваш контент (в том числе изображения) и доставляют его пользователям с ближайшего сервера. Благодаря этому картинки грузятся быстрее, а сайт в целом работает шустрее.

Но CDN умеют не только быстро доставлять. Они ещё и могут «улучшать» картинки!

При помощи специальных настроек в ссылке на картинку можно указать нужный размер или даже преобразовать изображение в более легкий формат, например, WebP.

Некоторые CDN, например, Cloudflare Polish, умеют сами определять, поддерживает ли браузер пользователя формат WebP. Если да, то CDN автоматически подгружает картинку именно в этом формате, экономя трафик и ускоряя загрузку.

Рассказываем поисковикам о своих картинках: разметка Schema.org

Хотите, чтобы ваши картинки чаще появлялись в поиске? Им нужна помощь!

Разметка Schema.org – это способ рассказать поисковикам, вроде Google, о том, что изображено на ваших картинках. Благодаря ей Google может показывать более релевантные изображения в результатах поиска.

Например, вы продаете товары. Вы можете добавить к картинкам их цену, наличие и рейтинги, используя разметку продукта (product schema). Это сделает ваши товары более заметными в поиске и привлечет потенциальных покупателей.

Разметка Schema.org полезна не только для товаров. С её помощью можно улучшить отображение статей в сервисе Google Discover и поисковой выдаче на разных устройствах. Для этого используется разметка статьи (Article schema) с изображениями разных размеров. Google сам подберет наиболее подходящий размер для каждого случая.

Вот пример разметки Schema.org для статьи:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "headline": "Заголовок статьи",
  "image": [
    "https://example.com/photos/1x1/image.jpg",
    "https://example.com/photos/4x3/image.jpg",
    "https://example.com/photos/16x9/image.jpg"
  ],
  "datePublished": "2024-01-10T08:00:00+08:00",
  "dateModified": "2024-01-10T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "Имя автора"
  },
  ...
}
</script>

Добавляем картинки в карту сайта

Чем больше поисковые роботы знают о вашем сайте, тем лучше! А они могут не знать о ваших классных картинках, если их нет в карте сайта.

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

Есть два варианта: добавить ссылки на картинки в существующую карту сайта или создать отдельную карту сайта специально для изображений.

Если вы используете WordPress, то популярные плагины Yoast SEO и Rank Math умеют автоматически генерировать карту сайта с изображениями.

Для тех, кто не пользуется WordPress, есть сторонние программы, например Screaming Frog, которые помогают создавать карты сайта.

Заключение

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

Соблюдая эти рекомендации, вы сможете:

• Увеличить скорость загрузки страниц за счет использования правильных форматов изображений, сжатия и ленивой загрузки.
• Повысить релевантность изображений для поисковых систем, используя оптимизированные имена файлов, alt-тексты и заголовки страниц.
• Сделать изображения удобными для мобильных устройств, используя адаптивные изображения и атрибуты srcset и sizes.
• Расширить охват аудитории, используя CDN для изображений и разметку Schema.org.

Помните:

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

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

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