Что такое OpenGraph-карточка?

OpenGraph-карточка, сниппет или превью — это карточка с заголовком, изображением и описанием для ссылки. Она автоматически формируется, когда вы делитесь ссылкой в соцсетях.

Какие есть OpenGraph-теги? Как их настроить?

OpenGraph-теги описывают свойства конкретной страницы. Вот основные:

  • “og: title” — указывает заголовок вашей статьи;
  • “og: type” — определяет тип страницы: статья, блог, новости, мультимедиа и т.п.;
  • “og: url” — адрес ссылки;
  • “og: description” — краткое описание страницы;
  • “og: site_name” — название сайта.

Настроить OpenGraph-теги можно в коде страницы. Мы рассказывали об этом в нашем блоге. Вам потребуется помощь веб-мастера или администратора сайта. Мы не сможем помочь с настройкой тегов.

Как добавить OpenGraph-карточку в Амплифере?

При добавлении ссылки в пост в Амплифере вы можете оставить ссылку текстом или сформировать OpenGraph-карточку к посту.

Почему OpenGraph-карточка не подгружается?

Основная причина — не прописаны OpenGraph-теги. Это можно проверить в коде сайта сочетанием клавиш в браузерах:

  • Ctrl+Shift+I в Chrome, «Яндекс.Браузере», Edge, Opera, Firefox для Windows;
  • Option+Command+J в Chrome, «Яндекс.Браузер», Opera для macOS;
  • Option+Command+U в Safari для macOS;
  • Option+Command+J в Firefox для macOS.

Внутри ветки head во вкладке Elements можно увидеть, прописаны теги или нет:

Почему при публикации напрямую через соцсеть OpenGraph-карточка подгружается, а при публикации через Амплифер — нет?

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

Важно прописать верно все OpenGraph-теги в коде, а чтобы убедиться в их корректности, используйте отладчик перепостов Фейсбука.

Можно ли редактировать OpenGraph-карточку в Амплифере?

Изменить OpenGraph-карточку в Амплифере нельзя — отредактировать сниппет можно только напрямую во «ВКонтакте», Фейсбуке и других соцсетях, или изменить данные в коде сайта.

Можно ли добавлять OpenGraph-карточку при импорте из RSS?

Да, можно. Для этого в настройках импорта выберите пункт «Создавать OpenGraph-карточку»:

В OpenGraph-карточку подгрузилась не та картинка. Что делать?

Мы не влияем на то, какую информацию соцсеть подгружает для OpenGraph-карточки.
Важно, чтобы на сайте была прописана полная ссылка к картинке начиная с https://.

Почему не подгружается OpenGraph-карточка для Твиттера?

У Твиттера свои алгоритмы работы со сниппетами — даже если все параметры на сайте прописаны верно, Твиттер может не открыть OpenGraph-карточку. Одну и ту же ссылку Твиттер иногда публикует по-разному: в один раз сниппет подтянется, а в другой — нет. Мы на это не влияем.

Важно верно прописать OpenGraph-теги для Твиттера — у Твиттера особая разметка. В head нужно добавить:

  • <meta name="twitter:card" content="summary_large_image">
  • <meta name="twitter:site" content="@your_twitter_account">
  • <meta name="twitter:creator" content="@your_twitter_account">
  • <meta name="twitter:title" content="НАЗВАНИЕ СТАТЬИ">
  • <meta name="twitter:description" content="ОПИСАНИЕ СТАТЬИ, ДО 200 СИМВОЛОВ — ОК">
  • <meta name="twitter:image" content="ССЫЛКА НА КАРТИНКУ">

У Твиттера несколько видов OpenGraph-карточек: простое превью, превью с большой фотографией, карточка товара, подписки и другие. В примере код для превью с большой фотографией. О том, как настроить OpenGraph-карточки других видов можно посмотреть в документации Твиттера.

Не могу опубликовать пост с OpenGraph-карточкой и картинкой. Что не так?

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

Рекомендации соцсетей

Фейсбук

Фейсбук советует использовать в OpenGraph-карточке изображения размером не менее 600×315 пикселей, чтобы подтянулась большая картинка. Допускаются изображения размером не более 8 МБ. Если размер изображения меньше 600×315 пикселей (но не менее 200×200 пикселей), то картинка в карточке будет маленькая.Фейсбук даёт несколько рекомендаций, чтобы карточки загружались корректно:

  1. Перед публикацией пропускать ссылку через дебагер Фейсбука. Фейсбук сбросит кэш ссылки, а полученный URL нужно вставить в пост:

Также дебагер укажет на ошибки, которые нужно устранить:

2. Фейсбук рекомендует прописывать значения og:image:height и og:image:width для корректной обработки изображений при первом же обращении к странице.

Оставляем ссылки на документацию, где можно найти подробности: раз, два.

«ВКонтакте»

«ВКонтакте» рекомендуют использовать картинки размером от 537×240 пикселей и тогда ссылка будет сопровождаться увеличенной картинкой в сниппете на стене. Если картинка будет меньшего размера или к записи помимо ссылки будут прикреплены другие вложения — картинка в сниппете будет уменьшенная (150×83 пикселя).

Остались вопросы?

Напишите в поддержку, поможем разобраться.

Вы нашли ответ?