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

Действующие акции

Партнеры

Используем Twitter Cards

Скачайте PDF файл с полным описанием тегов Twitter Cards на русском.

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

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

Не раздражайте своих посетителей и они ответят вам своей лояльностью. https://t.co/umLxSflWQ1

Такой расширенный твит позволяет использовать до 200 символов описания продукта, что увеличивает количество символов, используемых в простом твите на 43%.

Вы это можете сделать сами и прямо сейчас, необходимо всего лишь добавить несколько строк HTML на страницу сайта (не волнуйтесь, мы это рассмотрим ниже).

Приступим

Рассмотрим типы Twitter Cards

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

Summary Card

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

An Up-and-Down Season at Yankee Stadium, at Least for the Flag Crew https://t.co/hWogjwpcG1

Summary Card with Large Image

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

Не раздражайте своих посетителей и они ответят вам своей лояльностью. https://t.co/umLxSflWQ1

App Card

Карточка приложения (App Store и Google Play). Идеально подходит для мобильных устройств, так как призыв к действию отображается только в Twitter для iOs и Android и только в том случае, если у пользователя не установлено это приложение.

Player Card

Эта карта позволяет вашей аудитории смотреть или слушать контент не выходя из Twitter.

Tonight, we head to Havana to explore the fascinating time warp that characterizes Cuban car culture. #CubanChrome https://t.co/L35zKVWVcb

Указав в twitter:player:stream ссылку на поток и в twitter:player:stream:content_type тип потока, приложение проиграет поток непосредственно из приложения. При отсутствии, ссылка будет открыта в браузере.

Устаревшие типы карт

Как настроить Twitter Cards

В качестве примера, приведем основную разметку Summary Card with Large Image:

Системы управления сайтом

Для систем управления сайтом разработаны различные плагины, которые вам нужно будет просто установить и настроить, например, для WordPress есть плагины Jetpack, JM Twitter Cards и WordPress SEO by Yoas. Все изменения HTML кода они произведут самостоятельно.

Проверка типа Twitter Card

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

Используйте валидатор Twitter для прохождения проверки типа карты.

Информация, которую необходимо знать, и стратегия при использовании Twitter Cards

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

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

Изображения без Twitter Cards

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

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

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

Анализ твитов

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

Твит с контактами, рекламой, призывом к действию.

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

У вас возникли вопросы? Задайте их в комментариях.

Создание сайта компании
Madcatzz

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

Создание сайта компании
Madcatzz

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

Источник

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

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 с галереями и котиками

Речь сегодня пойдет о встраивании расширенного контента в твиты, содержащие ссылку на ваш сайт. Многие наверняка встречались с подобным в 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 для всех изображений.

Источник

Карты 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.

Источник