Мета-теги карточки Twitter

Twitter (X) определил собственный протокол карточек превью ещё до появления OpenGraph и по-прежнему поддерживает его. Хотя современный Twitter использует теги OG как резервный вариант, если отсутствуют теги twitter:*, явное указание twitter:card обеспечивает наиболее предсказуемую структуру карточки.

Существует четыре типа карточек: summary (небольшая миниатюра рядом с заголовком и описанием), summary_large_image (главное изображение на всю ширину), app (установка мобильного приложения) и player (встроенное видео или аудио). Для содержательных статей выбирайте summary_large_image.

Если они указаны, эти теги заменяют og:title и og:description в Twitter. Используйте их, когда хотите задать для аудитории Twitter заголовок, отличный от предназначенного для остальных пользователей OpenGraph; в противном случае позвольте Twitter использовать значения OG.

Для карточек summary используйте квадратное изображение с соотношением 1:1 и размером не менее 144x144. Для summary_large_image — изображение с соотношением 2:1, желательно размером 1200x600 или больше. Twitter отклоняет изображения размером более 5 MB. Как и для og:image, используйте абсолютный URL: относительные пути не работают.

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

twitter:site — это имя пользователя Twitter вашего сайта (вместе с @). twitter:creator — имя пользователя отдельного автора. Заполнив эти поля, вы позволите Twitter показать «от @yoursite» и связать подпись автора с реальной учётной записью.

OpenGraph использует property="og:...", а Twitter — name="twitter:...". Различие имеет историческое происхождение (RDFa и HTML5). Оба варианта технически допустимы, но правильный атрибут для каждого протокола помогает избежать особых случаев при проверке строгими валидаторами.

twitter:card="app" позволяет рекламировать приложение для iOS/Android с помощью twitter:app:id:iphone, twitter:app:id:ipad, twitter:app:id:googleplay и глубинных ссылок twitter:app:url:*. Нажатие на карточку открывает App Store, Play Store или непосредственно приложение, если оно уже установлено.

twitter:card="player" встраивает проигрыватель видео или аудио прямо в публикацию. Требуются twitter:player (URL фрейма HTTPS), twitter:player:width и twitter:player:height. Twitter вручную одобряет карточки проигрывателя для предотвращения злоупотреблений — отправьте заявку через developer.twitter.com.

Twitter отключил общедоступный интерфейс Card Validator, но карточки по-прежнему отображаются в предварительном просмотре черновика публикации. Вставьте URL в закрытый черновик, чтобы до публикации самой публикации точно увидеть, какой тип карточки и какое изображение будут отображаться.

Всегда включайте и twitter:card, и полный набор OG-тегов. Большинство платформ, кроме Twitter, игнорируют теги twitter:*, а большинство современных клиентов Twitter используют OG как резервный вариант, поэтому их сочетание обеспечивает корректное превью везде при минимальном дублировании.

Если twitter:title отсутствует, но og:title указан, что появится на карточке Twitter?

Карточки Twitter (объявленные через name="twitter:card") обеспечивают предсказуемое превью страниц в X. Для редакционных материалов выбирайте summary_large_image, добавляйте twitter:image с абсолютным URL и twitter:image:alt, указывайте сайт и автора с помощью имён пользователей, а для тегов, которые вы не переопределяете, позволяйте использовать значения OG.