Авторизация:
Имя:

Пароль:

Поиск по сайту:

Помощник Blogger -а: Создание и настройка блога на платформе Blogger (Blogspot) и его продвижение. Подробные инструкции и описание работы с Блоггером

Последнее на сайте:

Подписка на новости

Введите Ваш email:


Разделы:

рейтинг статьи: 5/5; голосов: 7; комментариев: 0

Главная > Все о SEO > Что такое twitter card и как ее создать

25.10.2016

Что такое twitter card и как ее создать

twitter cardЯ думаю, многих не устраивал тот факт, что, в социальной сети twitter размер сообщения ограничен 140 символами. Такой размер вполне сойдет для коротких сообщений, приветствий и кратких ответов. Но для полноценного освещения какого-либо события или новости размера Твиттер сообщения явно не хватало. Руководство twitter прислушалось к требованиям пользователей и увеличило возможности стандартных сообщений за счет добавления twitter card (Твиттер карточек).

 

Что такое Твиттер карточка

Твиттер карточка – это расширенный вид сообщения в Твиттере. В нее можно вставлять различную информация с сайта, такую как, картинки, описание и так далее. Что в свою очередь расширяет объем передаваемой информации через Твиттер сообщения и предает ему более привлекательный  внешний вид.

 

Какие бывают Твиттер карточки

Twitter card бывают нескольких видов:

  1. Summary Card – обычная карточка с картинкой, кратким описанием и заголовком
  2. Summary Card with Large Image – карточка с большой картинкой, описанием и заголовком
  3. Photo Card – карточка с фото
  4. Gallery Card – карточка с четырьмя фотографиями
  5. App Card – карточка для приложений
  6. App Installs and Deep-Linking – карточка для установки приложения AppStore или Google Play
  7. Player Card
  8. Product Card – карточка с описанием какого-либо продукта

Все Твиттер карточки основаны на собственной микроразметке. Основой для создания этой микроразметки стал стандарт Open Graph. Кто с ним уже сталкивался, тот, несомненно, сможет найти совпадения микроразметки Твиттер с ним.

Предлагаю рассмотреть самые популярные Твиттер карточки, их описание, тонкости настройки и как правильно их устанавливать.

 

Summary Card

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

twitter card Summary Card

Кстати, Вконтакте и Facebook используют подобный вид карточек для автоматического постинга своих сообщений в Твиттере.

Ниже представлен код микроразметки для Summary Card:

код микроразметки для Summary Card

где:

twitter:card – summary (вид поле указывается вид twitter card)
twitter:site – ваш аккаунт в twitter
twitter:title – заголовок карточки, длина не более 70 символов
twitter:description – описание Твиттер карточки, не более 200 символов (включая пробелы)
twitter:image:src – ссылка на размещаемую картинки. Размер картинок – 120х120 пикселей, размер файла не более 1MB.

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

 

Summary Card with Large Image

Единственным отличием данного вида карточек от предыдущего – это размер картинки.

twitter card Summary Card with Large Image

В этом типе карточек размер картинки выше и составляет 280х150 пикселей. Как и в twitter card Summary Card, если размер картинки будет больше оговоренного размера, то робот автоматически картинку купирует. Так что, берите во внимание эту особенность картинок в Summary Card with Large Image. Размер файла картинки не должен превышать 1 MB.

Код Card with Large Image:

код микроразметки для Card with Large Image

 

Photo Card

Этот тип Twitter Card больше подходит для сайтов фотостудий или блогов фотографов. В данной карточке фотография становится главным объектом карточки.

Ограничения для картинок:
максимум 435х375 – для стационарных компьютеров и 280х375 – для мобильных устройств.

твиттер карточка Photo

Код:

код микроразметки для твиттер карточки Photo

 

Gallery Card

Данный тип Твиттер карточки отличается от предыдущего типа только возможностью размещать в карточке до 4 фотографий. Это, так сказать, фотогаллерея.

твиттер карточка Gallery  Card

Код:

код микроразметки для твиттер карточки Gallery  Card

Важно: Если вы первый раз в twitter card validator проверили Твиттер карточки типа Summary Card или Summary Card with Large Image, то система запомнила адрес домена, где размещена страница с микроразметкой, как домен с этим типом карт, и вы сможете использовать только этот тип twitter card для этого домена. При размещении на страницах этого домена микроразметки других типов карточек, twitter card validator будет показывать ошибки или система не будет реагировать на новый тип карточек.

 

Player Card

Этот тип карточек нужен для передачи видео в Твиттер.

твиттер карточка Player  Card

 

Чтобы настроить данный вид twitter card нужно:

  1. Перейти на страницу создания Play Card по адресу: https://github.com/twitterdev/cards-player-samples

  2. создание карточки Play Card

  3. Скачать архив
  4. Распаковать его и настроить код, представленный в файлах page.html. Этот файл находится в двух папках: player и player_streaming
  5. Распакованный архив перенести в корневую папку вашего сайта
  6. Проверить работает видео или нет можно здесь: https://dev.twitter.com/cards/types/player (указана инструкция для проверки на кросплатформенность)
  7. Проверяете и подтверждаете вашу карточку в twitter card validator по адресу: https://cards-dev.twitter.com/validator

В файле page.html (который находится в архиве) находим метатэги  twitter:image, twitter:player и twitter:player:stream values, изменяем их содержимое на свои данные, сохраняем.

Важно: Ваш сайт должен использовать https:// - протокол. Это одно их основных условий для подтверждения пригодности твиттер карточки в twitter card validator.

 

Product Card

Эта Твиттер карточка рекомендуется для интернет-магазинов, так как она полностью раскрывает содержимое продаваемого товара.

твиттер карточка Product Card

 

Код карточки:

код микроразметки для Product Card

 

Как и где устанавливать код twitter card

Как видно из примеров, код микроразметки Твиттер карточек заключается в метатэги <meta>. Размещать его следует между тегами <head>…</head> в коде на странице, которую вы хотите анонсировать в Твиттере. Это касается всех Твиттер карточек, кроме карточек Player Card.

Важно: После установки кода микроразметки обязательно нужно проверить страницу в twitter card validator. Без этой проверки в вашем Твиттере карточка не будет работать. Каждую новую страницу с микроразметкой Твиттер карточек перед ее публикацией нужно проверять в twitter card validator.

результаты проверки карточки в twitter card validator

Если ваша карточка успешно прошла проверку, то можно размещать в вашем Твиттере ссылку на эту страницу и описание ссылки, и вы увидите вместо короткого Твиттер сообщения полноценную twitter card.

 

Вывод

Использование twitter card может благотворно повлиять как на ваш аккаунт в Твиттер, так и на сайт, анонсы которого вы размещаете в Твиттере. Твиттер карточки расширяют возможности обычных Твиттер сообщений, увеличивая их объем и привлекательность. Теперь не один из пользователей не пройдет мимо вашего твита, так как он выделяется на фоне обычных сообщений и бросается в глаза своими картинками или видео.

В данной статье я пропустил еще один вид Твиттер карточек App Card. Я не стал его освещать, так как он не является очень популярным видом карточек. В данной статье были рассмотрены подробно самые популярные и востребованные twitter card.

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

Читайте также:


 

Статьи по теме:

1914

Оцените статью:

1 2 3 4 5
рейтинг: 5/5; голосов: 7

Зарегистрируйтесь или войдите под своим именем чтобы оставить комментарий