SEO для изображений: как ранжировать ваши фотографии в Google

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

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

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

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

Изображения появляются в обычных поисковых системах Google, если Google предполагает, что для поиска требуется изображение, или если пользователи напрямую вводят ”фото» или “изображение” в поиске.

Источник: Google
Alt: результаты обычного поиска по изображениям.

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

Источник: Google

Alt: результаты поиска Google Images.

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

Источник: Google

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

Google Lens и Google Discover, а также недавно запущенные обзоры искусственного интеллекта также отображают изображения.

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

Преимущества разумной оптимизации изображений

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

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

Два элемента веб-страницы обычно замедляют время загрузки — JavaScript (JS) и изображения. Хотя вы можете решить проблемы с JS или отложить загрузку несущественных скриптов, изображения, которые помещаются в окно просмотра браузера, должны загружаться вместе с другим контентом.

Их оптимизация для SEO сократит время загрузки и улучшит UX и продажи.

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

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

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

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

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

У вас есть два основных способа оптимизировать изображения для SEO — оптимизировать файлы изображений и оптимизировать страницы, на которых размещены изображения. Давайте рассмотрим советы по оптимизации изображений для обоих этих методов.

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

Первый аспект оптимизации изображений — это технические аспекты и теги.

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

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

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

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

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

Источник: SE Ranking

Alt: SE Ранжирование выделяет изображения, которые нуждаются в оптимизации.

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

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

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

Источник: Google

Alt: информационные статьи с изображениями, которые могут содержать ссылки.

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

Что касается форматов изображений, у вас есть четыре основных варианта.

• JPEG. Небольшой по размеру, но при сжатии значительно ухудшается качество. Отлично подходит для изображений средней четкости, где качество не является большой проблемой, — фотографий продуктов или миниатюр блогов.
• PNG. Гораздо лучшего качества, но при этом отображается файл большого размера. Следует приберечь для изображений, где качество имеет ключевое значение, например, для фотосъемки или изображений с мелкими деталями.
• WEBP. Формат, который сочетает в себе лучшие части JPEG и PNG, имеет на 20% меньший размер файла и не так сильно теряет качество при изменении размера изображений. Этот метод пока не получил широкого распространения и поддерживается не всеми старыми браузерами.
• SVG. Отлично подходит для изменения размера и анимации, но работает только с векторными изображениями, что делает его идеальным для логотипов и интерактивной веб-графики. Не работает с фотографиями или обычными изображениями.

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

Наконец, вы должны использовать правильный HTML-код для отображения изображений. Лучший тег для этого — <img>. Вы также можете использовать <picture> для изучения различных вариантов отображения.

С помощью тега <img> вы предоставляете несколько вариантов файлов в зависимости от области просмотра браузера. Это ускорит время загрузки. Это можно сделать с помощью атрибутов “srcset” и «sizes».

<img srcset =“yourimage-1080-500.jpg 1080w, yourimage-300-100.jpg 300w”

размеры = “(максимальная ширина: 1080px) 1080w, (максимальная ширина: 400px) 300px)”>

Атрибут «Размеры» создает условия для загрузки различных изображений в зависимости от области просмотра браузера, в то время как scrset предлагает различные размеры для загрузки в разных условиях. Вы также можете загружать изображения разного качества в зависимости от плотности пикселей дисплея, чтобы избежать показа изображений высокой четкости на устройствах, неспособных их отрисовывать.

Альтернативой является использование тега <picture> и вложение тегов <source> с разными условиями отображения изображения и реализация тега <img>, к которому можно вернуться. Он предлагает почти те же варианты адаптивной загрузки изображений.

Оптимизация целевых страниц с изображениями

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

Во-первых, упростите поиск вашего изображения Google. Убедитесь, что страница не заблокирована robots.txt, а страницу и ее изображение можно найти, просматривая ссылки на вашем сайте, и что ваш сайт легко сканировать.

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

Источник: Google

Alt: пример структурированного кода данных для изображения.

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

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

Источник: X

Alt: данные Open Graph помогают форматировать предварительные просмотры в социальных сетях.

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

Источник: Filtergrade

Alt: пример данных Open Graph.

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

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

Вы можете сделать это изначально, добавив атрибут loading к тегу img следующим образом.

<img src =“yourimage.jpg” загрузка =“ленивая”>

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

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

Краткие сведения

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

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

БИОГРАФИЯ: Светлана Андриишина — специалист по связям с общественностью в SE Ranking. Помимо создания контента, она влюблена в пленочную фотографию и фотографирует красоту обычных дней.