Как избежать позорного вида вашего сайта в Twitter и Facebook

1656603856 kak izbezhat pozornogo vida vashego sajta v twitter i facebook

Если вы уже понимаете, что такое карты Facebook Open Graph и Twitter, то эта статья не направлен на вас. Пожалуйста, передайте это кому-нибудь, кто не понимает, что это такое.

Введение

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

PHJm0i5jyHlBYiyDsGVXWrUHebFS93A4YDqu
От Mashable

Ты ахнул?

Я сделал.

Твиты со ссылками на изображение получают в 2 раза больше привлечения, чем не имеющие, говорит Буфер.

Теперь эта статистика только для Twitter. Объединенная статистика для других популярных платформ социальных сетей удивит вас.

Итог таков: люди – визуальные существа.

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

Вы не учитываете это при создании своего сайта? Вы точно делаете что-нибудь не так.

Что такое застенчивый взгляд?

Ну, не все ссылки созданы одинаковыми. Рассмотрите следующие графики. Они представляют вид двух разных ссылок, опубликованных в Twitter. Один из Medium, другой с моего сайта.

hhdzeV7Bmwg9V4uBdlksG0Sg9stiOZH9lQ-7
Это общая средняя статья, и она, безусловно, выглядит хорошо!

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

IRVjqvQg6QHvYqHv0-kNWsieGr1F1u8glvjU
Вот ссылка на мой собственный сайт, и это выглядит не так хорошо. Грустная вещь:(

Это выглядит не столь хорошо. Итак, что Medium делает под капотом, чтобы их общие URL выглядели замечательно?

Переход от нуля к герою

Давайте рассмотрим пошаговый подход к тому, чтобы перевести сайт от «застенчивого вида» к «удивительно замечательному».

Учитывая наши соображения, я буду использовать один из своих сайтов, TheReduxJSBooks.comкак лабораторная крыса.

Во-первых, чтобы просмотреть, как предварительный просмотр вашей ссылки будет отображаться в Twitter и Facebook, обе компании предоставляют отладчику, куда вы вставляете свою ссылку и сами смотрите.

Вот ссылка на отладчик Facebook Sharing, а это на Twitter.

Начиная с «нуля», давайте посмотрим что TheReduxJSBooks.com выглядит так, когда поделились сейчас.

Вот что мы имеем в Facebook:

uSadcRyH6rIN1flXBxobnaR1lw-MvyOj3cSz
Плохой вид, когда распространяется в Facebook (FB). Как имитировано на настройщике совместного использования FB, FB удалось отобразить URL-адрес и первый фрагмент текста на веб-сайте

И это в Twitter:

aO2xjqU6SedgDgGQsGt3-UYVTPa42htJZWbi
Так плохо — предварительный просмотр не отображается: (Twitter не извлекает никакой информации с сайта. Вы должны сделать работу.

Пока они выглядят не очень впечатляющими, но вскоре мы это исправим.

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

Давайте посмотрим, как они работают.

Facebook Open Graph

EOjVvxA10KOD-R84wr1wdyuTtA5qcb04PfgE

Проще говоря, Facebook Open Graph – это включение определенных meta теги к голове вашей html.

Эти метаданные будут считываться с вашего сайта, и они влияют на предварительный просмотр ссылки при предоставлении доступа.

Теперь посмотрите на конечные результаты, которых мы достигнем, когда ссылка будет опубликована в Facebook.

AaXwdtyqYFxz1tHcNYdWewf6gil3zhWmYHE7
Конечный результат, к которому мы стремимся.

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

Nms4XIeiT4XhIKchbTrV6UUllJFaeYj0rkXY
Вот что отличается.

Теперь это смотрится красиво. С помощью специального изображения, заголовка и описания вы полностью контролируете, как отображается предварительный просмотр ссылки.

Теперь вот код, который дает предварительный просмотр, который вы видите выше:

<!-- 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 теги. Видишь таких?

r0kmRJ0rTKuMBPUMdo4xh7kiM3WV72b7wrfO
Теги типа, названия и описания.

Следующий набор из meta Теги – это те, которые описывают предварительный просмотр изображения. Первый обладает свойством, og:imageи content это URL-адрес изображения.

<meta property="og:image" content=" />

Важно отметить, что для Facebook Open Graph вы должны предоставить width и height изображение — желательно 1200px by 630px

Другие тэги лишь дополнительно описывают изображение alt текст, type, width и height .

MDwxsM9YKW6ZK53Z8H2VU5QuoOHUFWN4Sep0
Альтернативный текст изображения, тип, ширина и высота!

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

Карты Twitter

XyXsWyrWXVpwgvld2f7oGYcxtRnb0YjuHtEn

Как и Facebook, вы также имеете полный контроль над тем, как ваша ссылка будет отображаться при размещении в Twitter.

Если вы поделитесь ссылкой в ​​Twitter, предположив, что у вас уже установлены мета-теги Facebook Open Graph, вы фактически получите предварительный просмотр.

Это может выглядеть примерно так:

otJUDGfOAsJrHTAbnwGf-P5zUmNYvucHucdO
Некоторые основные описания взяты из мета-тегов Facebook Open Graph. На самом деле не так уж плохо.

Неплохо, но и не здорово.

Когда мы закончим, вот что мы будем иметь в Twitter:

dAtlPj86grLCtyzPqCZPTh6CTBZCv8W3MNof
Лучший результат, к которому следует стремиться в 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.

CqxGbOlFbjJQYIVWKGblc3zE4n3oCJx6nhmX
Эта же ссылка опубликована на Slack. Это хорошо смотрится!

Slack — это лишь один из многих сервисов, уважающих технологии Facebook Open Graph и Twitter Card.

Вывод

Я пропустил много информации, чтобы статья была краткой. Чтобы получить дополнительную техническую информацию, обязательно просмотрите официальные документы для карт Facebook Open Graph и Twitter.

Теперь вы знаете, что эти замечательные предварительные просмотры ссылок в Twitter и Facebook не попали туда за магией.

Кто-то написал код, и теперь вы знаете как.

Создайте сайты, которые выглядят потрясающе, когда их распространяют в Twitter и Facebook!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *