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

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

Согласно статистике за неполный 2024 год, поиск изображений в Google составляет около 20% от общего числа поисковых запросов, а в 2018 году “Яндекс” обрабатывал более милиарда запросов в сервисе “Картинки”. Сейчас этот показатель можно смело увеличивать в 2 или 3 раза. Поэтому оптимизация изображений может стать первым шагом на пути к высокому ранжированию сайта. Также есть и другие преимущества:

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

Так отображаются товары при смешанном характере запроса

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

Размер

Поисковые роботы считывают габариты и разрешение графических файлов, а при распределении позиций алгоритмам нравятся большие и качественные картинки. Для слишком крупных изображений правильнее создавать “превьюшку” и настраивать дополнительную ссылку для просмотра полноразмерного варианта. А картинки размером менее 100-150 пикселей оцениваются поисковиками как элементы дизайна, поэтому не отображаются в выдаче.

Формат

Для эффективного продвижения важно использовать форматы, индексируемые поисковиками и поддерживаемые большинством браузеров — это GIF для анимаций, PNG для сохранения высокого разрешения мелких деталей и JPEG для фотографий или других картинок. Также файлы могут быть в форматах WebP, JPEG XR и других, но они подходят не для всех браузеров. Вот, что говорит “Яндекс” по этому поводу:

Вес

Исходный размер картинки не должен превышать тот, который отображается в браузере, иначе он самостоятельно масштабирует изображение, от чего производительность сайта снижается. Также важно отметить, что “тяжелые” файлы загружаются долго, что может не понравиться пользователям. Вес изображения можно уменьшить в различных сервисах без потери качества. Например, TinyPNG, Compressor,  ImageOptim и в других.

Текст

Картинку необходимо снабдить текстом, то есть создать к ней подпись. Изображение должно соответствовать ее смыслу, а в названии файла можно использовать ключевые слова. Например, apple_iphoneSE_red_64GB.jpeg, а не классическое img_11546.jpeg.

Уникальность

Поисковики определяют оригинальность графики так же, как и в случае с текстовым контентом, поэтому уникальные изображения роботы ценят больше. Например, вы можете самостоятельно сделать фотографии товара или скриншоты для статьи, а также создать иллюстрированную инфографику с помощью дизайнера или GPT. Как в целом пользоваться нейросетями для продвижения сайта, мы рассказывали в прошлом материале. Где искать картинки и какими лайфахаками пользуется команда LZ.Media, можно узнать из другой нашей статьи.

Расположение

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

Индексация изображений

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

robots.txt

В первую очередь, нужно снять запреты на индексацию, установленные в файле robots.txt:

• ограничение доступа к папке, где располагается изображение Disallow: /bitrix/images;
• ограничение по индексации определенного формата файла Disallow: *.png.

Убедиться в разрешении на индексацию картинки можно с помощью проверки файла robots.txt в сервисах “Яндекс Вебмастер” и Google Search Console.

sitemap.xml

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

Также при создании альтернативного файла необходимо указать два пути к карте сайта для разных User-agent “Яндекс” и Google. Для отечественного поисковика достаточно прописать в файле robots.txt ссылку на основную карту сайта, а для Googlebot карта сайта должна содержать ссылки и на основной вариант, и на вариант с изображениями.

schema.org

Микроразметку используют, чтобы структурировать данные сайта и сделать их понятными для поисковых систем. С помощью этого инструмента поисковые роботы видят, что на странице есть различный релевантный контент, среди которого также находятся изображения. Для них нужны данные ImageObject (документация: http://schema.org/ImageObject). Например, фотография на сайте может иметь пометку “Товар” и отображаться в разделе “картинки” с соответствующим фильтром и автоматически переноситься в блок “покупки”.

Кроме того, использование разметки позволит пользователям идентифицировать контент, что особенно важно для интернет-магазинов. “Яндекс” в разделе “картинки” сначала демонстрирует рекламные предложения, а остальные изображения помечает специальным значком.

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

Как правильно заполнять атрибуты Title и Alt

Атрибут Alt тега img

Alt изображения в SEO — это альтернативное текстовое описание картинки в HTML. Если добавить визуал на сайт с помощью тега <img>, то alt объяснит, что находится на изображении. Это важно, так как текстовую версию сайта сканируют поисковые роботы во время индексации, а также устройства для воспроизведения и экранные ридеры, которыми пользуются люди с ограниченными возможностями.

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

• кратко описывать иллюстрацию — достаточно 50-60 символов;
• содержать один или два ключевых слова, релевантных конкретной картинке;
• быть органичным — с ключами лучше не перебарщивать.

Атрибут Title тега img

Элемент является заголовком картинки и отображается в виде всплывающей подсказки при наведении курсора на изображение. В отличие от Alt этот атрибут не обязателен, однако его использование улучшает пользовательский опыт и косвенно способствует поисковой оптимизации. Как правило, Title добавляют к ссылкам (<a>), изображениям (<img>), кнопкам (<button>) и фреймам (<iframe>), но его можно использовать практически с любым HTML-элементом.

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

• Повышать видимость. Поисковые роботы считывают визуальный контент за счет текстового описания и продвигают графические элементы в топ поисковой выдаче разделов “Картинки” и “Видео”.
• Влиять на ранжирование. Релевантные странице и тематике контента ключи можно встраивать в теги, чтобы оптимизировать сайт под ключевые запросы и поднимать его позиции в поисковых результатах.
• Снижать отказы. Благодаря четкому описанию изображений пользователи быстрее ориентируются на сайте и находят нужную информацию, а также проводят больше времени на страницах в изучении контента.
• Увеличивать CTR в выдаче. Атрибут Title выступает подсказкой для пользователей и привлекает их внимание, что повышает вероятность клика.

Рассмотрим написание тега Alt на примере с ноутбуком. Это ASUS ZenBook 14 UM3402YA -KP860 Ryzen 5-7430U/16G/1T SSD/14 черный.

Чтобы оформить карточку товара для интернет-магазина можно создать разный Alt:

• “Изображение №2” — общее название, которое может иметь любой файл в интернете, что не нравится поисковым роботам. Поэтому вряд ли они будут показывать эту картинку пользователям по поисковому запросу.
• “Техника ASUS” — не слишком абстрактно, но и не конкретно, так как изображение не отвечает другим запросам пользователей, которые могут искать не ноутбуки, а, например, веб-камеру или наушники.
• “Черный ноутбук ASUS ZenBook 14 UM3402YA Ryzen 5” — описание не передает абсолютно все характеристики, но указанных вполне достаточно. Это самый оптимальный вариант с небольшим количеством ключей.

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

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