Предпросмотр карточки Twitter / X
Вставьте свои теги или введите значения, и посмотрите, как отрисовываются оба типа карточек, с цепочкой резервных вариантов, правилами изображений и указанием точек обрезки.
summary_large_image
summary
Оба макета отображаются здесь, чтобы вы могли сравнить их. Карточка summary имеет реальную геометрию — квадратную миниатюру рядом с текстом, обрезанную так, как X её обрезает, поэтому изображение с важными элементами у краёв теряется. Макет large-image более свободный: X несколько раз менял способ его отображения, поэтому проверьте обрезку в реальном посте, прежде чем полагаться на неё.
Ничего, что вы вводите здесь, не загружается, не сохраняется и не отправляется куда-либо. Всё работает в вашем браузере.
Цепочка резервных вариантов, которая и есть весь трюк
X не требует полного набора twitter: тегов. Для каждого поля он использует twitter: версию, если она есть, иначе переходит к og: версии, если её нет, и ничего не показывает, когда обе отсутствуют. Поэтому страница с корректными Open Graph тегами уже разворачивается на X, а добавление дублирующего набора twitter: тегов, говорящих точно то же самое, не даёт вам преимуществ, кроме двух мест, где можно забыть обновить их.
twitter:cardявляется исключением. У него нет эквивалента Open Graph, поэтому к нему ничего не откатывается. Уберите его, и X выберет макет за вас, который обычно не тот, который вы хотели для страницы с хорошим изображением.- Заголовок откатывается к
og:title, затем к<title>. Вот почему карточка иногда отображает ваш заголовок с суффиксом бренда в конце, который вы тщательно исключали изog:title. - Изображение откатывается к
og:image. Установитьtwitter:imageтолько когда вы действительно хотите другое кадрирование или другое изображение в X. - Отсутствие чего‑либо означает отсутствие карточки. Пост отображает простой URL. На платформе, где посты соревнуются по визуальному весу, это разница между ссылкой, которая распространяется, и той, которая не распространяется.
Правила изображений и те, которые действительно влияют
Карточка с большим изображением требует примерно соотношения 2:1 — безопасный вариант — 1200 × 628, с минимумом 300 × 157. Карточка‑резюме требует квадрат, минимум 144 × 144. Если соотношение указано неверно, ошибок не будет: X обрезает изображение, обычно через центр любого текста, который вы разместили на нём. Если размеры ниже минимума, карточка тихо переходит на более простой макет или удаляет изображение.
Еще два момента, отнимающих у людей по полдня каждый: URL изображения должен быть абсолютным и общедоступным — URL тестовой среды за базовой аутентификацией возвращает ничего — и он не должен быть заблокирован для Twitterbot в robots.txt, что легко сделать случайно, запретив /assets/ каталог.
Кеширование
X кеширует карточку примерно неделю после первого сканирования. Исправление тега не меняет уже распространённую ссылку, и повторная публикация того же URL часто покажет старую карточку. Практический способ — добавить теги непосредственно перед первой публикацией, а не после — для чего предназначена эта страница.
Где заканчивается это и начинаются другие инструменты
Этот Предпросмотр Open Graph читает полный блок head и показывает версии для Facebook и LinkedIn. Эта генератор meta‑тегов записывает весь head, включая эти теги. Эта страница — та, что остаётся в X: оба макета рядом, цепочка откатов разрешена, а расчёты изображений проверены по заданным вами значениям.
Вопросы, которые задают люди
Нужны ли мне всё ещё twitter‑теги, теперь когда X читает Open Graph?
Только twitter:card, в большинстве случаев. Всё остальное переходит к эквиваленту Open Graph. Добавьте twitter:title, twitter:description или twitter:image когда вы хотите, чтобы X показывал что‑то отличное от всех остальных платформ, и опускаете их, когда это не нужно.
Почему в моей карточке нет изображения?
В порядке убывания частоты возникновения причины: URL изображения относительный, а не абсолютный; изображение меньше минимального размера для типа карточки; файл находится за аутентификацией или на тестовом сервере; путь запрещён для Twitterbot в robots.txt; либо карточка была собрана и закеширована до того, как вы добавили тег.
В чём разница между twitter:site и twitter:creator?
twitter:site — это аккаунт, владеющий сайтом, то есть издатель. twitter:creator — это человек, написавший материал. Ни то, ни другое не меняет внешний вид карточки; они добавляют атрибуцию к ней, и twitter:site — то, которое следует задать, если вы указываете только одно.
Какой максимальный размер заголовка и описания?
Документированные ограничения карточки: 70 символов для заголовка и 200 для описания, подпись (alt text) ограничена 420 символами. Это точки обрезки текста, а не цели для заполнения — в ленте видимое пространство меньше лимита, поэтому первые полдюжины слов привлекают клики.
Этот сервис запрашивает мой URL?
Нет. Он читает теги, которые вы вставляете, или значения, которые вводите, и ничего больше — запросы из вашего браузера не отправляются. Поэтому он запрашивает у вас размеры изображения, а не измеряет их.
Сопутствующие инструменты
Карточка получает клик. Ссылка получает рейтинг.
Карточки «Поделиться» определяют, что произойдёт со ссылкой после её публикации. А вот то, публикует ли её кто‑то вообще, — более сложная задача.