Встраиваем расширенный контент в твиты, содержащие ссылку на ваш сайт. Многие наверняка встречались с подобным в Facebook-е или ВК.
Вы расшариваете в соцсеть некую ссылку, а помимо нее туда автоматически подгружается, например, заголовок, описание и изображение. Вот только поддержка технологии для VK и FB сейчас не является редкостью, а Twitter Cards встречаются не так часто, особенно в рунете.
Итак, Twitter Cards (дальше будем называть карточками для удобства) позволяют встраивать контент с сайта в твиты. Но они бывают разных типов:
Summary Card. Стандартная карточка с заголовком, описанием и изображением.
Summary Card with Large Image. Та же самая Summary, только больший акцент сделан на изображении.
Photo Card. Тут все и так ясно, фотокарточка.
Gallery Card. Мини-галерея из четырех изображений.
App Card. Карточка приложения в App Store или Google Play.
App Installs and Deep-Linking. Установка приложения при необходимости и deep-linking (если я верно понял, подразумевается переход в указанное приложение).
Player Card. Карточка с медиа-плеером.
Product Card. Карточка товара (для интернет-магазинов).
Мы будем рассматривать Summary Card.
Twitter Cards или Expanded Tweets позволяют уместить в одном твите больше информации, чем обычно. Помимо текстовой информации поддерживается также графическая и аудио/видео. Поддержка реализована как в официальных twitter-клиентах, так и во многих сторонних. Эта дополнительная информация подгружается только когда пользователь нажмет под твитом с ссылкой кнопку Expand/Details (кнопка зависит от используемого клиента), то есть лента не будет захламлена, даже если каждый твит будет содержать расширенную часть.
Разъясним значения тегов.
twitter:card — тип карточки. В данном случае можно опустить, так как summary идет по-умолчанию.
twitter:creator — твиттер автора (контента, сайта).
twitter:title — заголовок. До 70 символов.
twitter:description — описание. До 200 символов.
twitter:image — ссылка на изображение. Обязательно абсолютная.
Нетрудно понять, что 120 символов самого твита (минус 20 на ссылку), 270 символов в карточке и изображение с большей вероятностью привлекут пользователя к хорошему сайту, нежели просто твит со ссылкой.
Используемая разметка основана на стандарте Open Graph. Он используется, например, VK и FB. Официальная документация Единственное отличие — вместо twitter:title, twitter:description и twitter:image используются og:title, og:description, og:image и добавляется og:url, содержащий ссылку на страницу. К счастью, твиттер поддерживает смешивание Twitter Cards и Open Graph, без необходимости дублирования метатегов. Пример смешивания из документации. Если делать так, то заодно появятся карточки страниц и при постинге ссылок на них в другие соцсети.
В DLE присутствует Open Graph разметка, но непонятно почему в ней отсутствует значение мета-тега og:description.
Теперь переходим к реализации Twitter Cards в CMS DataLife Engine.
*вместо VtopSearch добавьте своё name в Twitter-е
Теперь для тех кто не ищет лёгких путей, делаем всё по Твиттерски…
Не забываем:
К сожалению, недостаточно просто добавить теги. Необходимо зааппрувить одобрить сайт для использования выбранного типа карточек.
После того, как мета-теги добавлены, идем в валидатор, выбираем нужный тип карточки, переходим на вкладку Validate & Apply и там вставляем ссылку на страницу с прописанными мета-тегами и Жмете Request Approval. Через несколько минут Вашу карточку одобрят.
Реализовал Twitter Cards для DLE VtopSearch описание Twitter Cards взято с Хабра
Пошаговая инструкция Approval Twitter Cards от VtopSearch в картинках: