Что такое OpenGraph-карточка и как с ней работать

Рассказываем, что такое OpenGraph-карточка, как её настроить и какие есть особенности работы с ней для каждой соцсети в Амплифере.

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

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

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

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

  • “og: title” — указывает заголовок вашей статьи;

  • “og: type” — определяет тип страницы: статья, блог, новости, мультимедиа и т.п.;

  • “og: url” — адрес ссылки;

  • “og: description” — краткое описание страницы;

  • “og: site_name” — название сайта.

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

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

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

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

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

Ошибка «ссылка ведёт в никуда»

Если с ссылкой всё в порядке и OpenGraph-теги прописаны верно, но при формировании превью появляется ошибка «ссылка ведёт в никуда», то скорее всего причина в блокировке скраперов вашим хостингом.

Для исправления проблемы отключите систему защиты от DDoS-атак (CloudFlare или DDoS-Guard) или добавьте наши IP адреса в исключение. Чтобы получить IP адреса, напишите в поддержку на почту help@amplifr.com или в чат аккаунта.

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

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

Можно ли редактировать 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-карточкой и картинкой. Что не так?

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

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

«ВКонтакте»

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

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

Работает на