Обложку статьи видят гораздо больше людей, чем саму статью: она показывается в ленте блога и в каждой пересылке ссылки. Разбираем, как её сделать.
Коротко
- Её видят в ленте и в пересылке.
- Единого размера в стандарте нет.
- Важное держат в центре.
- Серия узнаётся по общему приёму.
Где обложку увидят
| Место | Что там происходит |
|---|---|
| Лента блога | По ней выбирают, что открыть |
| Блок «Читайте также» | То же внутри статьи |
| Пересылка ссылки в мессенджере | Превью вместо голой ссылки |
| Публикация в соцсети | Обрезается под формат площадки |
| Поиск по картинкам | Отдельный источник переходов |
Третья строка недооценена сильнее прочих. Ссылку без превью в переписке часто не открывают вообще: она выглядит как спам. Обложка здесь работает не украшением, а признаком того, что по ссылке что-то есть.
Какого размера её делать
| Свойство Open Graph | Назначение |
|---|---|
| og:image | Адрес изображения |
| og:image:secure_url | Адрес по HTTPS |
| og:image:type | MIME-тип файла |
| og:image:width | Ширина в пикселях |
| og:image:height | Высота в пикселях |
| og:image:alt | Описание того, что на изображении |
Сама спецификация Open Graph не рекомендует ни размеров, ни пропорций — в ней только перечисленные свойства. Популярные «1200 на 630» взяты из рекомендаций отдельных площадок, а не из стандарта, и у площадок они разные и меняются. Практический вывод: держать важное в центре кадра, потому что обрезают все по-своему, и проверять результат в отладчике той площадки, где ссылку будут публиковать.
Про og:image:alt
Что это
- Описание содержания картинки
- Не подпись к ней
- Задаётся рядом с og:image
- Спецификация прямо это предписывает
Что писать
- Что изображено
- Короткой фразой
- Без повтора заголовка статьи
- Без ключевых слов «для поиска»
Формулировка стандарта: если страница задаёт og:image, она должна задавать и og:image:alt, а само значение описано как описание того, что на изображении, — и отдельно оговорено, что это не подпись. На практике этот атрибут пропускают почти всегда.
Что должно быть на обложке
Работает
- Одна узнаваемая деталь темы
- Короткая надпись крупно
- Много пустого места
- Тот же приём, что у других статей
Не работает
- Полный заголовок мелким шрифтом
- Коллаж из пяти объектов
- Стоковое фото «человек за ноутбуком»
- Логотип во весь кадр
Заголовок целиком на обложке — самая частая ошибка. Рядом с картинкой в ленте и так стоит заголовок текстом, а в превью мессенджера картинку показывают маленькой: длинная надпись превращается в нечитаемую полосу. Одно-два слова крупно работают, предложение — нет.
Как сделать серию узнаваемой
Выбрать один приём
Цвет, сетка или тип иллюстрации.
Зафиксировать размер и отступы
Записать в файл.
Сделать шаблон
Менять только содержимое.
Различать рубрики
Оттенком, а не новым стилем.
Не менять приём каждые три статьи
Узнаваемость требует повторения.
Смысл серии — в том, что читатель узнаёт источник до того, как прочитал заголовок. Это работает только на повторении: если каждая обложка оформлена по-новому, узнавать нечего, сколько бы их ни было.
Проверка перед публикацией
Уменьшить до размера превью
Читается ли надпись.
Отправить ссылку себе
Посмотреть, что показал мессенджер.
Проверить в отладчике площадки
Там, где будете публиковать.
Посмотреть в ленте блога
Рядом с соседними обложками.
Заполнить og:image:alt
Его почти всегда забывают.
Второй шаг находит больше всего проблем за меньшее время. Площадки кешируют превью, поэтому проверять стоит до того, как ссылку начнут распространять: исправленная обложка обновится не сразу.
Частые вопросы
Какого размера делать обложку?
Спецификация Open Graph не рекомендует ни размеров, ни пропорций — популярные цифры взяты из рекомендаций отдельных площадок. Держите важное в центре и проверяйте в отладчике нужной площадки.
Нужно ли писать заголовок на обложке?
Целиком — нет. Рядом в ленте уже стоит заголовок текстом, а в превью картинку показывают маленькой. Одно-два слова крупно работают.
Что такое og:image:alt?
Описание того, что изображено, а не подпись. Спецификация прямо говорит: если страница задаёт og:image, она должна задавать и og:image:alt.
Как сделать обложки узнаваемыми?
Выбрать один приём и повторять его. Если каждая обложка оформлена по-новому, узнавать нечего.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
