Twitter Card

Как работает

Twitter Card описывает превью ссылки специальными мета-тегами в <head>. Тег twitter:card задаёт тип карточки: summary — компактная с маленькой картинкой, summary_large_image — с крупным изображением, player — со встроенным медиаплеером. Остальные теги задают содержимое: twitter:title, twitter:description и twitter:image.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Как ускорить загрузку сайта">
<meta name="twitter:description" content="Практическое руководство по скорости">
<meta name="twitter:image" content="https://example.com/preview.jpg">

Ключевая особенность — взаимодействие с Open Graph. Если тегов twitter:* нет, платформа подставляет данные из соответствующих тегов og:title, og:description и og:image. Поэтому при настроенном Open Graph отдельные Twitter-теги нужны в основном тогда, когда для X требуется другой заголовок, описание или картинка — например, более короткий текст или изображение под другое соотношение сторон. Дополнительно указывают twitter:site и twitter:creator с аккаунтами издания и автора, чтобы платформа связала карточку с профилями.

Почему важно для SEO

Прямым фактором ранжирования Twitter Card не является: поисковые системы её не учитывают при оценке страницы. Но корректная карточка влияет на поведение ссылки в социальных сетях — аккуратное превью с заголовком и изображением получает больше переходов, чем «голая» ссылка без оформления. Это работает на трафик из соцсетей и на узнаваемость материала, а часть этого трафика возвращается в поиск брендовыми запросами. В связке с Open Graph карточка обеспечивает предсказуемый вид ссылки на разных платформах, что важно для контента, который активно распространяется репостами. Настраивать её имеет смысл для ключевых страниц — статей, товаров, посадочных, — которыми пользователи делятся чаще всего. Есть нюанс с кэшированием: платформы запоминают превью по URL, поэтому после смены заголовка или картинки старая карточка показывается, пока кэш не обновится. Единый комплект мета-тегов для соцсетей вместе с осмысленным описанием из meta description формирует предсказуемый вид ссылки в поиске и в лентах, что удобно для планирования публикаций.

Частые ошибки

• twitter:image ведёт на слишком маленькое или недоступное изображение, и превью показывается без картинки.
• Заданы Twitter-теги, но не настроен Open Graph, из-за чего на других платформах ссылка выглядит пустой.
• Описание и заголовок в карточке расходятся с содержимым страницы.
• Указан неверный тип twitter:card, и платформа отображает не тот формат превью.
• Абсолютный URL картинки заменён относительным путём, который платформа не может загрузить.

Как проверить

Раньше превью проверяли в Twitter Card Validator; после ребрендинга в X он недоступен, поэтому вид карточки удобнее сверять непосредственно при публикации ссылки или через сторонние сервисы предпросмотра Open Graph и Twitter-тегов. В DevTools стоит убедиться, что теги twitter:* и резервные og:* присутствуют в <head> и содержат абсолютные URL с протоколом. Аудит SEO Crawler отмечает страницы без Open Graph и мета-тегов для соцсетей — это помогает найти материалы, которые при репосте показываются без нормального превью, и закрыть пробел до продвижения в соцсетях.

Вывод

Twitter Card задаёт вид ссылки при публикации в X и опирается на Open Graph как на резерв. На ранжирование она не влияет, но аккуратное превью повышает переходы из соцсетей, поэтому её настраивают вместе с Open Graph для ключевых страниц.