SEO-оптимизация изображений

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

Чтобы добиться успеха в SEO-оптимизации изображений, обратите внимание на:

• Возможность обнаружения, сканирования и индексации ваших изображений.
• Авторитет страниц, на которых размещены ваши изображения.
• Актуальная релевантность этих страниц.
• Подписи к изображениям.
• Атрибуты изображения (имя файла, формат, размер и атрибут alt).
• Как быстро загружаются ваши изображения.
• Предоставление контекста изображений с помощью разметки Schema.

Что такое SEO-оптимизация изображений?

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

Как и в случае со страницами, поисковые системы пытаются понять смысл изображений. Чтобы ваши изображения высоко ранжировались, вы должны сделать все возможное, чтобы помочь поисковым системам «понять» изображение. В этой статье мы объясним, как это сделать.

Зачем оптимизировать изображения для SEO?

Есть две причины чтобы заниматься поисковой оптимизации изображений:

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

Теперь вы спрашиваете себя: «Даст ли SEO-оптимизация изображений для меня много трафика?»

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

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

Что влияет на ранжирование изображений?

Существует целый список факторов, влияющих на ранжирование ваших изображений:

• Обнаружение и индексация
• Авторитет страницы
• Актуальная релевантность этой страницы
• Похожие изображения
• Изображения, которые связаны
• Подписи к изображениям
• Атрибуты изображения (имя файла, формат, размер и alt)
• Время загрузки изображения
• Используйте схему для передачи контекста

Мы объясним все это подробно ниже.

Обнаружение и индексация

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

Помогите поисковым системам обнаружить ваши изображения с помощью файлов Sitemap

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

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

Рекомендации по XML-картам сайта для изображений:

• Каждый <url> тег может содержать до 1000 image:image тегов. Другими словами, вы можете указать 1000 изображений на страницу.
• Чтобы указать заголовок изображения, используйте image:caption.
• Чтобы указать географическое положение изображения, используйте image:geo_location.
• Чтобы указать лицензию изображения, используйте image:license.

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

Что нельзя просканировать, нельзя проиндексировать. Поэтому убедитесь, что неправильно настроенный файл robots.txt не блокирует доступ поисковых систем к вашим изображениям. Не препятствуйте доступу роботов Googlebot-Image и Googlebot к вашим изображениям в файле robots.txt!

Если вы хотите, чтобы ваши изображения индексировались поисковыми системами, убедитесь, что они не имеют директивы X-Robots-Tag HTTP Header noindex и не канонизированы с помощью HTTP-заголовка.

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

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

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

Авторитет изображений

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

Три лучших результата:

1. wikipedia.org
2. kinopoisk

Что у них общего? У них большой авторитет. Здесь изображение значительно выигрывает от авторитета страницы, на которой оно находится. Помните об этом при оптимизации изображений и при выборе страниц для размещения изображений.

Актуальность страницы

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

Обратите внимание, что WordPress создает специальную страницу «вложения изображения» для каждого загружаемого вами изображения. Это не добавляет ценности с точки зрения SEO, поэтому мы рекомендуем отключить это. Это расходует краулинговый бюджет и создает почти дублированный контент.

Популярность изображения

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

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

Похожие изображения

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

В случае запроса "Дензел Вашингтон" вы должны собрать разные его фотографии и разместить их на одной странице.

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

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

Подписи к изображениям и окружающий текст

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

Мы различаем два типа текста, которые находятся в непосредственной близости от изображений; первый из них - подписи, а второй - объемный текст.

Вот пример изображения с соответствующим окружающим текстом:

Атрибуты изображения

Вот пример фрагмента HTML для изображения:

<img src="https://example.com/images/denzel-washington-graduating-high-school.jpeg" alt="Дензел Вашингтон заканчивает среднюю школу" />

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

Свойства изображения:

• Имя файла изображения.
• Формат изображения.
• URL-адрес изображения.
• srcset атрибут изображения для показа адаптивных изображений.
• alt атрибут изображения.

Как назвать изображения для SEO

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

• Хороший: denzel-washington-graduating-high-school
• Плохо: photo

Форматы изображений

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

• Хорошо: .jpeg для фото.
• Плохо: .gif для скриншота, который должен показывать детали.

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

Формат изображения	Лучше всего использовать для
JPEG	Фото
PNG	Логотипы (поскольку он поддерживает прозрачный фон) и изображения, которые вы хотите сохранить четкими, например скриншоты
GIF	Анимации
SVG	Для создания изображений, которые можно масштабировать без потери качества (векторные изображения). Карты, значки и логотипы являются распространенными примерами.
WebP	Формат WebP, разработанный Google, представляет собой альтернативу JPG и PNG, которая лучше сжимается. На данный момент он не поддерживается в Safari (и вообще не поддерживается в Internet Explorer).

URL-адрес изображения

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

• Хорошо: /images/denzel-washington-graduating-high-school.jpeg
• Плохо: /wp-content/uploads/2016/09/images/denzel-washington-graduating-high-school.jpeg

Атрибут Image srcset для показа адаптивных изображений

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

К счастью, вы можете определить, какие версии изображения будут использоваться для разных устройств и разрешений экранов. Например, если вы просматриваете сайт на своем телефоне, вам не нужно изображение шириной 1024 px. Вы можете обойтись только 400 px версией, что сэкономит вам много трафика.

Вы можете определить, какое изображение использовать для какой ширины области просмотра, используя srcset атрибут. Например:

<img src="/images/denzel-washington-graduating-high-school.jpeg" srcset="/images/denzel-washington-graduating-high-school-400.jpg 375w, /images/denzel-washington-graduating-high-school-800.jpg 768w" alt="Дензел Вашингтон заканчивает среднюю школу" />

Alt для изображений

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

Время загрузки изображения

Скорость страницы является одним из факторов ранжирования для поисковых систем (с мая 2021 года включена в Core Web Vitals). Поэтому важно, чтобы изображения загружались быстро. Кроме того, изображения используют тот же краулинговый бюджет, что и ваши страницы и другие ресурсы.

Чтобы ваши изображения загружались быстро, убедитесь, что вы:

• Выбрали правильный формат изображения.
• Выдаете правильный размер изображения (как описано в разделе Атрибут srcset ).
• Сжали изображения.

Сжатие изображений

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

• С потерями: размер файла значительно уменьшается, но изображения теряют качество. Этот параметр обеспечивает самую быструю загрузку изображений.
• Без потерь: размер файла почти не уменьшается, а изображения не теряют качества. Эта опция не сильно поможет вам в быстрой загрузке изображений.
• Что-то сренее: это золотая середина между «с потерями» и «без потерь», уравновешивающая уменьшение размера файла и потерю качества.

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

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

Онлайн-приложения:

• TinyPNG.
• Imagify.
• Imagecompressor.

Плагины для WordPress:

• ShortPixel.
• EWWW Image Optimizer.
• Imagify.
• Smush.
• TinyPNG.

Используйте Schema для передачи контекста

Разметьте любое изображение с помощью Schema.org. Это помогает поисковым системам понять его контекст, а также повышает вероятность того, что вы получите нулевую выдачу с этим изображением. Наличие изображения делает нулевую выдачу более заметным, и поэтому вы получите больше кликов.

Вот пример фрагмента кода, ссылающегося на изображение:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://politay.pro/academy/image-seo/"
    },
    "headline": "SEO для изображений",
    "image": {
        "@type": "ImageObject",
        "@id": "https://politay.pro/academy/image-seo/",
        "url": "https://politay.pro/media/social-cards/image-seo@2x.png",
        "width": 1200,
        "height": 600,
        "caption": "SEO для изображений"
    },
    "datePublished": "2022-05-17T08:00:00+08:00",
    "dateModified": "2022-05-17T09:20:00+08:00",
    "author": {
        "@type": "Person",
        "name": "Politay"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Politay",
        "logo": {
          "@type": "ImageObject",
          "url": "https://politay.pro/wp-content/uploads/2021/11/logov1.png"
        }
    },
    "description": "Полезное руководство по повышению позиций ваших изображений"
}
</script>

Несколько советов:

• Убедитесь, что изображения, на которые есть ссылки в разметке Schema.org, можно сканировать и индексировать.
• Изображения должны соответствовать странице.
• Изображения должны быть в формате .jpg, .png, или gif.

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

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

Список инструментов:

• Тест скорости сайта
• Google Lighthouse в Chrome DevTools
• GTMetrics
• Анализатор TinyPNG - Этот инструмент не только показывает текущий размер ваших изображений, но и сжимает их в реальном времени, чтобы вы могли сразу увидеть, сколько вы можете сэкономить.

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

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