Что такое кард в твиттере

Что такое кард в твиттере

To get started with implementing Cards markup, specify the type of card for your content by adding the following HTML markup to the HEAD section of the page:

Card properties are simple key-value pairs, each defined in an HTML meta tag as seen above. The combined collection of properties defines the overall card experience on Twitter, and each card type supports and requires a specific set of properties.

Only one card type per-page is supported. If more than one twitter:card value exists in the page, the “last” one in sequence will take priority.

Card and Content Attribution

Each card has built-in content attribution, which surfaces appropriate Twitter accounts for the content as specified by you. Users will be able to follow and view the profiles of attributed accounts directly from the card. There are two kinds of attribution:

Website Attribution: Indicates the Twitter account for the website or platform on which the content was published. Note that a service may set separate Twitter accounts for different pages/sections of their website, and the most appropriate Twitter account should be used to provide the best context for the user. For example, nytimes.com may set the the website attribution to “@nytimes” for front page articles, and “@NYTArts” for articles in the Arts & Entertainment section.

Creator Attribution: Indicates the individual user that created the content within the card. This applies to the Summary with Large Image card.

Configure card attribution using the following properties:

URL Crawling & Caching

Twitter’s crawler respects Google’s robots.txt specification when scanning URLs. If a page with card markup is blocked, no card will be shown. If an image URL is blocked, no thumbnail or photo will be shown.

Twitter uses the User-Agent of Twitterbot (with version, such as Twitterbot/1.0), which can be used to create an exception in the robots.txt file.

For example, here is a robots.txt which disallows crawling for all robots, except Twitter’s fetcher:

Here is another example, which specifies which directories are allowed to be crawled by Twitterbot (in this case, disallowing all except the images and archives directories):

The server’s robots.txt file must be saved as plain text with ASCII character encoding. To verify this, run the following command:

Content is cached by Twitter for 7 days after a link to a page with card markup has been published in a Tweet.

If you encounter issues with cards in Tweets not appearing properly, see the Cards Troubleshooting Guide.

Card Display

Twitter Cards generated from meta tags only appear when a Tweet is either expanded in the timeline (on web) or viewed on the Tweet’s individual permalink page (by clicking on the date from the timeline, either on web or on mobile).

In limited circumstances, Cards may appear in the timeline, such as in images posted to Twitter, Ad formats, and Twitter-run experiments.

If you are looking to bring media (photos, videos and Cards) into the timeline, consider one of the following options:

Multiple URLs in a Tweet

In some circumstances, users may want to Tweet multiple URLs. Only one card may be shown in a Tweet. Here is the order of precedence when processing multiple URLs:

Twitter Cards and Open Graph

Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol. When using Open Graph protocol to describe data on a page, it is easy to generate a Twitter card without duplicating tags and data. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.

The example below uses a mix of Twitter and Open Graph tags to define a summary card:

Источник

Как сделать Twitter Cards для сайта

Давайте сделаем свой сайт чуть заметнее в ленте Twitter. Поставим разметку Twitter Cards и затем подадим заявку на подтверждение.

Ставить разметку для Twitter будем без плагинов, т.е. подойдет для любой CMS или самописного сайта. Вся процедура у меня заняла порядка 5 минут (дольше читать статью будете).

Что такое Twitter Cards

Данная штука дополняет твиты большей информацией, где фигурирует ваш сайт. На данный момент поддерживается 7 типов предоставления информации:

Вот так выглядит дополнительная информация, если будете твитить любую статью на моем блоге:

Скриншот в tweetdeck. Здесь видим сверху непосредственно мой твит, а снизу еже идет доп инфомрация по странице, которую я твитанул + автор контента. Т.е. если теперь ваши статьи будут твитить с любым текстом, снизу появится больше полезной информации по статье и по сайту. На официальном сайте Twitter и в других приложениях выглядит по-другому.

Поехали

Переходим по ссылке https://dev.twitter.com/ и логинимся под своими данными в Twitter. Сразу рекомендую делать это с браузера Chrome, т.к. FireFox и Opera не поддерживают опцию предпросмотра разметки в данном сервисе.

Залогинились и выбираем тип разметки. Как уже говорил, будем на примере Summary.

Выбрали Summary и заполняем данные:

Вообще, вставляя данные здесь, мы получаем на выходе статичную информацию, т.е. не подставишь другой ник или фото. В одной из следующих статей я расскажу как сделать удобный интрефейс для подобного в админке сайта. Сейчас главное пройти валидацию и подтверждение сайта.

Заполнили все необходимые поля и снизу нажали синию кнопку «Update Preview». Справа увидите что все работает и ниже код. Необходимо скопировать представленный код и вставить его в секцию head на вашем сайте. Копируйте только код, который я выделил синим (остальное мы не заполняли, поэтом пока не нужно):

В шаблоне сайта открываем файл header.php и прямо перед закрывающим вставляете его.

Проверяем корректность вставки кода

Теперь на вторую закладку Validate & Apply

Здесь вставляете url своего сайта и проверяете. Если все отлично, то появится кнопка «Request Approval» (подтвердить карточку в самом сервисе). Нажимаете и заполняете там необходимые данные (все будет подставлено уже кроме описания сайта, которое продублируете и аккаунта).

После этого появится сообщение, что необходимо ждать в течении нескольких недель. Однако у меня это заняло несколько минут и на указанную почту упало сообщение следующего содержания: We’ve activated the summary card for mojwp.ru.

Относительно WordPress SEO

Плагин WordPress SEO дает также микроразметку для Twitter. Но почему-то он не выводил нужные данные для Главной, что не позволяло подтвердить сайт в сервисе. Поэтому и пришлось вставлять код в head, как писал выше.

P.S.: следом за своим блогом я сделал подобную карту и для сайта клиента на самописной CMS. Также на все понадобилось минут 5: вставил код и подтверждающее письмо пришло через пару минут. Все работает!

Дополнение

Благодарю Константина, который в комментариях натолкнул на мысль как для WordPress улучшить снятие информации в карточке твиттер.

Мы вставляли большой кусок кода в секцию head. По итогу информация была статичной. Предлагаю такое решение: для Главной информация останется статичной, а для внутренних страниц на WordPress она будет браться из вашей Open Graph разметки (тот же плагин WordPress SEO).

Ранее была статья Как убрать ссылку с Главной на саму себя. Вот и возьмем статичные данные в этот код. По итогу получается нечто подобное:

Источник

Карты Twitter Cards. что это такое и как добавить их в свой WordPress

Главное меню » Социальные сети » Twitter » Карты Twitter Cards. что это такое и как добавить их в свой WordPress

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

Возможность обмениваться мнениями и комментариями к новостям в режиме реального времени сделала ее одним из наиболее часто используемых каналов связи в мире. По этой причине Twitter – отличный инструмент для информирования пользователей обо всех новостях на вашем сайте.

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

Как сделать ваши твиты более привлекательными?

Здесь в игру вступают карты Twitter Cards – специальные твиты, которые позволяют отображать больше информации, чем обычные твиты.

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

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

Итак, если у вас есть веб-сайт, размещенный на качественном хостинге WordPress, ваша главная задача будет заключаться в том, чтобы узнать, как вы собираетесь увеличить количество посещений. Карты Twitter – хорошие инструменты для этого.

Пять важнейших преимуществ

Какие типы карт Twitter существуют?

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

Как добавить Twitter Cards в свой блог?

Обладая такими преимуществами, вы захотите протестировать их на своем веб-сайте на CMS WordPress.

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

Но, если вы не знаете, как это сделать, к счастью, уже есть плагины WordPress, которые могут вам помочь, например, официальный плагин Twitter или хорошо известный Yoast SEO, который позволяет создавать сводные карточки Twitter с изображением.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Источник

Twitter Cards – как выйти за рамки 140 символов и получить больше кликов

Как выглядят обычные посты в «Твиттере»? Так:

Ну или, в лучшем случае (если прикреплена фотка), вот так:

Название статьи, ссылка и пара хэштегов – больше в 140 знаков, как правило, ничего не влезает… Ни анонс нормальный дать нельзя, ни свой комментарий добавить. Даже видео прикрепить невозможно! Как в таких условиях заинтересовать пользователя и побудить его кликнуть по ссылке, непонятно.

Если вы используете «Твиттер» не только ради удовольствия, но и в качестве платформы для продвижения своего бизнеса, вас наверняка раздражают подобные ограничения. Если так, то спешу вас обрадовать – сегодня вы научитесь их преодолевать.

Twitter Cards – выходим за рамки 140 символов

Twitter Cards (Карточки «Твитера») – специальное API от Twitter, которое позволяет пользователям расширять свои твиты и, тем самым, привлекать больше трафика на сайт. Вот какой вид может принять ваш твит, если вы воспользуетесь Twitter Cards (пока просто посмотрите, не обращайте внимание на коды, ниже я детально объясню, зачем они нужны):

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

ваш корпоративный аккаунт в Твиттере «>

Анонс материала. Например, из этой статьи вы узнаете то-то и то-то. «>

http://site.ru/картинка для анонса.jpg «>

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

ваш корпоративный аккаунт в Твиттере «>

Анонс материала. Например, из этой статьи вы узнаете то-то и то-то. «>

http://site.ru/картинка для анонса.jpg «>

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

с какого сайта фотографии «>

имя фотографа «> – этот тег можно не использовать

Название статьи или серии картинок «>

Описание статьи или серии картинок. «>

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

Youtube или любой другой плеер «>

http://ссылка на кадр из видео, например, http://i1.ytimg.com/vi/FMyjXRMhgVU/default.jpg «> – картинка должна быть такого же размера, как разрешение видео

5. И последнее – настоящая находка для интернет-магазинов… Карточка товара!

ваш корпоративный аккаунт в Твиттере «>

http://site.ru/картинка для анонса.jpg «>

Здесь пишем стоимость продукта. Например, 300 рублей «>

Здесь пишем цвет продукта. Например, черный «>

Источник

Делаем Twitter Cards с галереями и котиками

Речь сегодня пойдет о встраивании расширенного контента в твиты, содержащие ссылку на ваш сайт. Многие наверняка встречались с подобным в Facebook’е или ВК: вы расшариваете в соцсеть некую ссылку, а помимо нее туда автоматически подгружается, например, заголовок, описание и изображение. Вот только поддержка технологии для VK и FB сейчас не является редкостью, а Twitter Cards встречаются не так часто, особенно в рунете.

Twitter Cards или Expanded Tweets позволяют уместить в одном твите больше информации, чем обычно. Помимо текстовой информации поддерживается также графическая и аудио/видео. Поддержка реализована как в официальных twitter-клиентах, так и во многих сторонних. Эта дополнительная информация подгружается только когда пользователь нажмет под твитом с ссылкой кнопку Expand/Details (кнопка зависит от используемого клиента), то есть лента не будет захламлена, даже если каждый твит будет содержать расширенную часть.

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

Перейдем ближе к делу. Работает все это на основе метаразметки. Допустим, для получения изображения, находящегося в начале поста, на страницу были добавлены следующие метатеги:

Кстати, многие сайты, организующие автоматический постинг новых страниц в твиттер, нередко пользуются сторонними хостингами изображений, чтобы подгружать их (изображения) в твиты. Описываемые карточки могут оказаться неплохой альтернативой. А особо внимательные могли заметить, что информация, размещаемая в карточке, может вообще не соответствовать содержимому страницы (но я вам этого не говорил).

К сожалению, недостаточно просто добавить теги. Необходимо зааппрувить одобрить сайт для использования выбранного типа карточек. После того, как метатеги добавлены, идем в валидатор, выбираем нужный тип карточки, переходим на вкладку Validate & Apply и там вставляем ссылку на страницу с прописанными метатегами. Убедитесь, что разметка верная, после чего обратите внимание на то, что домен «not approved».

Но все не так страшно, как может показаться. Жмете Request Approval, видите уже заполненную форму. Можно что-то подредактировать по желанию, заполнить нужно только Website Description. Я туда честно написал «Site for tests of twi-cards», нажал Request Approval и… И увидел сообщение:

Thanks for applying to be part of Twitter’s cards service. We’ll review your request as soon as possible. Expect a few weeks for turn-around time. You will receive an email when your request has been reviewed.

Признаться, эти вот few weeks меня несколько расстроили. Но, как выяснилось, одобрение проходит в течение минуты-двух. Вероятно, эта оговорка там висит либо с прошлых времен, когда одобрение происходило дольше, либо на случай, если вдруг весь Хабрахабр начнет аппрувить свои сайтики.

После этого можно постить ссылку, с которой проходили одобрение, в твиттер, и она должна нести в себе новую карточку. Кроме того, карточки будут доступны и на любых других страницах с прописанными метатегами, находящимися на одобренном домене (и его поддоменах). Краулер работает сравнительно шустро. Даже переиндексация уже проиндексированных страниц происходит в течение получаса, хотя официально говорится, что примерно раз в неделю (и тут с большим запасом работают). Если нужно переиндексировать страницу еще быстрее, можно просто к ссылке добавить якорь или GET-параметр, и постить ее, а не оригинальную.

Во избежание недопониманий, сразу отмечу, что одобрение происходит только для одного типа карточек. Объясню на еще одном примере.

Допустим, Summary Card мы нам одобрили, они работают, новые страницы индексируются. И вот мы вставляем в одну из страниц метатеги:

Казалось бы, все должно работать, но нет. Проблема в том, что одобрена только Summary Card, а это Gallery Card. Чтобы заработали и они, нужно снова сходить к валидатору и одобрить страницу, размеченную под этот тип карточек. Заодно убедитесь, что разметка правильная. Проходим валидацию, получаем аппрув и…

Профит!

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

Естественно, здесь я все привожу для примеров. Вручную прописывать в реальных проектах ничего не нужно. Дописать функциональность для реализации описанных возможностей на знакомой CMS не должно составить труда любому веб-разработчику. Для WordPress, Blogger и Tumblr существуют уже готовые решения.

И также замечу, что данный пост не стоит считать исчерпывающим руководством. Здесь не описаны другие виды карточек и все доступные параметры (можно указывать, например, не только твиттер автора, но и твиттер сайта). Я лишь рассказал о существовании возможности реализации подобного и показал простейшие примеры. После этого с остальным без труда поможет разобраться официальная документация.

PS: Замечу, что используемая разметка основана на стандарте Open Graph. Он используется, например, VK и FB, о чем я говорил в начале поста. Единственное отличие — вместо twitter:title, twitter:description и twitter:image используются og:title, og:description, og:image и добавляется og:url, содержащий ссылку на страницу. К счастью, твиттер поддерживает смешивание Twitter Cards и Open Graph, без необходимости дублирования метатегов. Пример смешивания из документации. Если делать так, то заодно появятся карточки страниц и при постинге ссылок на них в другие соцсети.

Upd: Дельное замечание от shurph:

Стоит отметить, что есть ещё одна особенность: как видно из вашего же примера, если нужно указать несколько тегов изображений, то для твиттера следует использовать twitter:image0, twitter:image1, twitter:image2, twitter:image3 и т.д., в то время как в Open Graph используется просто og:image для всех изображений.

Источник