SEO изображений: 9 ключевых элементов

1. Общие соображения по SEO изображений

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

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

2. Размер и вес изображения

Два основных фактора при оптимизации изображений — их вес и размер.

Вес:

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

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

Инструментов, которыми можно уменьшить вес изображения, много. Даже если у нас нет профессиональных редакторов вроде Photoshop или Illustrator, можно пользоваться онлайн-площадками:

• ›

  ImageOptim или TinyJPG — уменьшают вес изображения без потери качества.

• ›

  Website Speed Test Image Analysis Tool — позволяет легко скачать новые форматы изображений.

Размер:

Кроме того, важно готовить несколько размеров изображения для каждого сайта, чтобы показывать самый подходящий в зависимости от устройства. Даже если есть плагины, которые адаптируют размер изображения, на практике этот вариант может быть не лучшим. Причина в том, что, например, картинку в 1000px можно отмасштабировать до 400px, уменьшив её визуальный размер, но весить она будет столько же, сколько изображение в 1000px, что бьёт по производительности и скорости сайта.

Инструменты:

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

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

3. SEO-дружественный формат изображения

Сейчас оптимальнее всего сохранять изображения для веба в одном из следующих четырёх форматов:

• ›

  WebP: может уменьшить исходный вес изображения на 25-35%. Один из самых рекомендуемых форматов на сегодня; хотя некоторые версии браузеров его ещё не читают, это один из форматов, который даёт наибольшее сжатие без потери качества.

• ›

  PNG: лучший выбор для картинок с небольшим числом цветов и прозрачным фоном. Широко используется в логотипах.

• ›

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

• ›

  GIF: используется в анимациях и движущихся картинках.

Рекомендации:

• ›

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

• ›

  Всегда сжимайте изображения — вручную или через инструмент автоматической обработки.

• ›

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

4. SEO-поля изображения

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

Имя изображения

Имя изображения — это имя файла. Это заголовок изображения, в котором слова разделяются дефисами и подчёркиваниями. Рекомендуется включать ключевое слово, по которому мы хотим поднять изображение выше, избегая необычных символов (таких как «ñ», «?» или букв с ударением «á» и т. п.)

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

Title

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

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

Атрибут «Alt»

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

Его синтаксис такой:

<img src=”IMAGE LINK” alt=”IMAGE ALT DESCRIPTION” />

Пример оптимизированного изображения:

Посмотрим, как можно оптимизировать каждое поле для этого изображения под целевое ключевое слово «ciberseguridad pymes», у которого средняя месячная частотность — 90 (в Испании):

Имя файла:

• ›

  Неправильно: 04745892595295.jpg

• ›

  Правильно: ciberseguridad-pymes.jpg

Title: Consejos de ciberseguridad para empresarios y pymes. (Советы по кибербезопасности для предпринимателей и малого бизнеса.)

Alt-текст: Ciberseguridad para pymes y empresarios: consejos. (Кибербезопасность для малого бизнеса и предпринимателей: советы.)

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

5. Семантический контекст

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

6. Отдельная карта сайта для изображений

Чтобы боты Google эффективнее обходили наши изображения, нужно создать отдельный sitemap.xml с файлами этого типа. На WordPress его можно создать автоматически инструментами (плагинами) вроде Yoast или RankMath. Если вы работаете не на WordPress, можно использовать альтернативные инструменты или ручные средства программирования (обход URL).

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

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
</urlset>

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

→ Заголовок изображения

→ URL или путь, где сохранён файл

→ Подпись

→ Тип лицензии

→ Информация о геолокации

• ›Документация: много информации есть в блоге Google про карты сайта для изображений — с примерами, туториалами по внедрению и не только.

После завершения внедрения мы сможем проверить статус покрытия индексацией в Search Console.

7. Отложенная загрузка изображений (Lazy Loading)

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

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

Плагины для внедрения Lazy loading на WordPress

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

• ›

  BJ Lazy Load: прост в установке и настройке, один из самых популярных инструментов, больше 90 000 установок. Благодаря этому дополнению можно масштабировать изображения под разные размеры экранов.

• ›

  Lazy Load by WP Rocket: простой и лёгкий в настройке (в основном потому, что не даёт разных опций); преимущество этого плагина в том, что он не использует JavaScript-библиотеку вроде jQuery.

8. Использование CDN для изображений

CDN (Content Delivery Network) — это набор серверов, распределённых по всему миру, которые отдают закэшированный контент сайта в зависимости от того, откуда пришёл запрос. Благодаря этой хостинговой сети копию запрошенного сайта отдаёт тот сервер, который ближе к запрашивающему.

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

Если мы используем CDN (например, Cloudflare) для показа изображений, они будут скачиваться и отображаться быстрее. Эта простая цепочка напрямую улучшит наше SEO.

9. Прочие соображения

Ценные для SEO изображения, то есть те, которые мы хотим поднимать выше, должны быть в исходном коде URL. Те, что подключены как свойство background в CSS, для Google не видны: он не понимает такие таблицы стилей.

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

• ›

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

• ›

  «longdesc»: об этом атрибуте обычно забывают, но его бывает интересно внедрить в наши изображения. Это длинное описание изображения.

• ›

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

Мы упустили какие-то важные советы? С радостью вас послушаем. Оставьте комментарий ниже и не стесняйтесь делиться знаниями!