Ресайз обложки для соцсетей

Хорошей статье нужна обложка, с ней она будет выгодней смотреться в соцсетях, и это поможет привлечь трафик. Но из-за того, что ссылки в разных соцсетях смотрятся по-разному, то и обложка будет выглядеть по-разному. Поэтому нам нужен ресайз обложки!

В чём проблема с обложками

Когда я работал в Эсэмемпланере (SMMplanner), то обратил внимание на то, что обложки статьи из блога в Фейсбуке и во ВКонтакте выглядят по-разному. В Фейсбуке это более широкий прямоугольник, чем во ВКонтакте. Из-за этого теряется часть информации. Если обложка абстрактная — ничего страшного, так как у абстракции нет той информационной значимости, которую нельзя терять. Но если текстовая — будут небольшие проблемы.

Вот так выглядят текстовые обложки.

обложки разных продуктов школы во вконтакте
Для примера три разных страницы от школы во ВКонтакте с разными «артефактами». На первой небольшие ошибки в вёрстке. Вторая болезненно обрезана, а третья «потеряла» строку

А если взять более абстрактные обложки, например, из блога SMMplanner. Обложка обрезается, но из-за абстрактной обложки это выглядит нормальным. Хотя мой глаз «режется» и хочется больше воздуха снизу.

обложка из SMMplanner в разных соцсятях
В эту обложку хочется добавить воздуха снизу

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

обложка из кинжала которой нужен ресайз обложки
Обложка Кинжала — абстрактная, зато отлично видно, что информация теряется!

Ресайз обложки для соцсетей не в ресайзе, а в изменении композиции

Ресайз — это изменение размера или формата обложки, скажем мы рисовали горизонтальный прямоугольник для ВКонтакте, а потом сделали такую же симпатичную обложку для Историй. Для этого нужно сделать мультиобложку.

Но для того, чтобы прямоугольная обложка хорошо смотрелась во ВКонтакте, в Фейсбуке и в других соцсетях — нам нужно изменить композицию на полотне. Для себя я собрал универсальную обложку в фотошопе.

  • Полотно 1143×595 px — этот прямоугольник подходит для Фейсбука, ВКонтакте, Телеграма, Твитера.
  • Поля сверху на 26 пикселей и снизу от 536 и ниже.
  • Всё важно разместить по центру или собрать свою композицию.
ресайз обложки это на самом деле изменение композиции и для этого нужны лишь рамки
Я не люблю вёрстку по центру, поэтому всё самое важное у меня тянется к сторонам прямоугольника. Чёрные полосы на картинке — это визуализация рамки, за чёрной рамкой не должно быть ничего важного! При сохранении — надо их убирать

Если сделать такую обложку с рамками, и разместить всё важное по центру, обложки в соцсетях продолжатся обрезаться, но мы прекратим терять всё важное!

обложка выглядит хорошо
Для себя делал такую обложку, чтобы терять самое незначительное

Чтобы сделать хорошую обложку, нам нужно:

  1. Взять и проверить свои обложки во всех ключевых соцсетях.
  2. Подумать, как мы хотели их видеть на самом деле.
  3. Сделать свои стандарты для обложки и композиции, в моём случае это полотно 1143×595 px с полями внизу и вверху.
  4. Нарисовать обложку, сохранить 1 иллюстрацию и проверить.

Хочу отметить, что я сделал «втупую». Возможно есть более изящное решение через опенграф или настройки блога. Например, в Вордпресовском плагине для SEO Yoast — есть кнопка для обложек в Фейсбук и отдельно для Твитера, уверен, можно доработать и для остальных соцсетей.

Небольшие заметки о контент-производстве, работе контентщика и всякое такое, постоянно появляется в моём телеграм канале. Подписывайтесь: @slusarevilya.

Опубликовано Илья Слюсарев

Считаю себя контент-менеджером, сейчас работаю на SMMplanner и Интерлогику.