
Содержание статьи
Если вы уже понимаете, что такое карты Facebook Open Graph и Twitter, то эта статья не направлен на вас. Пожалуйста, передайте это кому-нибудь, кто не понимает, что это такое.
Введение
По данным Mashable, 52% общих ссылок в Twitter – это статьи и изображения, причем изображения занимают около 36% пирога. В среднем люди делятся около 30 миллионов уникальных изображений в день.

Ты ахнул?
Я сделал.
Твиты со ссылками на изображение получают в 2 раза больше привлечения, чем не имеющие, говорит Буфер.
Теперь эта статистика только для Twitter. Объединенная статистика для других популярных платформ социальных сетей удивит вас.
Итог таков: люди – визуальные существа.
Если ваш сайт распространяется в социальных сетях, и он выглядит как скучная кислая тушенка, привлечение будет низким. Поделитесь ссылкой, которая хорошо отображается в хронологии людей, и вы, скорее всего, получите именно то, что вы хотите.
Вы не учитываете это при создании своего сайта? Вы точно делаете что-нибудь не так.
Что такое застенчивый взгляд?
Ну, не все ссылки созданы одинаковыми. Рассмотрите следующие графики. Они представляют вид двух разных ссылок, опубликованных в Twitter. Один из Medium, другой с моего сайта.

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

Это выглядит не столь хорошо. Итак, что Medium делает под капотом, чтобы их общие URL выглядели замечательно?
Переход от нуля к герою
Давайте рассмотрим пошаговый подход к тому, чтобы перевести сайт от «застенчивого вида» к «удивительно замечательному».
Учитывая наши соображения, я буду использовать один из своих сайтов, TheReduxJSBooks.com
как лабораторная крыса.
Во-первых, чтобы просмотреть, как предварительный просмотр вашей ссылки будет отображаться в Twitter и Facebook, обе компании предоставляют отладчику, куда вы вставляете свою ссылку и сами смотрите.
Вот ссылка на отладчик Facebook Sharing, а это на Twitter.
Начиная с «нуля», давайте посмотрим что TheReduxJSBooks.com
выглядит так, когда поделились сейчас.
Вот что мы имеем в Facebook:

И это в Twitter:

Пока они выглядят не очень впечатляющими, но вскоре мы это исправим.
Чтобы иметь определенный контроль над тем, как ваши ссылки выглядят при совместном доступе, Facebook разработал технологию под названием Откройте график. Это почти становится стандартом для других услуг, и нет просто Facebook. Twitter называет их иначе, Карты Twitter.
Давайте посмотрим, как они работают.
Facebook Open Graph

Проще говоря, Facebook Open Graph – это включение определенных meta
теги к голове вашей html
.
Эти метаданные будут считываться с вашего сайта, и они влияют на предварительный просмотр ссылки при предоставлении доступа.
Теперь посмотрите на конечные результаты, которых мы достигнем, когда ссылка будет опубликована в Facebook.

Что сейчас по-другому?

Теперь это смотрится красиво. С помощью специального изображения, заголовка и описания вы полностью контролируете, как отображается предварительный просмотр ссылки.
Теперь вот код, который дает предварительный просмотр, который вы видите выше:
<!-- Facebook Opengraph -->
<meta property="og:url" content=" />
<meta property="og:type" content="website" />
<meta property="og:title" content="The ReduxJS Books" />
<meta property="og:description" content="What you ar about to view is a complete guide to mastering Redux from total novice to badass, and with every skill level catered for. Ready?"/>
<meta property="og:image" content=" />
<meta property="og:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Я знаю, что кажется много кода, но это не так.
Они размещены в голове вашего html
страница. Например
<head>
<!-- put them here -->
</head>
Теперь давайте рассмотрим каждый открытый график meta
теги один за другим.
Вот первый:
<meta property="og:url" content=" />
То, что у вас есть, есть meta
тег с двумя атрибутами, property
и content
.
property
определяет собственность соответствующего мета-тега. В этом случае оно имеет значение, og:url
.
Как вы уже догадались, og
это сокращение от Open Graph
и url
означает, что это описывает url
совместной ссылки. Thecontent
затем сохраняет значение для url
то есть «https://thereduxjsbooks.com».
Это было просто.
Теперь то же касается type
, title
и description
теги. Видишь таких?

Следующий набор из meta
Теги – это те, которые описывают предварительный просмотр изображения. Первый обладает свойством, og:image
и content
это URL-адрес изображения.
<meta property="og:image" content=" />
Важно отметить, что для Facebook Open Graph вы должны предоставить width
и height
изображение — желательно 1200px by 630px
Другие тэги лишь дополнительно описывают изображение alt
текст, type
, width
и height
.

Прекрасно! Теперь вы знаете самые важные части Facebook Open Graph.
Карты Twitter

Как и Facebook, вы также имеете полный контроль над тем, как ваша ссылка будет отображаться при размещении в Twitter.
Если вы поделитесь ссылкой в Twitter, предположив, что у вас уже установлены мета-теги Facebook Open Graph, вы фактически получите предварительный просмотр.
Это может выглядеть примерно так:

Неплохо, но и не здорово.
Когда мы закончим, вот что мы будем иметь в Twitter:

Как видите, изображение предварительного просмотра гораздо больше, а описание не так долго. Facebook принимает больше символов, но не Twitter.
Итак, вот основные тэги, которые вам нужны.
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content=" />
<meta name="twitter:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." />
<meta name="twitter:description" content="For every book you buy, we will send a free copy to a developer in India, Nigeria, and Tunisia who can't afford the cost."
/>
Просто!
Первый meta
тег есть супер важно.
<meta name="twitter:card" content="summary_large_image" />
В отличие от Facebook Open Graph с property
и content
атрибуты, использование карт Twitter name
и content
атрибуты.
Вот название twitter:card
и содержание, summary_large_image
. Это описывает тип карты Twitter, который вы хотите. Существует много разных типов карт Twitter, но summary_large_image
дает вам предварительный просмотр большого изображения, которое вы видели раньше.
В отличие от Facebook, вы это делаете нет нужно описать изображение width
и height
Просто имея название, twitter:image
и content
URL подойдет!
<meta name="twitter:image" content=" />
Наконец, просто добавьте изображение alt
текст и более короткий description
для Twitter.
<meta name="twitter:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." />
<meta name="twitter:description" content="For every book you buy, we will send a free copy to a developer in India, Nigeria, and Tunisia who can't afford the cost."
'' />
И все это!
Что еще приятнее, это то, что настройка этого означает, что другие службы могут также искать эти метаданные и прекрасно отображать ваши ссылки!
Вот предварительный просмотр того, когда ссылка предоставляется в Slack.

Slack — это лишь один из многих сервисов, уважающих технологии Facebook Open Graph и Twitter Card.
Вывод
Я пропустил много информации, чтобы статья была краткой. Чтобы получить дополнительную техническую информацию, обязательно просмотрите официальные документы для карт Facebook Open Graph и Twitter.
Теперь вы знаете, что эти замечательные предварительные просмотры ссылок в Twitter и Facebook не попали туда за магией.
Кто-то написал код, и теперь вы знаете как.
Создайте сайты, которые выглядят потрясающе, когда их распространяют в Twitter и Facebook!