Рубрики
Изучение SEO

Ищем лучший размер картинки для Open Graph

Все социальные сети, все парсеры хотят кусочек вашего прекрасного изображения из тега Open Graph. Я говорю о Фейсбуке, Твиттере, ВКонтакте, Instagram, Pinterest, LinkedIn, Slack, Facebook Messenger, WhatsApp, Reddit, список можно продолжать бесконечно.

Каждый из них возьмет ваш тег og:image и изменит его размер, обрежет его и будет кромсать, пока он не окажется в фиде ВК или Facebook, в таймлайне Twitter или в электронном бюллетене в чьем-то Email. Кому-то нравится большое и широкое изображение, а кому-то нравится маленькое и квадратное. Здесь нет общего стандарта.

Но на странице вы можете установить только одно изображение Open Graph. Как же угодить всем этим платформам? Какой размер изображения и соотношение сторон лучше?

Давайте загуглим

  • Facebook предлагает 1200 x 630 (1.9:1)
  • Twitter предлагает 2:1 для больших изображений и 1:1 для маленьких изображений
  • Buffer предлагает 1024 x 512 (2:1)
  • H3xed предлагает 1200 x 1200 (1:1)

Собственно, однозначных цифр нет.

Возьмем топ 30 сайтов в мире и проанализируем их og:image

Анализ главной страницы:

  • 57% сайтов используют тег og:image
  • Ширина изображений от 291 до 1484 (среднее: 871)
  • Высота изображений от 167 до 1200 (среднее: 564)
  • 53% с тегом og:image имеют горизонтальную ориентацию
    • 56% с соотношением 1.9:1 (80% это 1200 x 630)
    • 41% с шириной ровно 1200
  • 41% с og:image имеют квадратные соотношения
    • В среднем это 554 x 554
  • 43% сайтов вообще не используют og:image

На страницах статей и продуктов:

  • 93% сайтов используют og:image
  • Ширина от 316 до 3200 (среднее: 960)
  • Высота от 215 до 1400 (среднее: 547)
  • 64% с og:image имеют те же ориентации
    • 72% с горизонтальной
    • 50% с шириной 1000 или больше
  • 36% с og:image меняют размеры на разных страницах
  • 7% сайтов не используют og:image

Что же делают топовые сайты?

На главной: 50% устанавливают соотношение сторон 1.9:1, и 75% точно 1200 x 630

На страницах продуктов и статей: 63% соотношение 1.9:1, с 60% точно 1200 x 630

Что насчет twitter:image?

Twitter позволяет переопределить og:image другим изображением, установив метатег twitter:image. Если twitter:image не существует, он будет использовать og:image.

Есть одна заметка. Большинство сайтов указывают twitter:image такой же, как и og:image. Это же плохо и ни к чему хорошему не приводит!

Пара сайтов понравилась своим подходом:

  • Forbes: og:image = 600 x 315 (1.9:1), twitter:image = 600 x 300 (2:1)
  • Goodreads: og:image = 1200 x 630 (1.9:1), twitter:image = 450 x 450 (1:1)

Подведем итоги

Какого размера использовать og:image изображение для главной?

  • Хотите прямоугольник? 1200 x 630 (1.9:1)
  • Квадрат? 1200 x 1200

Для перфекционистов: Установите прямоугольное изображение точно 1200 x 630 пикселей (1.9:1).

Какого размера установить og:image для страниц товаров и статей?

  • Прямоугольник
  • Ширина от 1000 и до 3200 пикселей
  • Любой высоты

Для перфекционистов: Установите прямоугольное изображение точно 1200 x 630 пикселей (1.9:1)

Нужно ли использовать twitter:image?

Не критичный момент. Но мы рекомендуем «заморочиться».

Для перфекционистов:

  • Хотите прямоугольное изображение?
    • Следуйте документации Twitter
    • 2:1 соотношение сторон (например: 1200 x 600 пикселей)
    • Минимум: 300 x 157
    • Максимум: 4096 x 4096
  • Хотите квадрат?
    • Опять же, документация Twitter
    • 1:1 соотношение (например: 600 x 600 пикс)
    • Минимум: 144 x 144
    • Максимум: 4096 x 4096

Автор: Николай Косарев

Основатель Студии. Пишу обо всем интересном, даю советы.

Бесплатная оценка

Интересно в каком состоянии Ваш сайт?
Проверьте прямо сейчас!

Облака

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *