При додаванні картинки в HTML-код сайту існує можливість вказати додаткові атрибути для неї, а саме Alt і Title. У багатьох CMS функція заповнення атрибутів до картинок реалізована в інтерфейсі редактора зображень. В HTML-коді це виглядає так:
<img src="Шлях-до-картинки" alt="Текст-1" title="Текст-2" />
Атрибут Alt
Alt – це альтернативне джерело інформації про картинку, яке показується користувачам, якщо браузер не може завантажити дане зображення (через слабкий інтернет або відключені зображення в браузері).
Атрибут Alt у картинки має прямий вплив на SEO – допомагає пошуковику зрозуміти, що зображено на фото. Тобто, правильне заповнення Alt-атрибутів для фотографій допоможе їм краще ранжуватися при пошуку за картинками.
Правила заповнення Alt:
- Текст Alt повинен коротко і правильно описувати зміст картинки
- Складатися з 3–5 слів, але не більше 250 символів
- Може містити ключовий запит, якщо він відповідає картинці
- Не повинен бути спамним (перерахування ключових слів в Alt нічого не дасть з точки зору SEO)
Атрибут Title
Title – цей атрибут надає додаткову інформацію користувачу про картинку, при наведенні курсору на неї.
Атрибут Title не має прямого впливу на SEO, але може бути корисним для користувачів, оскільки покращує зручність користування сайтом (впливає на поведінковий фактор).
Правила заповнення Title:
- Містить пояснювальну інформацію про картинку
- Обмежень по довжині немає, але занадто довгий текст може бути незручним для сприйняття користувачами
- Зміст ключового запиту не вплине на SEO, але буде корисним для кращої орієнтації користувача на сайті
- Важливо пам’ятати, що Title у картинок відображаються лише в десктопній версії сайту і за умови наведення курсору на картинку. Тобто важливу інформацію не варто розміщувати в Title – її слід розмістити поряд у описі картинки, яке видно користувачу постійно
Description (Caption) для картинок
Description або Caption – опис картинки. Не є HTML-атрибутом для картинки, оскільки це текстове поле, яке реалізовано в інтерфейсі редакторів зображень у багатьох CMS і вміст якого виводиться поряд з зображенням на сторінках сайту.
Вміст поля опису до картинки показується відвідувачам постійно, найчастіше під картинкою або збоку від неї. Розташування та стиль залежать від використаного шаблону.
Це поле може називатися по-різному, наприклад у CMS WordPress для введення опису зображень є 2 поля: Caption і Description. Відмінність полягає в тому, що Caption виводиться на сторінці, де розміщена картинка, а Description виводиться як зміст сторінки вкладення картинки.
Порада SEO-спеціаліста: Правильне заповнення всіх атрибутів для картинок корисно, оскільки кожен з них може полегшити взаємодію користувача з сайтом. Зібравши воєдино інформацію вище, можна дати наступні поради:
- Alt – атрибут, який у більшості випадків не видно користувачу, але впливає на SEO;
- Title – атрибут, який в деяких випадках видно користувачу і опосередковано впливає на SEO;
- Description – поле, вміст якого завжди видно користувачу і прямо впливає на SEO, оскільки є частиною контенту.
