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

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

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

Что такое Twitter Cards

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

  • Summary - основной тип разметки, применяемый на большинстве сайтов. Дает превью вашего сайта/странички (заголовок, описание, фото, автор). На ее примере сегодня и будет описана процедура добавления на сайт Twitter Cards.
  • Product - подойдет для Интернет-магазинов, или компаний, оказывающих услуги.
  • Photo - для сайтов, где основной контент фотографии (стоки, развлекательные, фотостудии и пр.).
  • Summary Large Image - первый тип разметки, только фотка в данном случае будет большого размера.
  • Player - если основной контент - это видео. Фактически аналог фото. только в другой ипостаси.
  • App - для страничек, где распространяют мобильные приложения.
  • Gallery - также удобно для страниц, где много фоток. Формируется галерея из нескольких фоток.

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

Клик для увеличения

Клик для увеличения

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

Поехали

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

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

Выбор типа разметки

Клик для увеличения

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

Заполняем данные

клик для увеличения

Верхняя красная стрелка - аккаунт сайта в Twitter (если есть один общий), а нижняя - ник автора непосредственно статьи (если несколько ведут).

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

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

Копируем код

Клик для увеличения

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

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

Теперь на вторую закладку 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).

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

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@mojWP">
<?php if(!is_front_page() || is_paged()) 
echo ""; 
else 
echo "<meta name=\"twitter:title\" content=\"Вебмастеринг и настройка сайтов на WordPress\">
<meta name=\"twitter:description\" content=\"Практические статьи по ведению и доводке сайтов на WordPress. Только опыт и ничего лишнего\">
<meta name=\"twitter:image:src\" content=\"http://mojwp.ru/wp-content/uploads/2013/07/mojwp-80.jpg\">
<meta name=\"twitter:domain\" content=\"http://mojwp.ru/\">";
?>
<meta name="twitter:creator" content="@mojWP">

Обратите внимание, что зеркальные \ ставятся перед двойной кавычкой ".

Есть вариант вообще все поля meta взять в этот код. Тот же WordPress SEO выводит их на внутряке. Однако, если вы не используете данный плагин, то пригодится представленные код.

Подберите для себя подходящий вариант.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 14 комментариев
  1. Константин (20 комм.) says:
    http://www.chuvyr.ru/

    Лучше комбинировать метаданные Twitter Cards с Open Graph всё же меньше мусора.

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      На WPплагин WordPress SEO by Yoast дает необходимое.
      Позже напишу статью как свои данные подставлять для отображения. Тоже без плагина. Правда придется покопаться в коде шаблона немного.

      • Константин (20 комм.) says:
        http://www.chuvyr.ru/

        Я вообще то про то, что twitter cards это набор метаданных, который не используются больше ни одним сервисом, если сюда же добавить Open Graph метаданные, получится куча ненужного дубля. Twitter распознает Open Graph и этим надо пользоваться, подробней тут: https://dev.twitter.com/docs/cards/getting-started

        • Виталий (1675 комм.) says:
          http://mojWP.ru/

          Так я и привел в пример плагин для WP, который внедряет разметку.
          Если прочитали статью до конца, то увидели, что он не выводил у меня на Главную необходимые данные для валидации в твиттер. Поэтому пришлось руками.
          В зависимости от нужд, можно скорректировать данные: оставить статику, чтобы всегда отображало инфа Главной, или использовать для каждой страницы свои значения. Это уже каждый решает для себя.

          • Константин (20 комм.) says:
            http://www.chuvyr.ru/

            Плагин, как я вижу работает правильно, он формирует только нужные: twitter:card, twitter:site и twitter:creator - я просто отметил для ваших читателей, что остальные данные достаточно оказать через Open Graph, что у вас и реализовано 😉

        • Виталий (1675 комм.) says:
          http://mojWP.ru/

          Кстати. Подсказали идею для WP в сочетании с плагином WordPress SEO. Сейчас статью дополню

          • Константин (20 комм.) says:
            http://www.chuvyr.ru/

            А что тут дополнять? Можно либо ручками, либо допилить плагин. Я вообще то на Blogger хостюсь, а с WordPress дело давно было... хотя и есть пара существующих на нём блогов...

  2. Валерий (8 комм.) says:
    http://aimblog.ru/

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

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Что-то не вижу твоего твита в ленте.

      • Валерий (8 комм.) says:
        http://aimblog.ru/

        Я удалил. Сейчас твитну еще раз. Так а я сам не увижу?

        • Константин (20 комм.) says:
          http://www.chuvyr.ru/

          Вообще то для Twitter Cards нужен WebKit браузер, типа Chrome, но и в Firefox оно вроде работает. Вы проверьте в валидаторе страницу которую твитите. Нормально обрабатывается, все данные считываются и распознаются?

        • Виталий (1675 комм.) says:
          http://mojWP.ru/

          Увидишь на официальном сайте Twitter или в твитдек, как я на скрине привел пример.

  3. Артём Черкасов (83 комм.) says:
    http://blog-artema.ru/

    Спасибо, сделал для своего блога 😉

  4. Ирина Жигалова (3 комм.) says:
    http://irzhitalk.ru/

    Спасибо за информацию! Сделала для своего сайта. Подтверждение пришло через 1-3 секунды. Я успела только кнопку нажать.

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.97MB | MySQL:88 | 0,464sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html