Автор этого гостевого поста — Алексей Симоненко, технический директор маркетингового агентства Serenity, автор блога о технологиях веб-разработки Web Energy.

Я уже рассказывал, как подготовить сайт для того, чтобы ссылки на него в Facebook выглядели хорошо. Теперь давайте обратимся к социальной сети Twitter. Не так давно в ней появился механизм для управления дополнительной информацией о вашей ссылке. Этот механизм называется Twitter Cards. По аналогии с Facebook вы можете управлять заголовком, описанием и изображением для ваших ссылок.

Пример работы Twitter Cards

Twitter разделяет 3 вида информации о ссылке:

  • текстовое описание (используется по-умолчанию);
  • фотография;
  • плеер для видео- и аудиоконтента.

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

Как подготовить сайт для Twitter

Так же, как и в случае с Facebook, все настройки нужно будет производить в шапке <head>…</head> на конкретной странице. Для примера можете взять статью «Twitter-трансляция по хештегу на мероприятии». Как видно из скриншота выше, на этой странице используется Twitter Cards.

О том, как такое сделать, достаточно подробно описано в документации, отмечу здесь только основные моменты.

  • twitter:card — вид контента (может быть summary, photo или player);
  • twitter:url — абсолютная ссылка на страницу;
  • twitter:title — заголовок страницы;
  • twitter:description — описание страницы;
  • twitter:image — ссылка на изображение.

Готовый код для примера выглядел бы так:

<meta name="twitter:card" content="summary">

<meta name="twitter:url" content="http://simonenko.su/20775191979/nodejs-twitter-stream-websockets">

<meta name="twitter:title" content="Как сделать онлайн Twitter трансляцию у себя на мероприятии">

<meta name="twitter:description" content="Одним из интерактивных элементов на конференции по маркетингу Digitale была онлайн трансляция twitter-сообщений по хештегу.">

<meta name="twitter:image" content="http://simonenko.su/i/u/twitter-thumb.jpg">

Дополнительно можно указать Twitter-аккаунт автора статьи и аккаунт сайта (если он существует), например вот так:

<meta name="twitter:site" content="@simonenko">

<meta name="twitter:creator" content="@simonenko">

Если на сайте уже есть интеграция с Facebook (Open Graph)

В таком случае задача сильно упрощается. Twitter может читать информацию, подготовленную для Facebook. Поэтому все, что вам нужно будет указать, — это twitter:card и, например, twitter:site, этого будет достаточно.

Часто хочется заранее проверить свои страницы — выяснить, правильно ли их обрабатывает Twitter. Поэтому есть специальный инструмент для тестирования Twitter Cards.

«У меня все готово, но Twitter не воспринимает мои страницы»

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