Как сделать 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 взять в этот код. Тот же WordPress SEO выводит их на внутряке. Однако, если вы не используете данный плагин, то пригодится представленные код.
Подберите для себя подходящий вариант.
