Как быть красивым в сосетях с помощью OpenGraph

Объясняем простыми словами.

В социальных сетях очень много информации: статусов, ссылок, статей, фотографий, видеороликов. Информации так много, что сети начинают оберегать пользователей от её обилия. Например, ФейсбукПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации.прячет от читателей ленты значительную часть контента и показывает только 5−10%. Твиттер иИнстаграмПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации.пока показывают всю ленту, но уже очевидно, что так будет не всегда.

Наступает время борьбы за внимание пользователя. Чтобы ваш контент увидели и отреагировали на него — перешли по ссылке или поставили лайк —, придётся немого потрудиться. Благо, сами социальные сети помогают нам в этом.

Посмотрите на то, как медиа работают с социальными сетями. Почему новости «Медузы» в ФейсбукеПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации.выглядят так вкусно? Откуда у них такие классные картинки, которые привлекают внимание и хорошо работают как в десктопном, так и в мобильном ФейсбукеПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации.?

Всё просто: «Медуза» и другие медиа активно используют механизмы так называемых карточек, или опенграфа.

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

Карточка — это информация в понятном для социальном сети виде. ФейсбукПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации.и Твиттер понимают, где в сообщении картинка, где описание, а где ссылка. Социальная сеть сама собирает эти данные в карточку. Более того, в карточку Твиттера можно встраивать даже поля подписки на блог и форму покупки (но не в России, лол).

Мы расскажем, как настроить опенграф‑карточки во «ВКонтакте», ФейсбукеПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации.и Твиттере.

Настройка карточек во «ВКонтакте» и ФейсбукеПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации.

«ВКонтакте» позаимствовал у ФейсбукаПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации.не только дизайн, но и формат карточек. Давайте рассмотрим опенграф ФейсбукаПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации.на простом примере. Чтобы статьи с вашего сайта попадали в ленту в красивом оформлении, пропишите на сайте следующее:

Внутри head прописываем свойства конкретного документа. Учтите, что придется впрячь программистов: у каждой статьи эти данные свои.

1
2
3
4
5
6

<metaОрганизация признана экстремистской на территории Российской Федерации. property=«og:title» content=«НАЗВАНИЕ СТАТЬИ» />
<metaОрганизация признана экстремистской на территории Российской Федерации. property=«og:type» content=«article» />
<metaОрганизация признана экстремистской на территории Российской Федерации. property=«og:url» content=«http://ССЫЛКА НА СТАТЬЮ/» />
<metaОрганизация признана экстремистской на территории Российской Федерации. property=«og:image» content=«ССЫЛКА НА КАРТИНКУ‑ОБЛОЖКУ СТАТЬИ» />
<metaОрганизация признана экстремистской на территории Российской Федерации. property=«og:description» content=«ОПИСАНИЕ СТАТЬИ, ПОЯВЛЯЕТСЯ ПОД НАЗВАНИЕМ В КАРТОЧКЕ» />
<metaОрганизация признана экстремистской на территории Российской Федерации. property=«og:site_name» content=«НАЗВАНИЕ ПРОЕКТА (САЙТА)» />

В теге html нужно добавить запись о префиксе og:

1

<html prefix='og: http://ogp.me/ns#'>

Вот как такой код формирует карточку:

А вот эта же статья во «ВКонтакте»:

Подключите «ВКонтакте» в Амплифере, чтобы публиковать посты по расписанию и получать отчёты по аналитике на почту

Настройка карточек в Твиттере

В Твиттере чуть сложнее — карточки твиттера появились позже ФейсбукаПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации.и используют другой стандарт разметки.

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

Для твиттера нужно будет добавить вот такой код в head:

1
2
3
4
5
6

<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:src» content=«ССЫЛКА НА КАРТИНКУ»>

Получается примерно вот так:

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

Подключите Твиттер в Амплифере, чтобы утверждать посты с клиентами и коллегами

Что делать после настройки?

Карточки ФейсбукаПродукт принадлежит организации, признанной экстремистской на территории Российской Федерации., «ВКонтакте» и Твиттера — не самонаводящаяся ракета класса «соцсеть‑пользователь». После настройки карточек проверьте, что они корректно работают.

Исследуйте разные форматы карточек. Пробуйте разные картинки, текстовые описания, и найдёте свою Суперкарточку. SMM-щики верят в то, что Суперкарточка приносит вечную молодость, заряжена на доллары и долгое хранение овощей.