Применение формата микроразметки твиттера Twitter Cards


Применение формата микроразметки твиттера Twitter Cards

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

 

Что такое  Twitter Cards ?

Twitter Cards   (по другому Expanded Tweets)  это   набор описаний предназначенных для маркировки текстового и мультимедийного содержимого вебстраниц и разработан для более точной обработки семантически отмеченных данных  социальной сетью Твиттер.

Использование  «твиттер кардс» подразумевает  публикацию  расширенного содержимого  в твиты, которые создаются через ссылку на вашу страницу. Подобный функционал есть в Facebook или ВКонтакте, когда для создания записи указываете в соцсеть  ссылку на html-страницу, с этой страницы в соццсеть вносится и другие данные,  например, название страницы, краткое описание,  фотография.

 

Как использовать Twitter Cards на сайте ?

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

 

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

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

<meta name="twitter:title" content="Применение формата микроразметки твиттера Twitter Cards ">

<meta name="twitter:description" content="Твиттер кардс это возможность сделать твит с изображением, описанием и ссылкой и это привлечет пользователя к сайту SDEP.RU ">

<meta name="twitter:image" content="http://sdep.ru/img/sdep.png">

 

 

Типы атрибутов

 

Тип

Описание

1

twitter:card

Указание типа твиттер кардс. В  случае если общий тип (summary) можно неуказывать, так как он присваивается по-умолчанию.

 

2

twitter:creator

Автор твита

3

twitter:title

Заголовок твита, не более 70 символов.

4

twitter:description

Описание, то есть сам твит длиной не более 200 символов.

5

twitter:image

 

URL  изображения к твиту. Здесь обязателен абсолютный URL

 

 

Типы  Twitter Cards

В таблице приведены основные типы Twitter Cards

Тип

Описание

1

Summary Card

Карточка назначаемая по умолчанию, при отсутствии названия карточки. Содержит заголовок, описанием и изображением.

2

Summary Card with Large Image

Карточка  Summary, только с большим изображением.

3

App Card

Публикуется информация о приложении из App Store или Google Play.

4

Player Card

Твит содержит  медиа-плеер.

 

 

Типы  Twitter Cards для разработчиков мобильных приложений

Твиттер выделяет отдельно  типы Twitter Cards для разработчиков мобильных приложений

Тип

Описание

1

App Card

В твите размещается  информация о приложении из App Store или Google Play.

2

Creating URL schemes

Учебное пособие по созданию схемы URL, чтобы открыть пример приложения, набрав «birdland: //» в Safari для iOS.

3

Deep-linking into an app

Установка мобильного приложения и  переход в указанное приложение.

 

 

Как начать использовать Twitter Cards

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

Делается это так – после добавления  метатегов в код веб страницы, переходим в валидатор Twitter, выбираем тот тип Twitter Cards который используем на сайте, идем в раздел Validate & Apply и там вводим URL веб страницы в которой есть метатегами.

После этого ждем некоторое время и Твиттер выдает сообщение что проверка пройдена.

 

Одобрение  еще одного типа

Итак, тип карточка по умолчанию Summary Card  нам одобрили и мы вставляем новые метатеги но уже другой карточки:

 

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

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

 <meta name="twitter:title" content="Применение формата микроразметки твиттера Twitter Cards ">

 <meta name="twitter:description" content="Твиттер кардс это возможность сделать твит с изображением, описанием и ссылкой и это привлечет пользователя к сайту SDEP.RU ">

 <meta name="twitter:image" content="http://sdep.ru/img/sdep.png">

 

 

И эта карточка не будет работать, так как проверка прошла только «Summary Card», а это другой тип  «Summary Card with Large Image».

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

 

Техническая документация

https://dev.twitter.com/cards/overview документация  Twitter Developer Documentation

https://cards-dev.twitter.com/validator  валидатор разметки

 

Заключение

Читать твиттера  с большей вероятностью обратит внимание на длинный твит с большим изображением и заинтересуется хорошим сайтом, нежели  твит без текста только со ссылкой.

 

Интересный момент:  Разметка Twitter Cards основана на базовом стандарте Open Graph (OG). Open Graph применяется ВКонтакте и Facebook но с некоторыми отличиями. TWITTER понимает  совместное использование  тегов Twitter Cards и Open Graph, что избавляет от дублирования метатегов.