Микроразметка для социальных сетей

Хотя социальные сети все еще дают меньше трафика, нежели поисковый маркетинг, но никто не станет отрицать, что посетители из Facebook, Twitter и «ВКонтакте» очень нужны и полезны. А уж если вы занимаетесь контент-маркетингом (а уже пора им заниматься — на дворе 2016 год!), то подготовить сайт к шерингу просто необходимо.

В данной статье пойдет речь о том, как сделать так, чтобы ваша ссылка на страничку сайта в социальных сетях выглядела очень красиво и кликабельно, а как вы понимаете, это приведет к неизбежному трафику на сайт. Чтобы все заработало как надо, придется разместить на страницах специальные теги, которые помогут социальным сетям извлекать красивые описания (превью) страниц для шеринга. Рассмотрим пример. Вот как выглядит превью ссылки //money.rbc.ru/news/56b475c49a794782ffd88eec на статью «РБК», если попытаться ей поделиться через «ВКонтакте»:

Unibrains-share-1

Все отлично. Автоматически подтянулся заголовок, краткое описание и картинка. Это случилось не само по себе, парсеры соцсетей не настолько умны. Вебмастеру пришлось заморочиться и прописать в HTML-коде страницы специальные метатеги микроразметки Open Graph. Вот как они выглядят в коде:

Unibrains-share-2

Ту же разметку Open Graph использует и Facebook (собственно, в Facebook этот стандарт и разработали), поэтому в этой соцсети рассматриваемая нами страница тоже шерится вполне красиво:

Unibrains-share-3

А вот в Twitter ссылка почему-то отображается «голой», без превью, и такое часто бывает:

Unibrains-share-4

Почему это случилось? Ведь мы видим на скриншоте выше, что все нужные теги специального формата микроразметки Twitter Cards (см. ниже) на странице присутствуют. Что ж, это повод обратиться к валидатору разметки Twitter Cards:

Unibrains-share-5

Как мы видим, теги есть, но поддомен money.rbc.ru не внесен в «белый список» Twitter. Чтобы отправить заявку на добавление домена в этот список, нужно нажать заметную на скриншоте кнопку Request Approval и ввести требуемую информацию — ничего особенного, просто сведения о контактном лице, адрес Twitter-аккаунта и краткое описание тематики контента. Если все хорошо, то при шеринге в Twitter превью будет отображаться примерно вот так:

Unibrains-share-6

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

Теги Open Graph

Стандарт микроразметки Open Graph достаточно обширен, но мы рассмотрим самое основное. Это 4 свойства:

  • og:url,
  • og: title,
  • og:description,
  •  og:image

В HTML-коде они выглядят вот так:

<meta property=»og:url» content=»//money.rbc.ru/news/56b475c49a794782ffd88eec» />  <meta property=»og:title» content=»Защита от хакера: как работают виртуальные карты » />  <meta property=»og:description» content=»Нашествие мошенников В четверг, 4 февраля глава управления по борьбе c преступлениями в сфере компьютерной безопасности МВД России Алексей Мошков сообщил о задержании преступной группы, которая …» />  <meta property=»og:image» content=»//pics.v7.top.rbk.ru/v6_top_pics/media/img/1/62/754546680941621.jpg» /> 

Дополнительная информация из хелпа Яндекс.Вебмастера.

Teги Twitter Cards

У Twitter свой формат микроразметки для составления превью:

  • twitter:url,
  • twitter: card (тип карточки),
  • twitter:description,
  • twitter:title,
  • twitter:image,
  • twitter:site (username вашего Twitter-аккаунта).
<meta name=»twitter:image» content=»//meduza.io/image/share_images/22004.png?1455009067″ /> 
<meta name=»twitter:card» content=»summary_large_image» /> 
<meta name=»twitter:site» content=»@meduzaproject» /> 
<meta name=»twitter:title» content=»14 дней игры в бога: Биолог Илья Колмановский о том, куда зашли эксперименты с ДНК — Meduza» /> 
<meta name=»twitter:description» content=»Британское правительство узаконило процедуру вмешательства в геном человеческого эмбриона. По просьбе «Медузы» биолог Илья Колмановский рассказывает историю экспериментов над ДНК в Китае и США, а также объясняет, почему сейчас нет острой этической проблемы в связи с редактурой генома. » /> 

Полное описание микроразметки Twitter Cards.

Дополнительные теги
Также в блок с тегами микроразметки стоит включить теги <link>:

<link rel="canonical" href="//meduza.io/feature/2016/02/09/14-dney-igry-v-boga" /> 
 <link rel="image_src" href="//meduza.io/image/share_images/22004.png?1455009067"> 

Вывод

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

закрыть

Запись на вебинар

закрыть

Подписка на эксклюзивные статьи учебного центра Unibrains

Не введено ваше имя
Не введен e-mail
*Не введен телефон
закрыть

Спасибо, Вы подписаны на полезные статьи и новости учебного центра Unibrains.