Бесспорный тренд последних лет — это визуализация структурированных данных, яркими примерами которой являются Яндекс.Острова и Rich Snippets. Не отстает от поисковых систем и самый популярный в мире сервис микроблогов.

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

Так выглядит стандартная карточка товара:

Twitter Cards пример карточки

Twitter поддерживает семь видов карточек:

  1. текстовое описание;
  2. текстовое описание с большим фото;
  3. карточка товара;
  4. фото;
  5. галерея;
  6. видео;
  7. приложение.

Если вы активно используете Twitter для продвижения своего бизнеса, продажи товаров или услуг, тогда Twitter Cards вам пригодится. Благодаря карточкам, пользователь еще в социальной сети сможет определить, интересен ли ему данный контент. Следовательно, уменьшится процент отказов на самом сайте.

Как внедрить Twitter Cards?

Для начала заходим в инструмент создания карточки и выбираем подходящий шаблон:

Twitter Cards выбор шаблона

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

Пример кода карточки товара

Twitter Cards пример кода карточки товара

Первые 11 тегов — стандартные, остальные предназначены для мобильных устройств. В первую очередь нам интересна именно первая партия.

Обязательные теги для размещения:

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

Дополнительные теги:

data — дополнительный тег для карточки товара, с помощью которого можно подтягивать различную информацию со страницы товара

label содержит короткое описание информации, указанной в теге data

  • twitter:data1;
  • twitter:label1;
  • twitter:data2;
  • twitter:label2.

Также есть дополнительные теги twitter:site и twitter:creator, в которых можно указать twitter-аккаунт автора статьи и официальный аккаунт сайта (если он существует).

Пример готового кода:

В итоге мы получим такую карточку товара:

Twitter Cards результат

Пример карточки текстового описания для блога:

Twitter Cards блог

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

Twitter Cards подтверждение карточки Twitter Cards подтверждение карточки

Убедитесь, что вы правильно заполнили пять обязательных полей:

  • name — имя владельца сайта;
  • e-mail;
  • twitter username — twitter-аккаунт автора (если указан тег в коде);
  • website twitter username — twitter-аккаунт сайта;
  • example URL — пример страницы товара.

Если все в порядке, отправляем запрос на подтверждение карточки:

Twitter Cards запрос подтверждения

После этого в настройках Twitter отобразиться статус *.< название домена> approved, а также придет уведомление на вашу почту.

Twitter Cards

Пользователи CMS WordPress могут установить Twitter Cards с помощью плагина JM Twitter Cards. На странице плагина вы найдете необходимую документацию, а весь процесс настройки займет у вас считанные минуты.
Выбирайте подходящий шаблон, используйте наши примеры, чтобы реализовать его на своем сайте, — и вы получите красивые сниппеты для своих постов в одной из самых популярных соцсетей мира. Как я сказал ранее, это позволит привлечь больше заинтересованных посетителей плюс уменьшит bounce rate вашего сайта. Больше информации по настройке и использованию Twitter Cards вы найдете в документах Twitter для разработчиков.

Остались вопросы? Задавайте их в комментариях!