Ви заходите в редактор WordPress, щоб написати допис. Натискаєте «Додати блок» і бачите десятки варіантів. Серед них, «Обкладинка». А на бічній панелі, в самому низу, ховається «Обране зображення». Обидва про картинки. Обидва впливають на те, як допис виглядає. Але роблять вони зовсім різні речі.

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

Нижче, розбір без зайвого: що робить кожна, де живе, як додати та в яких випадках вмикати обидві.

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

• Розберіться, що таке обкладинка і де вона відображається
• Дізнайтеся, як працює обране зображення і де воно з’являється
• Порівняйте ключові відмінності в таблиці за вісьмома критеріями
• Додайте обкладинку через редактор блоків покроково
• Встановіть обране зображення та заповніть alt-текст
• Налаштуйте обидва формати для максимальної видимості допису

Що таке обкладинка в WordPress

Обкладинка — це блок редактора Gutenberg, який вставляє широке фонове зображення прямо в тіло допису. Технічно це блок Cover, що з’явився разом із редактором блоків у WordPress 5.0. Він розміщується всередині контенту, ви самі вирішуєте, в якому місці статті його поставити.

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

Що ще вміє блок Cover:

• Фіксований фон. Вмикається тумблером у налаштуваннях блоку. Картинка залишається на місці під час прокручування, легкий паралакс-ефект без плагінів.
• Відео замість картинки. Можна завантажити відеофайл, і він програватиметься як фон обкладинки.
• Оверлей із градієнтом. Крім суцільного кольору доступний градієнт, від прозорого до щільного в будь-якому напрямку.
• Налаштування висоти. Мінімальна висота блоку задається в пікселях, vh або інших одиницях.

Обкладинку видно лише всередині допису. На головній сторінці блогу, в стрічці рубрик і в пошуковій видачі її немає. Це елемент внутрішньої верстки, а не метаданих.

Що таке обране зображення

Обране зображення — це метаполе допису, що існує в WordPress із версії 2.9. Воно не вставляється в тіло статті (хоча тема може показувати його автоматично на початку допису). Його завдання, представляти допис назовні.

Де з’являється обране зображення:

• Головна сторінка блогу. Тема виводить сітку дописів, і кожен показаний із мініатюрою — це і є обране зображення, зменшене до потрібного розміру.
• Соціальні мережі. Коли допис поширюють у Telegram, X чи Facebook, соцмережа підтягує обране зображення через Open Graph-розмітку. Без нього, просто текстове посилання, яке прогортнуть.
• Google Discover і пошук. Google може показувати мініатюру поруч із результатом, джерелом знову виступає обране зображення.
• Внутрішні блоки. Блок «Останні записи» та подібні беруть картинку саме звідси.

Розміри контролює тема: вона реєструє набір розмірів мініатюр (thumbnail, medium, large плюс власні), і WordPress під час завантаження нарізає копії під кожен. Оригінал залишається в медіатеці.

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

Таблиця відмінностей

Як додати обкладинку в редакторі блоків

Відкрийте наявний допис або створіть новий. У редакторі Gutenberg натисніть кнопку «+» (додати блок) у тому місці тексту, де хочете бачити обкладинку. У рядку пошуку блоків наберіть «Обкладинка», з’явиться іконка блоку Cover. Натисніть на неї.

Блок вставиться в контент із кнопкою «Вибрати зображення». Натисніть її, відкриється медіатека. Виберіть картинку або перетягніть нову з комп’ютера. Після завантаження картинка розтягнеться на ширину контенту.

Тепер налаштуйте блок через праву панель:

• Оверлей. На панелі блоку побачите налаштування «Overlay», кольорова підкладка між картинкою і текстом. Типово сірий із прозорістю 50% (див. документацію блоку Cover). Можете змінити колір, прибрати прозорість до нуля (оверлей зникне) або замінити на градієнт.
• Текст. Клацніть прямо по блоку й наберіть заголовок або абзац. Шрифт, розмір і колір налаштовуються стандартними інструментами.
• Фіксований фон. Тумблер «Fixed background» на бічній панелі вмикає паралакс-ефект.
• Мінімальна висота. У налаштуваннях блоку задайте значення в пікселях, наприклад 400px для десктопа.

Альтернативний спосіб: блоку Cover не обов’язково бути окремим. У редакторі можна перетворити на обкладинку будь-яку групу блоків: виділіть їх і натисніть «Групувати» → «Обкладинка».

Як встановити обране зображення

Відкрийте редактор допису. На правій бічній панелі знайдіть вкладку «Запис» (перша іконка у верхньому ряду). Прокрутіть униз до секції «Обране зображення». Якщо не бачите, розгорніть вкладку через «Налаштування» (вертикальна трикрапка в правому верхньому куті → «Налаштування» → «Запис»).

Натисніть «Встановити обране зображення». Відкриється медіатека. Виберіть картинку. Після вибору обов’язково заповніть два поля:

• Alt-текст. Короткий, але інформативний опис того, що на картинці. Потрібен для доступності (скринрідери) та SEO. Не дублюйте заголовок допису, пишіть саме про вміст картинки.
• Підпис. Відображається під картинкою, якщо тема це підтримує. Можна залишити порожнім.

Кнопка «Готово» зберігає вибір. Картинка з’явиться в секції «Обране зображення» з прев’ю. Щоб замінити, натисніть на прев’ю і виберіть іншу.

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

Коли використовувати і те, і те

Оптимальний сценарій для блогу, використовувати обидва формати одночасно, але з різними картинками.

Обране зображення нехай буде інформативним: скриншот інтерфейсу, схема, фотографія результату. Ця картинка з’явиться в соцмережах і пошуку, вона повинна продавати клік. Жодного кліпарту й стокових «людина за ноутбуком».

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

Коли обкладинка не потрібна: короткі новинні нотатки на 2-3 абзаци. Коли обране зображення не потрібне: практично ніколи. Допис без обраного зображення втрачає клікабельність у соцмережах і виглядає незавершеним у стрічці блогу.

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

Відео: обкладинка проти обраного зображення

На YouTube-каналі WebTutorials наочно показано процес додавання обох типів картинок у реальному редакторі WordPress: від пошуку блоку до публікації.

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

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

Технічно, так. Але результат рідко виглядає добре. Обране зображення масштабується темою під задані пропорції (часто 16:9 або 4:3), а обкладинка розтягується на всю ширину контенту з оверлеєм. Одна й та сама картинка в одному місці обріжеться, в іншому, поїде композиція. Краще підібрати два різних зображення.

Що важливіше для SEO, обкладинка чи обране зображення?

Обране зображення. Воно потрапляє в Open Graph-розмітку, відображається в Google Discover і може з’явитися поруч зі сніпетом у пошуку. Обкладинка на SEO напряму не впливає, але непрямо допомагає через зниження показника відмов: красиво оформлений допис читають довше.

Чому обране зображення не відображається в соцмережах після публікації?

Соцмережі кешують Open Graph-дані. Якщо ви спочатку опублікували допис без картинки, а потім додали, Facebook і X показуватимуть стару версію. Рішення: прогнати URL через валідатор Open Graph (Facebook Sharing Debugger, Twitter Card Validator) або просто зачекати 24-48 годин.

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

Так. Класичний редактор не показував блок Cover, але після переходу на блоки ви можете відкрити будь-який старий допис, і він конвертується в сумісний формат. Вставляйте обкладинку як звичайний блок.

Як прискорити завантаження сторінки з великою кількістю обкладинок?

Не ставте більше двох обкладинок на допис. Для кожної картинки використовуйте сучасний формат (WebP або AVIF). Оптимізуйте розмір: ширина контентної області рідко перевищує 1200 px, немає сенсу вантажити картинку шириною 4000 px. Безплатні плагіни на кшталт ShortPixel або EWWW Image Optimizer стискають автоматично під час завантаження. Докладніше про оптимізацію, в нашому гайді з зображень у WordPress.

Обкладинка чи обране: що ставити у ваш допис

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

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

Не економте на картинках. Два осмислених зображення на допис, не розкіш, а мінімальний стандарт візуально грамотного блогу на WordPress.