Alt-тексти для зображень: як писати їх правильно й чому це важливо для SEO

На більшості сайтів малого бізнесу є десятки фотографій: роботи майстрів, інтер’єр, команда, товари. І майже на кожному другому сайті в цих фото немає опису, або там стоїть щось на кшталт «IMG_4532» чи «фото1». Alt-тексти для зображень — дрібниця, яку легко пропустити під час запуску, але вона впливає одразу на три речі: як сторінку розуміє Google, чи потраплять ваші фото в Google Картинки і чи зможе сайтом користуватися людина з порушенням зору. У цьому посібнику ви отримаєте формулу опису, приклади для різних ніш і типів зображень, покрокову перевірку сайту та план дій на тиждень.

Матеріал розрахований на власника бізнесу, а не на програміста. Вам не знадобиться редагувати код: майже всі системи керування мають окреме поле для опису зображення, і все, що потрібно, — знати, що туди написати.

Ми свідомо не будемо обіцяти, що підписані фото самі виведуть сайт нагору. Опис картинок — це не чарівна кнопка, а частина акуратно зробленої сторінки. Зате це одна з небагатьох SEO-робіт, яку можна повністю виконати самостійно за кілька вечорів і без жодних витрат.

Що таке alt і хто його насправді читає

Alt — це атрибут зображення в коді сторінки, короткий текстовий опис картинки. Звичайний відвідувач, який дивиться на сайт з телефона чи комп’ютера, цього тексту не бачить. Але є три ситуації, коли саме він стає головним:

• Програма екранного читання. Людина з порушенням зору слухає сайт голосом, і замість фото програма зачитує alt. Без нього вона почує «зображення», назву файлу або взагалі нічого.
• Картинка не завантажилася. Слабкий мобільний інтернет, помилка сервера, заблоковані зображення в поштовому клієнті — і на місці фото з’являється текст з alt.
• Пошукова система. Google дедалі краще розпізнає вміст зображень сам, але alt залишається однією з головних підказок, що на фото і як воно пов’язане з темою сторінки.

У системах керування сайтом поле зазвичай називається «Альтернативний текст», «Alt» або «Опис для доступності». У WordPress воно є у вікні медіафайлу поруч із заголовком, підписом і описом. Не плутайте ці поля: заголовок зображення бачать лише адміністратори, підпис показується під фото всім відвідувачам, а alt працює «за кадром».

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

Де шукати поле alt у різних системах

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

• WordPress. Медіабібліотека, клік на зображення, поле «Альтернативний текст» праворуч. Якщо фото вставлене в сторінку через редактор блоків, те саме поле є в налаштуваннях блоку «Зображення».
• Конструктори сайтів. Зазвичай клік на фото відкриває налаштування, де є пункт «Опис», «Alt-текст» або «Текст для SEO». Інколи він захований у додаткових параметрах.
• Платформи інтернет-магазинів. Поле часто є в картці товару біля кожного фото, але буває, що alt автоматично береться з назви товару. Перевірте, чи можна його змінити вручну.
• Сайт на замовлення. Попросіть розробника показати, де вводиться опис, і переконатися, що шаблон справді виводить його в код, а не лише зберігає в базі.

Корисна перевірка після першого заповнення: відкрийте сторінку в браузері на комп’ютері, натисніть правою кнопкою на фото й оберіть «Перевірити» або «Переглянути код». У рядку з тегом img має бути атрибут alt з вашим текстом. Якщо його там немає, alt-тексти для зображень зберігаються, але не потрапляють на сторінку, і це вже питання до шаблону, а не до вас.

Навіщо бізнесу alt-тексти для зображень

Пошук за картинками

Частина людей шукає не текстом, а візуально: «весільна зачіска на довге волосся», «кухня в стилі лофт фото», «тату на передпліччя мінімалізм». Якщо фото ваших робіт підписані по суті, вони можуть з’являтися в Google Картинках і приводити людей на сайт. Для салонів, майстрів ремонту, меблевих виробництв, флористів і фотографів це помітне джерело відвідувачів. Як вибудувати портфоліо, щоб воно ще й продавало, ми розбирали на прикладі сайту для фотографа.

Розуміння сторінки

Описи фото доповнюють текст сторінки. Якщо на сторінці «Ремонт ванної під ключ» десять фото і кожне підписане по суті, Google отримує додаткове підтвердження, що сторінка справді про ремонт ванних, з прикладами виконаних робіт. Особливо це важливо для сторінок, де тексту небагато, а основне — галерея.

Доступність і репутація

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

Окремо варто сказати про час. Описати одне фото — це 20–40 секунд, якщо ви знаєте, що на ньому. Для сайту з сотнею зображень це один-два вечори роботи, яку можна зробити без підрядника. Мало яка SEO-задача має таке співвідношення зусиль і користі.

Формула опису, яку можна пояснити будь-кому

Уявіть, що описуєте фото людині по телефону одним реченням: що на ньому і чому воно тут. Цього достатньо. Добрі alt-тексти для зображень майже завжди будуються за однією формулою: що зображено + важлива деталь + контекст за потреби.

1. Почніть з головного об’єкта: «Ванна кімната з великою плиткою», «Майстриня робить манікюр».
2. Додайте деталь, яка відрізняє саме це фото: колір, матеріал, стиль, етап роботи.
3. Якщо доречно, додайте контекст: місто, назву послуги, «до і після».
4. Тримайтеся в межах 5–15 слів. Довші описи програми читання зачитують повністю, і це втомлює.
5. Не починайте зі слів «Фото» чи «Зображення» — програма й так повідомить, що це картинка.
6. Пишіть мовою сторінки й звичайним реченням, без переліку слів через кому.

Тест закритої картинки

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

Alt-тексти для зображень у дванадцяти нішах: було і стало

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

Ніша	Слабкий alt	Сильніший alt
Салон краси	манікюр манікюр київ найкращий манікюр	Нюдовий манікюр з тонким золотим візерунком на коротких нігтях
Ремонт	IMG_2045	Кухня після ремонту: білі фасади й дерев’яна стільниця
Стоматологія	стоматологія	Лікарка показує пацієнтові знімок зубів на моніторі
Юрист	юрист адвокат юридичні послуги	Адвокатка консультує клієнта в кабінеті
Магазин	товар	Керамічна чашка ручної роботи, зелена глазур, 300 мл
Психолог	психолог онлайн	Психологиня під час онлайн-консультації за ноутбуком
Кафе	фото кафе	Літня тераса кафе з дерев’яними столами під навісом
Автосервіс	сто	Механік перевіряє ходову частину авто на підйомнику
Квіти	букет	Букет з білих піонів і евкаліпта в крафтовому папері
Фітнес	зал	Зона вільних ваг із дзеркалами й гумовим покриттям
Меблі на замовлення	шафа	Вбудована шафа-купе з дзеркальними дверима в передпокої
Тату-салон	тату	Чорно-біле тату з гілкою лаванди на передпліччі

Зверніть увагу: у сильних варіантах немає слів «найкращий», «недорого», «Київ» у кожному рядку. Місто доречне там, де фото справді прив’язане до місця, наприклад фасад вашого салону. Опис товару чи роботи краще будувати на тому, що видно оку: колір, форма, матеріал, дія.

Різні типи картинок — різні правила

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

Тип зображення	Що писати в alt	Умовний приклад
Фото роботи чи портфоліо	Що зроблено, ключова деталь, за потреби етап	Плитка під мармур у душовій зоні, етап затирки швів
Фото товару	Назва, колір, матеріал, ракурс	Шкіряний гаманець коричневий, вигляд зсередини
Фото команди	Хто, роль, що робить	Адміністраторка салону на рецепції записує клієнтку
Банер з текстом	Сам текст банера, без прикрас	Знижка 15% на першу чистку обличчя до кінця місяця
Схема чи інфографіка	Суть коротко, деталі — текстом поруч	Схема етапів ремонту: від замірів до здачі об’єкта
Логотип-посилання	Назва компанії й дія	Назва студії — на головну
Іконка-кнопка без підпису	Дія, яку виконує кнопка	Відкрити кошик
Декоративний фон	Порожній alt	Опису немає, поле лишається порожнім

Картки товарів

У товару зазвичай кілька фото, і кожне варто описати по-своєму: вигляд спереду, деталь, у користуванні, упаковка. Не копіюйте назву товару в усі п’ять alt. Як поєднувати описи фото з текстом картки, ми розповідали в статті про описи товарів.

Фото «до і після»

Тут важливо, щоб у кожному описі було видно, яка це половина пари: «Стіна у ванній до ремонту, відбита стара плитка» і «Та сама стіна після ремонту, світла плитка великого формату». Людина з програмою читання так само зрозуміє масштаб змін.

Фото людей

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

Коли alt свідомо залишають порожнім

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

• фонові текстури, декоративні лінії, візерунки, плями кольору;
• іконки поруч із текстом, який уже все пояснює: значок телефону біля номера;
• розділювачі між блоками сторінки;
• дублікати: якщо та сама картинка вже описана поруч або є посиланням з текстом поруч.

Важливий нюанс: порожній alt і відсутній alt — різні речі. Порожній означає «картинка декоративна, пропусти». Відсутній — «опис забули», і деякі програми в такому разі читають назву файлу на кшталт «bg-pattern-final-2». Якщо ваша система не дозволяє явно поставити порожній alt, попросіть розробника перевірити, як виводяться декоративні зображення в шаблоні.

Окремо про логотип. Якщо він є посиланням на головну, його alt має містити назву компанії й пояснювати дію, наприклад «Студія Лілія — на головну». Порожнім його залишати не можна: тоді людина з програмою читання почує лише «посилання» і не зрозуміє, куди воно веде. Те саме стосується іконок соцмереж без підпису: «Instagram студії», «Написати у Viber» — коротко, але зрозуміло.

Назва файлу, підпис і текст поруч

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

• Назва файлу. «manikiur-nude-zoloto.jpg» краще за «IMG_4532.jpg». Латиницею, через дефіс, без пробілів і кирилиці.
• Підпис під фото. Його бачать усі, і він працює для людей: пояснює контекст, ціну, ім’я майстра.
• Текст поруч. Фото кухні в абзаці про ремонт кухонь Google зрозуміє краще, ніж ту саму картинку в загальній галереї без жодного слова.
• Розмір і формат. Важкі фото сповільнюють сайт. Стискайте їх перед завантаженням і використовуйте сучасні формати на кшталт WebP. Детальніше — у статті про швидкість сайту.
• Власні знімки. Справжні фото ваших робіт мають більше шансів у пошуку за картинками, ніж стокові, які є на тисячах сайтів.

Умовний приклад: галерея салону на 24 фото

Щоб показати, як виглядає робота на практиці, візьмемо умовну ситуацію. Ім’я та деталі вигадані, але сама картина типова. Невеликий салон має сторінку «Манікюр» з галереєю на 24 фото. Під час перевірки з’ясовується, що в усіх фото однаковий alt «манікюр київ», шість файлів важать по 3–4 МБ, а банер з акцією на перший візит взагалі без опису.

Ось як можна навести лад за один вечір:

1. Розділити фото на групи: класичний манікюр, покриття гель-лаком, дизайн, чоловічий манікюр, інтер’єр кабінету.
2. Для кожної групи визначити, яка деталь відрізняє фото: колір, довжина й форма нігтів, техніка дизайну.
3. Написати описи: «Червоний гель-лак на мигдалеподібних нігтях середньої довжини», «Чоловічий манікюр без покриття, акуратна кутикула».
4. Вписати фразу «манікюр з покриттям» лише у два описи, де вона справді відповідає фото.
5. Стиснути шість важких файлів і замінити їх на сайті.
6. Вписати текст банера в alt і продублювати умову акції звичайним текстом над галереєю.

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

Сім помилок з описами фото і як їх виправити

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

1. Однаковий alt на всіх фото галереї. «Наші роботи» двадцять разів поспіль звучить як заїжджена платівка. Виправлення: опишіть кожне фото окремо, хоча б двома-трьома словами відмінності.
2. Назва файлу замість опису. Деякі системи автоматично підставляють ім’я файлу в alt. Виправлення: перегляньте медіабібліотеку й замініть такі описи вручну.
3. Текст на картинці без дублювання. Банер з акцією без alt: ні Google, ні незряча людина цієї знижки не бачать. Виправлення: впишіть текст банера в alt і продублюйте умови текстом на сторінці.
4. Опис, що не збігається з фото. Шаблон перенесли з іншої ніші, і під фото салону стоїть alt про ремонт. Виправлення: після заміни фото завжди міняйте й опис.
5. Ключові слова через кому. «Стоматологія, імплантація, Київ, ціна» — це список, а не опис. Виправлення: напишіть одне звичайне речення.
6. Надто довгий опис. Абзац на три рядки втомлює слухача. Виправлення: залиште суть, а подробиці перенесіть у підпис або текст.
7. Alt англійською на українській сторінці. Програма читання озвучить його з українською вимовою. Виправлення: пишіть мовою сторінки.

Перевірка всього сайту за один вечір

Для сайту на 10–30 сторінок ручна перевірка займає орієнтовно 2–4 години, залежно від кількості фото. Ось порядок дій, який не дасть загубитися:

1. Відкрийте медіабібліотеку сайту й відфільтруйте зображення: у багатьох системах одразу видно, де поле alt порожнє.
2. Складіть список сторінок за пріоритетом: головна, ключові послуги, популярні товари, портфоліо. Починайте з тих, що приносять найбільше відвідувачів.
3. Для кожного фото напишіть опис за формулою. Декоративні елементи свідомо залиште порожніми.
4. Окремо пройдіться по банерах і картинках з текстом: чи є цей текст в alt і на самій сторінці.
5. Перейменуйте важливі файли, якщо система дозволяє це без поломки посилань. Якщо ні, просто давайте нормальні імена новим фото.
6. Відкрийте кілька сторінок з телефона з вимкненими картинками в браузері або увімкніть програму читання з екрана на смартфоні й послухайте одну сторінку.

Великий сайт чи магазин із сотнями товарів вручну не перевіриш. Тут допомагають програми-краулери, які обходять усі сторінки й складають список картинок без alt, з величезним розміром чи битими адресами. Така перевірка — частина SEO-аудиту сайту, де разом із зображеннями дивляться на швидкість, дублі й індексацію. Ширший перелік технічних пунктів зібрано в матеріалі про технічне SEO.

Як зробити, щоб нові фото одразу мали опис

Виправити сто старих описів — половина справи. Друга половина — домовитися, щоб нові зображення з’являлися на сайті вже з alt. Інакше через пів року все повториться.

Коротке правило для команди

• Хто завантажує фото, той пише alt. Без опису фото на сайт не публікується.
• Файл перейменовується до завантаження: латиницею, через дефіс, по суті.
• Для типових фото тримайте шпаргалку з формулою й трьома-чотирма прикладами з вашої ніші.
• Раз на квартал хтось один переглядає медіабібліотеку на порожні alt.

Хто це може робити

Найчастіше описи пише адміністратор чи сам власник: ніхто краще не знає, що саме на фото. Якщо ж сайт великий або тексти теж потребують оновлення, описи зображень доречно доручити разом з усім наповненням сайту: тоді alt пишуть у тому ж стилі й з тими ж ключовими темами, що й текст сторінки. Для нових проєктів у GuideWay SEO закладається з першого дня, тож описи зображень з’являються разом із запуском. Якщо ви тільки обираєте основу, подивіться готові сайти з SEO-структурою.

Розклад на п’ять вечорів

Щоб стаття не залишилася просто прочитаною, ось розклад на п’ять робочих днів, по 30–60 хвилин на день:

День	Що зробити	Результат
Понеділок	Перевірити головну й 2–3 ключові сторінки послуг	Список фото без опису на найважливіших сторінках
Вівторок	Написати alt для цих сторінок за формулою	Перші 20–40 описаних зображень
Середа	Пройтися по галереї чи портфоліо	Унікальні описи замість однакових
Четвер	Перевірити банери й картинки з текстом	Акції та умови доступні всім
П’ятниця	Скласти шпаргалку для команди	Нові фото публікуються вже з alt

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

Часті запитання

Чи впливає alt-текст на позиції сайту в Google?

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

Якої довжини має бути alt?

Зазвичай достатньо 5–15 слів, або до 100–125 символів. Цього вистачає, щоб описати головне на фото й важливу деталь. Довші описи програми екранного читання зачитують повністю, що втомлює. Якщо фото складне, наприклад інфографіка, коротко опишіть суть в alt, а подробиці дайте текстом поруч.

Чи можна писати alt англійською на українському сайті?

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

Чи потрібно додавати ключове слово в кожен alt?

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

Чим alt відрізняється від підпису під фото?

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

Чи можна згенерувати alt автоматично?

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

Що робити з alt на старих фото, яких сотні?

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