Шаблон SEO зображень і alt-тексту

Описові назви файлів

Перейменовуйте файли зображень перед завантаженням, щоб вони описували об'єкт і допомагали пошуку за зображеннями.

Називайте файли ще до завантаження

Пошукові системи читають назву файлу як один із сигналів про те, що зображено, а зрозуміла назва полегшує керування медіатекою. Замініть стандартні назви з камери на кшталт [IMG_4827.jpg] коротким, зрозумілим для людини описом.

• Опишіть об'єкт: [chervone-shkiryane-krislo.jpg], а не випадковий набір символів.
• Використовуйте дефіси між словами; уникайте пробілів, підкреслень і спеціальних символів.
• Пишіть малими літерами для узгодженості на різних серверах.
• Будьте лаконічні: кілька змістовних слів кращі за довгий ланцюжок ключів.

Не переспамлюйте ключовими словами й не повторюйте ту саму фразу в кожному файлі. Називайте кожне зображення відповідно до того, що воно справді показує, щоб назва залишалася точною й корисною.

Швидка перевірка: Чи міг би хтось здогадатися про зображення лише за назвою файлу? Якщо так — ви впоралися. Для серії схожих знімків додайте відмітну деталь, як-от колір, ракурс чи модель: [nazva-tovaru-vyhliad-sprava.jpg] і [nazva-tovaru-vyhliad-zboku.jpg].

Alt-текст (передусім доступність)

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

Пишіть alt-текст насамперед для людей

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

• Будьте конкретні й лаконічні: [бариста наливає латте-арт у білу чашку], приблизно одне коротке речення.
• Передайте призначення: опишіть, чому це зображення тут, а не лише його візуальні деталі.
• Пропускайте зайве: не починайте з [зображення] чи [фото]; технологія вже повідомляє, що це зображення.
• Не переспамлюйте ключами: одна природна згадка доречного терміна — це нормально; перелік ключових слів шкодить доступності.

Для суто декоративних зображень, які не несуть інформації, використовуйте порожній alt ([alt=""]), щоб екранні читачі їх пропускали. Якщо зображення ще й є посиланням, alt-текст має описувати призначення чи дію посилання.

Порада: Якщо підпис уже повністю описує зображення, залиште alt коротким, щоб не повторювати ті самі слова двічі.

Стиснення й сучасні формати (WebP/AVIF)

Зменшіть розмір файлу й перейдіть на сучасні формати, щоб покращити час завантаження та LCP.

Стискайте й модернізуйте кожне зображення

Великі зображення сповільнюють сторінки й можуть шкодити показнику Largest Contentful Paint. Зменшуйте розмір файлу перед завантаженням і віддавайте сучасні формати, які стискаються значно краще за старіші за схожої якості.

• Оберіть правильний формат: AVIF або WebP для фотографій і більшості графіки; SVG для логотипів і простих іконок; залишайте PNG лише тоді, коли потрібна прозорість чи чіткий текст.
• Змінюйте розмір під відображення: не віддавайте файл [4000px] у слот [800px].
• Стискайте розважливо: прагніть найменшого файлу, який усе ще виглядає чисто; протестуйте кілька рівнів якості й порівняйте.
• Забезпечте запасні варіанти: використовуйте елемент picture, щоб запропонувати AVIF або WebP із запасним JPEG для старіших браузерів.

Робочий процес: експортуйте в правильних розмірах, пропустіть файл через інструмент стиснення, а потім переконайтеся, що він виглядає чітко на екрані з високою роздільною здатністю. Для героя чи головного зображення надайте пріоритет швидкому завантаженню, оскільки саме воно часто є елементом LCP на сторінці.

Адаптивні зображення й відкладене завантаження

Віддавайте потрібний розмір для кожного пристрою й відкладайте зображення за межами екрана, щоб пришвидшити завантаження.

Підбирайте розмір і відкладайте зображення

Адаптивна розмітка дозволяє браузеру обрати найкращий файл для кожного екрана, а відкладене завантаження затримує зображення, до яких відвідувач ще не прокрутив. Разом вони зменшують марно витрачені байти й пришвидшують перше відображення.

• Використовуйте srcset і sizes: надавайте кілька значень ширини, щоб телефони завантажували малі файли, а великі екрани отримували чіткі.
• Задавайте width і height: додавайте явні розміри (або aspect-ratio), щоб зарезервувати місце й запобігти зсуву макета.
• Відкладайте завантаження нижче лінії згину: додавайте [loading="lazy"] до зображень, що починаються за межами екрана.
• НЕ відкладайте завантаження зображення LCP: герой або головне зображення над лінією згину має завантажуватися одразу; натомість позначте його як високопріоритетне.

Чому це важливо: відкладання зображень за межами екрана вивільняє пропускну здатність для того, що видно першим. Резервування місця заданими розмірами не дає контенту стрибати, коли зображення надходять, що захищає ваш показник Cumulative Layout Shift і зручність читання.

Підписи, контекст навколо й карти сайту для зображень

Підсилюйте релевантність зображень контекстом на сторінці й допомагайте сканерам знаходити зображення.

Додавайте контекст і полегшуйте виявлення

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

• Додавайте підписи, коли це доречно: підписи читають частіше за основний текст, тож використовуйте їх для ілюстрацій, діаграм і знімків товарів.
• Розміщуйте зображення поруч із релевантним текстом: ставте кожне зображення біля абзацу, який воно ілюструє.
• Використовуйте елемент figure: обгортайте зображення та його figcaption разом для чіткої, семантичної структури.
• Перелічуйте зображення в карті сайту: додавайте записи зображень (або окрему карту сайту для зображень), щоб сканери могли виявляти графіку, завантажену скриптами чи галереями.

Застосуйте це: для зображення за адресою [URL сторінки] напишіть підпис, який додає інформацію, а не повторює alt-текст, і переконайтеся, що найближчий заголовок і текст згадують той самий об'єкт. Потім підтвердьте, що файл присутній у вашій XML-карті сайту.

Структуровані дані зображень і ліцензування

Розмічуйте зображення, щоб вони могли з'являтися з розширеними результатами й чіткою ліцензією.

Розмічуйте й ліцензуйте свої зображення

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

• Використовуйте правильну схему: посилайтеся на URL зображень високої роздільної здатності у своїй розмітці Product, Recipe, Article або ImageObject.
• Надавайте великі, доступні для сканування зображення: структуровані дані мають вказувати на зображення, які не заблоковані й відповідають мінімальним вимогам до розміру.
• Додавайте метадані ліцензування: включайте [license] та [acquireLicensePage] в ImageObject, щоб умови використання були зрозумілими.
• Зберігайте метадані чесними: поля авторства ([creator]) і копірайту мають відповідати сторінці й фактичним правам на зображення.

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

Що робить alt-текст хорошим?

Хороший alt-текст лаконічно описує, що показує зображення й чому воно на сторінці, простою мовою, яку може озвучити екранний читач. Тримайте його в межах приблизно одного речення, пропускайте фрази на кшталт «зображення» й згадуйте доречний термін лише тоді, коли він вписується природно. Мета — доступність, а не густина ключових слів.

Коли слід використовувати порожній alt-текст (alt="")?

Використовуйте порожній атрибут alt для суто декоративних зображень, які не несуть інформації, — як-от фонові прикраси, роздільники чи іконки поруч із текстом, що вже каже те саме. Порожній alt каже екранним читачам пропустити зображення. Залиште описовий alt-текст для зображень, що несуть зміст.

Який формат зображень використовувати заради швидкості?

Для більшості фотографій і графіки AVIF або WebP дають найменші файли за хорошої якості, тож вони найкращі для швидкості сторінки. Використовуйте SVG для логотипів і простих іконок, а PNG залишайте переважно для прозорості чи чіткого тексту. Віддавайте запасний JPEG через елемент picture для старіших браузерів.

Чи варто відкладати завантаження всіх зображень?

Ні. Відкладайте завантаження зображень, що починаються нижче лінії згину, щоб браузер не завантажував їх, доки вони не знадобляться. Не відкладайте зображення героя чи головне зображення над лінією згину, бо зазвичай це ваш елемент LCP, і його затримка сповільнює сприйняття завантаження. Завантажуйте його одразу й з високим пріоритетом.

Чи справді описові назви файлів допомагають SEO?

Вони допомагають пошуковим системам і пошуку за зображеннями зрозуміти, що зображено у файлі, і полегшують керування вашою медіатекою. Використовуйте короткі назви малими літерами через дефіс, які описують об'єкт. Це один із багатьох допоміжних сигналів, тож поєднуйте їх із сильним alt-текстом і контекстом навколо, а не покладайтеся лише на назви файлів.

Як пошукові системи знаходять мої зображення?

Сканери виявляють зображення, переходячи вашим HTML, читаючи текст навколо й підписи та розбираючи вашу карту сайту. Перелік зображень у XML-карті сайту (або окремій карті сайту для зображень) допомагає показувати візуали, завантажені скриптами чи галереями. Переконайтеся, що зображення не заблоковані правилами robots і розміщені поруч із релевантним контентом на сторінці.