Привлекайте людей в свое веб-приложение, как OG - codeburst

  1. Как использовать теги OG в вашем веб-приложении:
  2. Как отлаживать и тестировать теги OG:
  3. Как использовать теги OG в Twitter:
  4. Больше ресурсов:

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

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

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

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

OG не означает Оригинальный гангстер , как следует из названия этой статьи. Это обозначает Open Graph. Когда вы добавляете теги OG в шаблон HTML, вы позволяете своей веб-странице превращаться в многофункциональный объект в социальных сетях.

Давайте посмотрим, как выглядит ссылка в Facebook с тегами OG и без них…

Давайте посмотрим, как выглядит ссылка в Facebook с тегами OG и без них…

Выше приведена ссылка на Facebook без тегов OG Выше приведена ссылка на Facebook без тегов OG   Выше приведена ссылка на Facebook с тегами OG Выше приведена ссылка на Facebook с тегами OG

Веб-страница, которая использует теги OG, намного более заманчива, не так ли? Теперь, когда я (надеюсь) убедил вас, я покажу вам, как их использовать.

Как использовать теги OG в вашем веб-приложении:

Это очень просто Вам нужно только добавить три самых основных тега OG в <head> вашего HTML-файла - заголовок, описание и изображение (показано ниже).

<Голова>
<meta property = "og: image" content = "/ path / to / image.jpg" />
<meta property = "og: title" content = "Заголовок вашей страницы" />
<meta property = "og: description" content = "Привет, мир!" /> <! - другие нормальные теги головы все еще идут сюда,
как ссылки на CSS, Javascript и т. д. ->
</ HEAD>

Boom! Вы сделали! Легко, правда?

* Примечание: не путайте свойство og: title с тегом <title> . Они разные. Вы захотите включить оба в свой тег <head> .

Как отлаживать и тестировать теги OG:

Это моя любимая часть - Facebook и Twitter предоставляют разработчикам инструменты отладки OG! Вы просто вводите URL-адрес, который хотите протестировать, и вы видите предварительный просмотр вашей ссылки, всех ее тегов OG и любых предупреждений или сообщений об ошибках, которые может найти отладчик. Насколько это круто?

Как использовать теги OG в Twitter:

У Twitter есть пара специальных мета-тегов, которые важны - твиттер: карточка, твиттер: сайт и твиттер: создатель.

Свойство twitter: card позволяет вам выбрать размер вашего изображения. Использование property = "summary" дает вам уменьшенное изображение слева от заголовка и описания. Если вы используете property = "summary_image_large", вы увидите большое изображение над заголовком и описанием (примеры обоих вариантов приведены ниже).

Эта карта Twitter была сгенерирована с использованием <meta name = ”twitter: card” value = ”summary” /> Эта карта Twitter была сгенерирована с использованием <meta name = ”twitter: card” value = ”summary” />   Эта карточка Twitter была сгенерирована с использованием значения <meta name = ”twitter: card” = ”summary_large_image” /> Эта карточка Twitter была сгенерирована с использованием значения <meta name = ”twitter: card” = ”summary_large_image” />

Свойства twitter: site и twitter: creator приписывают карту определенному пользователю Twitter (это вы!). Свойство twitter: creator специально предназначено для использования с картой summary_large_image.

<meta name = "twitter: site" content = "@ TwitterHandle" />
<meta name = "twitter: card" value = "summary" />
<meta name = "twitter: image" content = "/ path / to / your / image.png" /> <- или если вы используете большое изображение карты, вам понадобится
использовать метатег создателя ниже вместо тега сайта -> <meta name = "twitter: creator" content = "@ TwitterHandle" />
<meta name = "twitter: card" value = "summary_large_image" />
<meta name = "twitter: image" content = "/ path / to / your / image.png" />

Больше ресурсов:

Есть еще много тегов OG, которые вы можете добавить на свой сайт. Я только ввел самые необходимые теги, чтобы вы начали.

  • Для получения более полного списка тегов OG и того, что они делают, взгляните на Протокол открытого графика
  • Проверьте этот полный список Специальные теги Twitter

Легко, правда?
Насколько это круто?