Зображення без підпису, як титр у німому кіно: глядач начебто дивиться, але половину сенсу додумує сам. А коли ви ведете блог на WordPress, підпис до зображення працює одразу на трьох фронтах: утримує читача, дає пошуковикам контекст і закриває вимоги accessibility.

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

💡 Швидкий огляд:

• Відкриваєте пост у Gutenberg, вставляєте блок «Зображення», під картинкою одразу з’являється поле «Підпис»
• Для галереї клацаєте по кожному кадру всередині блоку й заповнюєте підпис окремо для кожного зображення
• У класичному редакторі підпис задається на правій панелі під час вставлення через «Додати медіафайл»
• Підпис із медіабібліотеки автоматично підтягується в усі пости, де використано зображення, економить час за повторного використання

Що таке підпис до зображення і навіщо він потрібен

Підпис (caption) — це текст, який відображається безпосередньо під картинкою у фронтенді. На відміну від alt-тексту, який бачать лише пошуковики та скринрідери, caption читає кожен відвідувач. Залежно від теми WordPress підпис виводиться сірим шрифтом меншого кегля прямо під зображенням або напівпрозорою плашкою поверх нього.

Для SEO підпис цінний тим, що пошуковики сканують текст у безпосередній близькості від <img> як релевантний контекст. Дослідження показують: сторінки з осмисленими підписами до зображень у середньому отримують більше трафіку з Google Images, ніж сторінки з «голими» картинками.

З погляду accessibility (WCAG 2.2) caption доповнює alt-текст: alt описує вміст картинки для незрячого користувача, а caption пояснює значення, чому ця картинка тут і який висновок із неї зробити. Разом вони закривають два різні користувацькі сценарії.

Додаємо підпис у редакторі Gutenberg

Gutenberg, редактор блоків, який став стандартом WordPress із версії 5.0. Якщо ви зайшли в адмінку й бачите плюсик у чорному квадраті ліворуч від тексту, ви в Gutenberg.

Покроково:

• Відкрийте пост або сторінку на редагування.
• Натисніть на іконку «+» (додати блок) на тулбарі або прямо в тілі поста.
• Виберіть блок «Зображення».
• Завантажте картинку з комп’ютера або виберіть із медіабібліотеки.
• Одразу після вставлення під зображенням з’явиться сіре поле з текстом «Додати підпис». Клацніть по ньому та введіть текст.

Готово. Підпис зберігається разом із постом і виводиться під картинкою згідно зі стилями вашої теми. Якщо поля «Додати підпис» немає, перевірте, що ви клацнули саме по зображенню (має з’явитися синя рамка виділення та спливна панель форматування).

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

Підписи в галереї Gutenberg

Блок «Галерея» працює інакше: кожне зображення всередині галереї — це окремий елемент зі своїм підписом. Додаються вони не масово, а по одному.

• Додайте блок «Галерея» через «+».
• Виберіть зображення (можна кілька одразу через Ctrl+клік).
• Після вставлення клацніть по першому кадру галереї, під ним з’явиться поле «Додати підпис до зображення».
• Введіть текст, перейдіть до наступного кадру, повторіть.
• Збережіть пост.

Важливий нюанс: кількість колонок у галереї (налаштовується на бічній панелі блоку) впливає на читабельність підписів. На мобільних пристроях галерея згортається в один стовпець, і підписи залишаються читабельними. Але на десктопі за п’яти колонок текст підпису може обрізатися, для галерей із довгими підписами ставте 2-3 колонки.

Підпис через класичний редактор

Якщо на вашому сайті встановлено плагін Classic Editor або ви працюєте зі старою версією WordPress (нижче 5.0), інтерфейс відрізняється.

• У редакторі поста натисніть «Додати медіафайл» над тулбаром форматування.
• Виберіть зображення з медіабібліотеки або завантажте нове.
• Праворуч від прев’ю з’явиться панель «Відомості про вкладення». Поле «Підпис», третє зверху.
• Впишіть текст і натисніть «Вставити в запис».

Для галереї в класичному редакторі послідовність та сама: «Додати медіафайл» → «Створити галерею» → вибрати зображення → клацнути по кожному й заповнити підпис на правій панелі → «Вставити галерею».

Підпис через медіабібліотеку: метод «один раз, скрізь»

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

• В адмінці перейдіть: Медіафайли → Бібліотека.
• Клацніть по потрібному зображенню, відкриється вікно «Відомості про вкладення».
• Заповніть поле «Підпис».
• Збережіть (зміни застосовуються одразу, без окремої кнопки «Оновити»).

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

SEO та accessibility: як підписи впливають на ранжування

Пошукові системи не «бачать» картинку, вони читають текст навколо неї. Підпис розташований найближче до тегу <img> у HTML-розмітці й тому має підвищену вагу для Google Images. Практичний висновок: якщо в підписі є ключове слово, релевантне запиту, шанси потрапити в блок зображень на першій сторінці видачі зростають.

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

Якщо ваша тема WordPress не виводить підписи під зображеннями, перевірте functions.php теми. За виведення caption відповідає параметр caption у функції wp_get_attachment_image(). Більшість сучасних тем (GeneratePress, Astra, Kadence, Blockbase) підтримують підписи «з коробки».

Коротке відео вище показує обидва основні методи (блок і медіабібліотека) в дії. Якщо ви краще сприймаєте інформацію візуально, двoxвилинний перегляд закриє всі питання щодо інтерфейсу.

⁉️🤔 Часті запитання

Чим підпис відрізняється від alt-тексту?

Підпис видно всім відвідувачам, і він виводиться під картинкою. Alt-текст, атрибут HTML, який відображається лише за помилки завантаження зображення та зчитується скринрідерами. Перший потрібен для контексту й SEO, другий, для accessibility та валідації коду. В ідеалі вони доповнюють одне одного, а не дублюють: alt описує вміст, caption пояснює значення.

Чи можна додати підпис до вже опублікованого зображення без перевипуску поста?

Так, через медіабібліотеку: Медіафайли → Бібліотека → клік по зображенню → поле «Підпис». Зміна підхопиться в усіх постах, де це зображення вставлено через стандартний механізм WordPress. Якщо зображення вставлено як статичний HTML (через Custom HTML-блок), підпис не оновиться, доведеться правити вручну.

Підписи індексуються Google як окремий контент?

Так. Текст підпису міститься всередині <figcaption> (у Gutenberg) і є частиною DOM-дерева сторінки. Google розцінює його як релевантний текстовий контент, особливо для пошуку за картинками. Однак вага підпису нижча, ніж в основного тексту та заголовків, використовуйте її як допоміжний, а не основний SEO-інструмент.

Як прибрати підпис під зображенням, якщо тема додає його автоматично?

Два шляхи. Швидкий: просто залиште поле «Підпис» порожнім, WordPress не виведе <figcaption> без вмісту. Глобальний: додайте в Additional CSS (Зовнішній вигляд → Налаштувати → Додаткові стилі) правило .wp-block-image figcaption { display: none; }, це сховає всі підписи на сайті разом. Якщо потрібно прибрати підписи лише в галереях, замініть селектор на .wp-block-gallery figcaption.

Чи впливає довжина підпису на ранжування?

Напряму ні, але опосередковано, так. Підпис довший за 2-3 рядки на мобільному екрані обрізається або згортається (залежить від теми). Користувач, який не отримав інформацію швидко, йде, а поведінкові фактори (час на сторінці, pogo-sticking) пошуковики враховують. Оптимальна довжина, 10-25 слів: достатньо для контексту, мало для візуального шуму.

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

Ні. Якщо картинка виконує роль роздільника, фону або атмосферної ілюстрації без смислового навантаження, підпис лише відволікає. Більше того, для декоративних зображень правильна практика, залишати й alt порожнім (alt=""), щоб скринрідер їх ігнорував. Підпис залишайте для скриншотів, інфографіки, діаграм і фотографій, що несуть конкретну інформацію.

Коли підпис обов’язковий, а коли, зайвий

Короткий чек-лист на засипку:

Завжди додавайте підпис:

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

Не додавайте підпис:

• декоративний роздільник або абстрактне тло секції;
• стокове фото «людина за ноутбуком» у шапці поста, воно атмосферне, а не інформаційне;
• іконка або логотип усередині тексту, контекст і так зрозумілий.

Правило великого пальця: якщо видалення картинки не ламає розуміння тексту, підпис не потрібен. Якщо ламає, підпис обов’язковий, і він має містити ключову думку, яку ніс би видалений кадр.

Підписи до зображень, не «фішка на любителя», а базова гігієна контенту. Gutenberg зробив процес тривіальним (клік під картинкою → текст → готово), а медіабібліотека дозволяє один раз заповнити підпис і забути. Якщо ви ведете блог на WordPress і досі залишаєте поле «Додати підпис» порожнім, виділіть 10 хвилин і пройдіться по останніх постах: пара осмислених фраз під кожним скриншотом дасть більше, ніж ще один абзац тексту.

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