Что такое Twitter Cards и как извлечь дополнительные преимущества

0 0
01:16 19 апреля 2015 — Угниченко Дмитрий
Что такое Twitter Cards и как извлечь дополнительные преимущества с сайта

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

Позволяет выйти за рамки 140 символов и получить больше кликов.

Карточка с расширенным описанием и маленькой картинкой

twitter с расширенным описанием и маленькой картинкой

Микроразметка:


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

<meta name="twitter:site" content="@ваш корпоративный аккаунт в Твиттере">

<meta name="twitter:title" content=" "Название статьи">

<meta name="twitter:description" content="Анонс материала. Например, из этой статьи вы узнаете то-то и то-то.">

<meta name="twitter:image" content="http://site.ru/картинка для анонса.jpg">

Карточка с расширенным описанием и большой картинкой

Карточка с расширенным описанием и большой картинкой

Микроразметка:


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

<meta name="twitter:site" content="@ваш корпоративный аккаунт в Твиттере">

<meta name="twitter:title" content="Название статьи">

<meta name="twitter:description" content="Анонс материала. Например, из этой статьи вы узнаете то-то и то-то.">

<meta name="twitter:image:src" content="http://site.ru/картинка для анонса.jpg">

Галерея фотографий с описанием

Галерея фотографий с описанием

Микроразметка:

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

<meta name="twitter:site" content="@с какого сайта фотографии">

<meta name="twitter:creator" content="@имя фотографа"> – этот тег можно не использовать

<meta name="twitter:title" content="Название статьи или серии картинок">

<meta name="twitter:description" content="Описание статьи или серии картинок.">

<meta name="twitter:image0" content="http://site.ru/картинка1.jpg ">

<meta name="twitter:image1" content="http://site.ru/картинка2.jpg ">

<meta name="twitter:image2" content="http://site.ru/картинка3.jpg ">

<meta name="twitter:image3" content="http://site.ru/картинка4.jpg ">

Видеоплеер с описанием

Видеоплеер с описанием

Микроразметка:


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

<meta name="twitter:site" content="@Youtube или любой другой плеер">

<meta name="twitter:title" content="Название видео">

<meta name="twitter:description" content="Описание видео.">

<meta name="twitter:image" content="http://ссылка на кадр из видео, например, http://i1.ytimg.com/vi/FMyjXRMhgVU/default.jpg"> – картинка должна быть такого же размера, как разрешение видео

<meta name="twitter:player" content="URL видео">

<meta name="twitter:player:width" content="435">

<meta name="twitter:player:height" content="251">

Карточка товара

Карточка товара


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

<meta name="twitter:site" content="@ваш корпоративный аккаунт в Твиттере">

<meta name="twitter:creator" content="@имя производителя">

<meta name="twitter:title" content="Название продукта">

<meta name="twitter:description" content="Описание продукта.">

<meta name="twitter:image" content="http://site.ru/картинка для анонса.jpg">

<meta name="twitter:data1" content="Здесь пишем стоимость продукта. Например, 300 рублей">

<meta name="twitter:label1" content="Price">

<meta name="twitter:data2" content="Здесь пишем цвет продукта. Например, черный">

<meta name="twitter:label2" content="Color">

Валидация

Официальный валидатор, ссылка https://cards-dev.twitter.com/validator

0 комментариев

+ Добавить комментарий

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