Регистрация Войти
Вход на сайт

Делаем Twitter Cards для DataLife Engine

Делаем Twitter Cards для DataLife Engine

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

Делаем Twitter Cards для DataLife Engine

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

Делаем Twitter Cards для DataLife Engine


Используемая разметка основана на стандарте 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 в картинках:

Делаем Twitter Cards для DataLife Engine


Делаем Twitter Cards для DataLife Engine


Делаем Twitter Cards для DataLife Engine


Делаем Twitter Cards для DataLife Engine


Делаем Twitter Cards для DataLife Engine


Делаем Twitter Cards для DataLife Engine


Делаем Twitter Cards для DataLife Engine
Категория: Скрипты
Актуальные версии, стоимость и возможности сервисов и программ уточняйте на сайтах их авторов.
comments powered by Disqus
» » Делаем Twitter Cards для DataLife Engine