Содержание статьи
Если вы уже понимаете, что такое карты 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!