Практический опыт того, что представляет собой микроразметка твиттера и как она работает поможет оптимизировать сайт для соцсетей. В статье приведены основные принципы микроразметки и примеры использования.
Что такое 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, что избавляет от дублирования метатегов.