Перевірка 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 для всіх нижніх картинок додасть ще 15 — буде 80. Тож починати варто з alt і лінивого завантаження: вони важать найбільше й виправляються без перезбирання файлів.

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

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

Що перевірка бачить, а чого ні

• Формат визначається за розширенням в адресі. Картинка з CDN без розширення (/img/123?w=800) не отримає позначку «Не WebP/AVIF формат», але й до частки сучасних форматів не потрапить.
• Елемент <picture> не враховується. Якщо <source> віддає AVIF чи WebP, а запасний <img> посилається на JPG, інструмент позначить JPG. Це очікувано.
• Вага файлів не вимірюється — зображення не завантажуються. Важкі файли шукайте через перевірку швидкості сторінки.
• Аналізуються перші 100 тегів <img>. На довгих сторінках каталогу з нескінченним прокручуванням решта картинок до звіту не потрапить — перевіряйте шаблон на коротшій сторінці.
• Фонові зображення з CSS і картинки, які додає JavaScript, у вихідному HTML не видно.
• Розміри, задані лише в CSS через aspect-ratio, не враховуються — потрібні атрибути в розмітці.
• 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 знаходить і показує картинки:

• Назва файлу. siryi-dyvan-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.