Twitter Card — тип структурированной HTML-разметки в <head> страницы, который управляет отображением ссылки при публикации в X (Twitter): задаёт заголовок, изображение и описание карточки вместо автоматически подобранного превью.
Twitterbot сканирует URL из поста, читает теги twitter-card и собирает карточку вместо стандартного превью.
Пользователь публикует ссылку в X и платформа отправляет Twitterbot к этому URL — бот читает мета-теги в <head> — X собирает карточку из полученных данных и показывает её при раскрытии поста. При первом шере данные кэшируются примерно на 7 дней.
Ребрендинг Twitter → X (2023) и смена домена на x.com (2024) синтаксис разметки не изменили. Префикс
twitter:остаётся действующим — менять ничего не нужно.
Twitterbot: почему разметка должна быть в статическом HTML
Twitterbot не выполняет JavaScript — он читает только статический HTML-ответ сервера в момент краулинга.
Это критично для SPA и React-сайтов. Если теги добавляются через JS после загрузки — карточка не появится никогда, сколько бы правильных twitter:-тегов ни было прописано. Решение: server-side rendering (SSR) или статическая генерация (SSG). Быстрая проверка того, что видит бот:
# Смотрим, какой HTML получает Twitterbot
curl -A "Twitterbot/1.0" https://example.com/page | grep "twitter:"
Если в ответе пусто — проблема в JS-рендеринге или robots.txt.
Fallback-цепочка: что показывает X, если тег не заполнен
X не оставляет поля пустыми — при отсутствии twitter:-тега платформа ищет аналог в Open Graph, затем в базовом HTML.
| Twitter Card тег | Fallback 1 | Fallback 2 | Если нет ничего |
|---|---|---|---|
twitter:title | og:title | <title> | Нет заголовка |
twitter:description | og:description | <meta name="description"> | Нет описания |
twitter:image | og:image | Случайное изображение со страницы | Нет изображения |
twitter:card | — | — | X не показывает карточку |
Twitter Card vs Open Graph: что нужно задать отдельно
Twitter Card и Open Graph — два разных протокола с частично совпадающим набором тегов. X читает OG как fallback, но не напрямую: при отсутствии twitter:-тегов платформа подставляет значения из og:, а не просто игнорирует их.
Если OG уже настроен — основная карточка появится даже без единого
twitter:-тега. Единственное исключение —twitter:card. Без него X не знает, какой тип карточки рендерить, и не показывает ничего. Это тег без fallback.
| Тег Twitter Card | Аналог в OG | Нужен явно? | Когда задавать отдельно |
|---|---|---|---|
twitter:card | Нет аналога | Всегда | Единственный обязательный тег |
twitter:title | og:title | Нет | Если хотите другой заголовок для X |
twitter:description | og:description | Нет | Если хотите другое описание для X |
twitter:image | og:image | Нет | Если хотите другое изображение для X |
twitter:site | Нет аналога | Рекомендуется | Всегда — OG этого не даёт |
twitter:creator | Нет аналога | По задаче | Для авторских материалов |
twitter:image:alt | og:image:alt | Нет | Если OG alt уже задан |
Минимальный сценарий при настроенном OG: добавить одну строку <meta name="twitter:card" content="summary_large_image" /> — и карточка появится. Остальные twitter:-теги нужны, только если хотите разные данные для X и других платформ.
Четыре типа Twitter Cards: когда что выбрать
X поддерживает четыре актуальных типа карточек. Photo Card и Gallery Card — они устарели и автоматически конвертируются в Summary Large Image. Если в разметке остались теги twitter:card со значением photo или gallery — X молча переключит их на summary_large_image. Это не ошибка, но лучше привести разметку в порядок.
| Тип карточки | Значение twitter:card | Визуал | Мин. размер | Рек. размер | Когда использовать |
|---|---|---|---|---|---|
| Summary Card | summary | Миниатюра рядом с текстом (1:1) | 144×144 px | 1024×1024 px | Статьи, справочники, текстовый контент |
| Summary with Large Image | summary_large_image | Широкое изображение над текстом (2:1) | 300×157 px | 1024×512 px | Медиа, лендинги, e-commerce, визуальный контент |
| App Card | app | Иконка + рейтинг + кнопка | — | — | Мобильные приложения (iOS + Android) |
| Player Card | player | Видео/аудио плеер | — | — | Видео, подкасты — требует одобрения X |
Алгоритм выбора типа карточки
Прежде чем выбирать — ответьте на три вопроса последовательно.
Это мобильное приложение в App Store или Google Play?
→ Да → app. X автоматически подтянет иконку, рейтинг и цену по ID из магазина.
Это видео или аудио с постоянным URL-потоком?
→ Да + есть вайтлист X → player. Без одобрения X карточка не появится, даже при правильной разметке.
У страницы есть сильное изображение (не логотип, не заглушка, не иконка)?
→ Да → summary_large_image. Large Image занимает всю ширину ленты — захватывает больше экранного пространства.
→ Нет → summary. Аккуратная квадратная миниатюра лучше, чем Large Image с размытым заполнителем.
Для большинства контентных сайтов — summary_large_image. Для текстовых форматов (документация, ЧаВо, новостные агрегаторы) — summary.
App Card и Player Card: специфика и ограничения
App Card проще в настройке: данные подтягиваются из iTunes или Google Play автоматически по ID через теги twitter:app:id:iphone и twitter:app:id:googleplay. Player Card — сложнее: требует HTTPS для iFrame, кодеки и размер проверяются вручную командой X, одобрение не гарантировано.
Теги Twitter Card: что означает каждый и какие лимиты реально работают
twitter:card — единственный обязательный тег. Официальная документация X устанавливает лимит заголовка в 70 символов, описания — в 200. На практике усечение начинается раньше: X обрезает twitter:title в районе 50–55 символов в зависимости от устройства и ширины карточки. Спецификация X Ads явно рекомендует не более 50 символов заголовка для гарантированного отображения без усечения.
| Тег | Обязательный | Официальный лимит | Безопасный лимит | Fallback при отсутствии |
|---|---|---|---|---|
twitter:card | Да | — | — | Нет карточки |
twitter:title | Рек. | 70 симв. | 50 симв. | og:title → <title> |
twitter:description | Нет | 200 симв. | до 200 симв. | og:description → <meta description> |
twitter:image | Нет | 5 МБ | 5 МБ | og:image → случайное фото |
twitter:image:alt | Нет | 420 симв. | 420 симв. | Нет alt-текста |
twitter:site | Нет | — | — | Нет атрибуции сайта |
twitter:creator | Нет | — | — | Нет атрибуции автора |
Требования к изображению:
- Форматы: JPG, PNG, WEBP, GIF (только первый кадр анимации). SVG — не поддерживается
- Максимальный размер файла: 5 МБ
- URL: только абсолютный (полный путь, включая
https://) - Протокол: только HTTPS — HTTP-изображение не загрузится
- GIF: X отображает исключительно первый кадр, анимация игнорируется
twitter:image:alt— тег доступности для пользователей с ограниченными возможностями. Лимит — 420 символов. Рекомендую добавлять всегда: хорошая практика и дополнительный сигнал качества разметки.
Устаревшие теги Twitter Card: что удалить при аудите
При аудите старых сайтов регулярно встречаются теги, которые больше не работают или игнорируются X. Оставлять их в <head> — лишний шум, ничего не ломает, но и смысла ноль.
| Устаревший тег / значение | Статус | Что делать |
|---|---|---|
twitter:card = photo | Deprecated → конвертируется в summary_large_image | Заменить на актуальное значение |
twitter:card = gallery | Deprecated → конвертируется в summary_large_image | Заменить на актуальное значение |
twitter:domain | Игнорируется X | Удалить |
twitter:label1 / twitter:data1 | Работают только в контексте Slack — не отображаются в X | Удалить, если не нужен Slack-сниппет |
twitter:label2 / twitter:data2 | Аналогично | Удалить |
twitter:url | Игнорируется X; платформа использует og:url | Удалить |
Если на сайте стоит SEO-плагин 2018–2020 годов без обновлений — проверьте через curl -A "Twitterbot/1.0" или валидатор: есть шанс найти весь этот набор в <head>.
Как добавить Twitter Card на сайт: код и инструкция для WordPress
Минимальная Twitter Card требует одного тега. Расширенный шаблон объединяет Open Graph и Twitter Cards, не дублируя поля без нужды.
Шаблон 1 — Минимальный (при уже настроенном Open Graph):
<head>
<!-- Достаточно одного тега, если OG уже настроен -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ваш_аккаунт" />
<meta name="twitter:image:alt" content="Краткое описание изображения" />
</head>
Шаблон 2 — Полный (без настроенного Open Graph):
<head>
<!-- Twitter Card — ставим первым -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Заголовок страницы до 50 симв." />
<meta name="twitter:description" content="Описание до 200 символов." />
<meta name="twitter:image" content="https://example.com/images/cover.jpg" />
<meta name="twitter:image:alt" content="Краткое описание изображения" />
<meta name="twitter:site" content="@ваш_аккаунт" />
<meta name="twitter:creator" content="@аккаунт_автора" />
<!-- Open Graph — для остальных платформ -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Заголовок страницы" />
<meta property="og:description" content="Описание страницы." />
<meta property="og:image" content="https://example.com/images/cover.jpg" />
<meta property="og:url" content="https://example.com/page/" />
<meta property="og:site_name" content="Название сайта" />
</head>
WordPress: настройка через Yoast SEO
Yoast SEO включает X Card разметку по умолчанию. Проверить и активировать при необходимости:
- Перейдите: Yoast SEO → Settings → Site features → Social sharing
- Убедитесь, что переключатель X (Twitter) активен
- Сохраните изменения
- Для настройки аккаунта сайта: Yoast SEO → Settings → Site representation → вкладка Socials → поле X username
- Для настройки карточки на конкретной странице: откройте пост → в правой панели Yoast SEO → раздел Social media appearance → вкладка X
Важный момент: Yoast SEO устанавливает тип карточки
summary_large_imageпо умолчанию для всех страниц с изображением. Возможности переключить тип наsummaryчерез интерфейс нет — это поведение зафиксировано в плагине. Если нуженsummaryна конкретной странице — добавьте тег вручную через дополнительный php-фильтр или напрямую в<head>.
Ручное добавление в PHP без CMS:
<?php
// В файле header.php — динамические теги Twitter Card
$title = get_the_title();
$description = get_the_excerpt();
$image = get_post_thumbnail_url(null, 'large');
?>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="<?php echo esc_attr(mb_substr($title, 0, 50)); ?>" />
<meta name="twitter:description" content="<?php echo esc_attr(mb_substr($description, 0, 200)); ?>" />
<meta name="twitter:image" content="<?php echo esc_url($image); ?>" />
<meta name="twitter:image:alt" content="<?php echo esc_attr($title); ?>" />
<meta name="twitter:site" content="@ваш_аккаунт" />
mb_substr($title, 0, 50) обрезает заголовок по безопасному лимиту X. Лучше контролировать это программно, чем надеяться, что редактор не выйдет за 50 символов.
Как проверить Twitter Card и обновить кэш X
Официальный Card Validator Twitter/X упразднён в 2022 году — предпросмотр карточки теперь доступен только через сторонние инструменты или Tweet Composer.
X кэширует данные карточки около 7 дней — это официальная цифра из документации X Developer Platform. Текстовые данные (title, description) обновляются при новом шере. Изображение кэшируется отдельно и агрессивнее — официального способа принудительного сброса нет.
| Инструмент | Авторизация | Что показывает |
|---|---|---|
| opentweet.io | Не нужна | Превью + анализ тегов |
| socialrails.com | Не нужна | Превью + диагностика |
| socialpreviewhub.com | Не нужна | Превью + кроп изображения |
| Tweet Composer (x.com) | Аккаунт X | Реальный предпросмотр |
Workaround для обновления изображения — query string к URL:
<!-- Изображение не обновилось — меняем URL через параметр -->
<!-- Было: -->
<meta name="twitter:image" content="https://example.com/images/cover.jpg" />
<!-- Стало (X воспринимает как новый URL): -->
<meta name="twitter:image" content="https://example.com/images/cover.jpg?v=2" />
X кэширует изображения по URL. Альтернативный вариант — загрузить изображение под новым именем файла. Оба метода работают.
Почему Twitter Card не появляется: чеклист диагностики
В 95% случаев Twitter Card не появляется по одной из семи причин — большинство диагностируются за две минуты.
1. twitter:card не прописан — Симптом: карточки нет, только ссылка — Решение: добавьте <meta name="twitter:card" content="summary_large_image" />
2. Twitterbot заблокирован в robots.txt — Симптом: карточка не появляется, хотя теги правильные — Решение: проверьте robots.txt — Twitterbot должен иметь доступ к странице и к изображению
# robots.txt — разрешить Twitterbot явно
User-agent: Twitterbot
Disallow:
3. Теги генерируются через JavaScript (SPA/React без SSR) — Симптом: Twitterbot не видит теги, хотя в браузере они есть — Решение: SSR или статическая генерация; проверяйте через curl -A "Twitterbot/1.0" URL
4. Изображение по HTTP, а не HTTPS — Симптом: карточка появляется, но без изображения — Решение: URL изображения — только https://
5. Изображение больше 5 МБ или в неподдерживаемом формате (SVG, BMP, TIFF) — Симптом: карточка без изображения — Решение: конвертируйте в JPG/PNG/WEBP, уменьшите вес до < 5 МБ
6. URL изображения относительный, а не абсолютный — Симптом: карточка без изображения — Решение: пишите полный URL — https://example.com/images/cover.jpg, не /images/cover.jpg
7. Сервер возвращает код не 200 или страница > 2 МБ — Симптом: карточка не появляется вообще — Решение: убедитесь, что страница отдаёт 200 OK; уменьшите HTML, если он > 2 МБ
Пункты 3 и 6 — самые частые у клиентов с React-сайтами без SSR и самописными CMS.