Проверка SEO изображений

SEO-проверка изображений: как считается оценка

Инструмент загружает HTML страницы по адресу (без выполнения JavaScript) и разбирает все теги <img> — до 100 штук. Если у картинки в src стоит заглушка ленивой загрузки (data URI, «placeholder», «blank»), реальный адрес берётся из data-src, data-lazy-src, data-original и похожих атрибутов, а data-srcset засчитывается как srcset.

Оценка стартует со 100 баллов, штрафы применяются к доле изображений на странице:

Страница без единого <img> получает 50 баллов. В таблице «Все изображения» у каждой картинки свой список проблем; кнопка «С проблемами» оставляет только то, что нужно исправить.

Пример расчёта

Допустим, на странице 20 картинок: alt есть у 12 (60% — штраф −15), loading="lazy" у 5 из 17 картинок ниже первых трёх (29% — −15), размеры указаны у всех, все файлы JPG (−10), srcset нет ни у одной (−10). Итог — 50. Если дописать alt восьми картинкам, оценка вырастет до 65, а lazy у всех нижних — ещё до 80. Поэтому начинать стоит с alt и ленивой загрузки: они весят больше всего и исправляются без пересборки файлов.

Как проверить весь сайт, а не одну страницу

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

Что проверка видит, а что — нет

• Формат определяется по расширению в адресе. Картинка с CDN без расширения (/img/123?w=800) не получит пометку «Не WebP/AVIF формат», но и в долю современных форматов не попадёт.
• Элемент <picture> не учитывается. Если в <source> отдаётся AVIF или WebP, а запасной <img> ссылается на JPG, инструмент пометит JPG. Это ожидаемо — браузеры с поддержкой нового формата его получат.
• Вес файлов не измеряется — картинки не скачиваются. Тяжёлые файлы ищите через проверку скорости страницы.
• Фоновые изображения из CSS и картинки, которые вставляет JavaScript, в исходном HTML не видны.
• Размеры, заданные только в CSS (через aspect-ratio), инструмент не учтёт — ему нужны атрибуты width и height в разметке.
• JS-ленивая загрузка через data-src не отмечается как проблема у конкретной картинки, но в долю lazy для оценки засчитывается только нативный loading="lazy".

Как исправить типичные замечания

«Нет атрибута alt» и «Пустой alt=""»

Alt описывает, что изображено, а не что вы хотите продвинуть: «Серый трёхместный диван с дубовыми ножками» вместо «купить диван недорого москва». Пустой alt="" правильно ставить у декоративных элементов — разделителей, фоновых узоров, иконок рядом с текстом, который уже всё объясняет. Инструмент покажет их предупреждением — это сознательный выбор, а не ошибка. В WordPress alt заполняется в медиатеке («Альтернативный текст»); если тема выводит картинки через wp_get_attachment_image(), alt подставится автоматически.

Если картинка — ссылка, alt работает как анкор этой ссылки, так что для кнопок-изображений и баннеров он особенно важен. У логотипа в шапке достаточно названия компании.

«Нет loading="lazy"»

Ленивая загрузка нужна картинкам ниже первого экрана. Главное изображение первого экрана, которое обычно становится элементом LCP, лениво грузить нельзя — наоборот, ему стоит задать приоритет:

<img src="/img/hero-1200.webp" width="1200" height="600"
     alt="Мастерская по ремонту велосипедов" fetchpriority="high">

Поэтому инструмент не требует lazy у первых трёх картинок. Современный WordPress сам добавляет loading="lazy" и не ставит его первому изображению контента.

«Нет width/height»

Атрибуты задают пропорции до загрузки файла, и браузер резервирует место — так не возникает сдвиг макета (CLS). Указывайте реальные размеры файла, а адаптивность обеспечьте CSS:

img { max-width: 100%; height: auto; }

«Нет srcset» и «Не WebP/AVIF формат»

Связка, которая закрывает оба замечания, — <picture> с несколькими ширинами:

<picture>
  <source type="image/avif"
          srcset="/img/sofa-640.avif 640w, /img/sofa-1280.avif 1280w"
          sizes="(max-width: 700px) 100vw, 700px">
  <img src="/img/sofa-1280.webp"
       srcset="/img/sofa-640.webp 640w, /img/sofa-1280.webp 1280w"
       sizes="(max-width: 700px) 100vw, 700px"
       width="1280" height="853" loading="lazy"
       alt="Серый трёхместный диван с дубовыми ножками">
</picture>

Запасной вариант в WebP поддерживают все актуальные браузеры, поэтому JPG можно не держать. Перевести файлы в WebP или AVIF можно в конвертере изображений, уменьшить вес — в сжатии изображений; оба работают прямо в браузере. На Tilda и в конструкторах форматы и srcset обычно генерирует сама платформа — там проверяйте прежде всего alt.

Особенности WordPress

WordPress сам добавляет srcset и sizes картинкам, вставленным через редактор, и создаёт для них уменьшенные копии. Загружать WebP можно с версии 5.8, AVIF — с 6.5. Если инструмент всё равно пишет «Нет srcset», скорее всего, тема или конструктор страниц выводит <img> вручную, минуя функции WordPress, — правка нужна в шаблоне темы.

Что ещё стоит сделать для поиска по картинкам

Эти пункты инструмент не проверяет, но они влияют на то, как Google находит и показывает изображения:

• Имя файла. seryj-divan-dub.webp понятнее, чем IMG_4821.webp. Слова разделяйте дефисом.
• Текст рядом. Подпись и окружающий абзац помогают понять, о чём картинка, не хуже alt.
• Карта изображений. В sitemap можно перечислить картинки страницы тегом <image:image><image:loc>. Google поддерживает только image:loc, теги caption, title и license больше не учитываются.
• Доступность для робота. Каталог с картинками не должен быть закрыт в robots.txt.

И последнее — кеширование. Картинки меняются редко, поэтому браузеру можно разрешить хранить их год; при замене файла меняйте его имя (sofa-v2.webp), иначе посетители увидят старую версию. Пример для nginx:

location ~* \.(avif|webp|jpe?g|png|gif|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Требования Google собраны в руководстве по изображениям, а связь картинок со скоростью — в статье про Core Web Vitals.