SEO зображень і alt-атрибути

SEO зображень і alt-атрибути — це три різні питання, які зазвичай змішують: чи знайде Google картинку, чи зрозуміє, що на ній, і чи не сповільнить вона сторінку. У Google є посібник щодо перших двох, а швидкість описана в матеріалах web.dev. У цьому уроці — що задокументовано, що насправді практика і які правила з чек-листів, включно з «лише латиниця в імені файлу» та «alt до 125 символів», у документації Google не зустрічаються.

Спиратися будемо на посібник Google з SEO зображень.

Перше: щоб картинку знайшли

• Елемент img. Google знаходить зображення в атрибуті src елемента img, навіть коли він вкладений в інші елементи, наприклад picture; зображень із CSS він не індексує. Картинка, задана через background-image, для пошуку не існує.
• Запасний src. Деякі браузери й сканери не розуміють picture і srcset, тому завжди вказуйте запасну адресу в src.
• Формати. Підтримуються BMP, GIF, JPEG, PNG, WebP, SVG і AVIF; розширення файлу бажано тримати відповідно до типу.
• Карта зображень. Адреси зображень, які Google міг не знайти, можна передати картою зображень, і в ній допускаються адреси з інших доменів, що пасує для CDN; домен CDN радять підтвердити в Search Console. Розширення карти — в уроці про XML-карти, а на одну адресу сторінки може припадати до 1000 зображень.
• Одна адреса. Якщо зображення використовується на багатьох сторінках, посилайтеся на нього завжди тією самою адресою, щоб Google міг кешувати й перевикористовувати його.
• Не закрито. Папки із зображеннями не мають бути закриті в robots.txt; що саме знаходить обхід, показує сканер сайту.

Приклад із запасним варіантом:

<picture>
  <source type="image/avif" srcset="sofa.avif">
  <source type="image/webp" srcset="sofa.webp">
  <img src="sofa.jpg" alt="Сірий кутовий диван" width="800" height="600">
</picture>

Друге: щоб зрозуміли, що на картинці

Alt — головний атрибут, але не єдине джерело

Формулювання Google точне: найважливіший атрибут, коли йдеться про метадані зображення, — alt-текст, і він же покращує доступність для людей, які не бачать зображень. Але Google використовує alt разом з алгоритмами компʼютерного зору та вмістом сторінки, щоб зрозуміти предмет зображення. Якщо зображення слугує посиланням, alt використовується як анкорний текст.

Як писати: створюйте корисний, насичений інформацією текст, що доречно використовує ключові слова й відповідає контексту сторінки; не набивайте alt ключовими словами — це погіршує враження і може призвести до сприйняття сайту як спаму. Приклади з документації: без alt — погано; список із десятків слів — погано; «puppy» — краще; «Dalmatian puppy playing fetch» — найкраще.

Типи зображень: це правила W3C, а не Google

Зверніть увагу на останній рядок: старе правило «дублюй текст із картинки дослівно» за W3C для випадку, коли текст уже є поруч, не підходить.

Імена файлів: легка підказка і мова аудиторії

Про імʼя файлу сказано стримано: воно може дати Google дуже легкі підказки про предмет; за можливості використовуйте короткі, але описові імена — my-new-black-kitten.jpg краще, ніж IMG00023.JPG; загальних імен на кшталт image1.jpg краще уникати. А от правило «лише латиниця» посібник спростовує: якщо ви локалізуєте зображення, не забудьте перекласти й імена файлів, памʼятаючи про правила кодування URL для нелатинських символів. Для російсько- й україномовного сайту це означає: імʼя файлу українською чи російською припустиме, а в посиланні воно кодується — див. урок про структуру URL.

Контекст довкола зображення

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

Третє: що робить картинку помітною

• Бажане зображення. Вибір превʼю повністю автоматичний і враховує кілька джерел; вплинути можна метаданими, наприклад властивістю primaryImageOfPage або зображенням головної сутності сторінки.
• Структуровані дані. Для розширених результатів і значка в Google Images атрибут image обовʼязковий у типах розмітки, що це підтримують. Для статей рекомендовано кілька зображень високої роздільності (щонайменше 50 тисяч пікселів за добутком ширини на висоту) в пропорціях 16×9, 4×3 і 1×1.
• Ліцензії. Метадані ліцензії можуть зробити зображення придатним для значка «Licensable», що веде на ліцензію; для цього потрібно, щоб сторінки із зображеннями відкривалися без акаунта й входу.
• Заголовок і опис сторінки. Google автоматично формує заголовок і сніпет із кількох джерел, включно з title та мета-тегами сторінки.

Четверте: швидкість і ліниве завантаження

Посібник Google нагадує, що зображення часто становлять найбільшу частину ваги сторінки, тому потрібні сучасні прийоми оптимізації та адаптивні зображення. Конкретні техніки описані на web.dev:

• Розміри. За посібником із CLS, завжди вказуйте атрибути width і height в зображень і відео або резервуйте місце через CSS aspect-ratio: браузер виділить місце заздалегідь, і верстка не стрибне.
• Головне зображення. За посібником із LCP, ніколи не завантажуйте ліниво зображення, що визначає LCP, — це завжди дає зайву затримку і погіршує показник. Підказка браузеру про пріоритет — атрибут fetchpriority.
• Решта зображень. Ліниве завантаження доречне для картинок нижче першого екрана. У Google до нього є власна умова: рішення має завантажувати вміст, коли він потрапляє в область перегляду, не вимагаючи дій користувача на кшталт прокрутки чи кліку, бо Google Search не взаємодіє зі сторінкою. І окремо: не додавайте ліниве завантаження до вмісту, який, імовірно, одразу видно під час відкриття сторінки. Підходять вбудоване ліниве завантаження браузера та IntersectionObserver.

Не варто чекати від швидкості гарантій: добрі результати у звітах із Core Web Vitals не гарантують верхніх позицій. Докладніше про показники — в уроці про Core Web Vitals.

Як побачити результат

У звіті про ефективність фільтр типу пошуку розділяє трафік: «Зображення» — трафік із результатів вкладки Google Images, а «Веб: мультимодальний» — пошук за картинками, зокрема через Google Lens. Так видно, чи є в сайту потік із картинок, перш ніж вкладатися в оптимізацію. Сторінки з найбільшим трафіком, з яких варто почати, показує звіт щодо сторінок, а загальний стан сторінки — аналіз сторінки та аудит сайту.

Чого в документації Google немає

Ці поширені твердження в документації не зустрічаються, тому як правила їх подавати не можна:

• «в імені файлу лише латиниця, три-пʼять слів»: Google радить перекладати імена файлів під час локалізації;
• «alt — 80–125 символів, довше скрінрідери обріжуть»: довжини Google не називає;
• «доступність — прямий фактор ранжування» і «Google штрафує за поганий LCP»;
• «зображення в розмітці — щонайменше 1200 px»: для статей названо 50 тисяч пікселів за добутком сторін;
• «Google Lens вимагає чіткого зображення та структурованих даних»;
• «10–30% трафіку приходить із Google Images», цільова вага (hero до 100 КБ, іконка менш як 5 КБ), економія AVIF у 50% і відсоток підтримки браузерами — це орієнтири й вимірювання сторонніх джерел, на своїх картинках їх потрібно перевіряти;
• кейс «LCP з 3,8 до 1,4 с, трафік із Images +340%» як доказ.

Це не означає, що протилежне вірне. Це означає, що цифри — спостереження, а надійна основа — те, що описано в посібнику.

Чек-лист

1. Зображення вбудовані елементами img із src; CSS-фон не використовується для вмісту.
2. Для picture і srcset указано запасний src; формат зі списку підтримуваних.
3. У зображення одна адреса на всіх сторінках; папки не закриті в robots.txt.
4. Alt інформативний і за контекстом; без набору ключових слів; для декоративних — порожній.
5. Імена файлів короткі й описові, мовою аудиторії, з урахуванням кодування.
6. Картинка розташована поруч із релевантним текстом.
7. В усіх зображень задано width і height; LCP-зображення не завантажується ліниво.
8. Для потрібних типів сторінок — структуровані дані з image; для статей — кілька пропорцій.
9. Трафік із картинок дивляться у звіті про ефективність за типом пошуку.

Помилки

• Змістовні зображення в CSS background.
• Alt із набору ключових слів або однаковий у всіх картинок.
• Ліниве завантаження на головному зображенні першого екрана.
• Зображення без width і height.
• Вважати, що кирилиця в імені файлу — помилка, і не перекладати імена під час локалізації.
• Закрити папку із зображеннями в robots.txt.

Що далі

Наступний урок — про заголовки та вміст сторінки: заголовки й контент.