Вы заходите в редактор 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.