Softonic

Валидатор Twitter Card

Когда кто-то делится вашей ссылкой в X (Twitter), платформа считывает мета-теги twitter: со страницы, чтобы собрать карточку предпросмотра: её макет, заголовок, описание, изображение и указание источника. Если этих тегов нет, ссылка публикуется как обычный URL, без карточки. Вставьте HTML своей страницы ниже, и этот валидатор проверит, что три обязательных тега, twitter:card, twitter:title и twitter:description, присутствуют, показав значение, считанное из каждого, чтобы вы могли исправить сломанный предпросмотр до публикации.

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

  1. 1

    Вставьте HTML своей страницы

    Можно вставить только раздел `<head>` или весь документ. Валидатор проверяет только теги `<meta>`, поэтому любая другая разметка игнорируется.

  2. 2

    Он ищет три обязательных тега

    `twitter:card`, `twitter:title` и `twitter:description`, минимум для любого типа карточки. Другие теги, например `twitter:image`, здесь не проверяются.

  3. 3

    Посмотрите, что найдено

    Каждый найденный тег выводится со значением, считанным из его атрибута `content`, чтобы вы могли быстро проверить текст.

  4. 4

    Исправьте то, чего не хватает

    Любой из трёх отсутствующих тегов помечается как недостающий. Добавьте его в свой `<head>` и вставьте HTML снова, чтобы проверить ещё раз.

Четыре типа карточек X (Twitter)

Макет задаётся значением twitter:card. Этот валидатор считывает значение, которое вы указали; X поддерживает четыре типа:

Тип карточки Значение twitter:card Типичное применение
Сводка summary Статьи и обычные страницы с контентом
Сводка с большим изображением summary_large_image Посты в блоге с крупным изображением
Плеер player Встроенное аудио или видео
Приложение app Ссылки на установку приложения с данными магазина

Обязательные и рекомендуемые теги

Этот инструмент проверяет только первую группу, три тега, которые нужны X для любой карточки.

Обязательные (проверяются здесь):

  • twitter:card, какой макет использовать
  • twitter:title, заголовок (X показывает примерно первые 70 символов)
  • twitter:description, описание (X показывает примерно первые 200 символов)

Рекомендуемые (здесь не проверяются, но их стоит добавить):

  • twitter:image, абсолютный URL https:// на файл PNG, JPG или GIF; не менее 300 x 157 px для карточки-сводки и 800 x 418 px для summary_large_image
  • twitter:site, @handle вашего бренда
  • twitter:creator, @handle автора
  • twitter:image:alt, альтернативный текст для доступности

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

  • Только теги Open Graph. X использует запасной вариант og:title, og:description и og:image, поэтому ссылка всё равно разворачивается, но без twitter:card по умолчанию получается маленькая сводка. Указывайте оба набора, когда можете.
  • Слишком маленькое изображение. Меньше 300 x 157 px карточка может свернуться до одного текста.
  • Относительный URL изображения. twitter:image должен быть абсолютным (https://...); относительный путь игнорируется.
  • property= вместо name=. X, как и этот валидатор, считывает теги Twitter из name="twitter:...". Запись property="twitter:..." работает для Open Graph, но не для этих тегов.
  • Слишком длинное описание. После примерно 200 символов X обрезает его, обычно посреди слова.

Как увидеть настоящую карточку

X закрыл свой официальный Card Validator (cards-dev.twitter.com/validator) в 2023 году, поэтому официальной страницы с живым предпросмотром больше нет. Этот инструмент подтверждает, что обязательные теги присутствуют и читаются; чтобы увидеть настоящую карточку, поделитесь ссылкой в черновике поста или в личном сообщении самому себе, либо воспользуйтесь сторонним сервисом предпросмотра ссылок. Если после исправления тегов X продолжает показывать старое изображение, добавьте к URL изображения строку запроса, например ?v=2, чтобы обойти кэш.

Часто задаваемые вопросы

Нет. Он считывает вставленный HTML и подтверждает, что три обязательных тега twitter: присутствуют, показывая значение каждого. Он не рисует карточку и не загружает вашу страницу онлайн. X закрыл свой Card Validator в 2023 году, поэтому надёжный способ увидеть настоящую карточку, поделиться ссылкой в черновике поста или в личном сообщении самому себе.

X использует запасной вариант og:title, og:description и og:image, поэтому ссылка всё равно разворачивается, но без twitter:card по умолчанию получается маленькая сводка. Для карточки с большим изображением нужно явно задать twitter:card со значением summary_large_image. Учтите, что этот валидатор проверяет только теги twitter:, а не ваши теги og:.

Он ищет name="twitter:..." с атрибутом content, записанным после имени, в одинарных или двойных кавычках. Если ваш тег использует property="twitter:..." вместо name= или ставит content перед name, шаблон не совпадёт, даже если HTML корректен. Переставьте в порядок name="..." content="..." и проверьте снова.

Этот валидатор распознаёт имя независимо от регистра, поэтому twitter:Card здесь тоже определяется. Тем не менее держите их строчными (twitter:card), потому что именно такую форму документирует и ожидает X.

Если коротко, да. Проверка выполняется на нашем сервере, поэтому вставленный HTML отправляется туда, анализируется и удаляется. Мы сохраняем только анонимную отметку об использовании инструмента, но никогда вашу разметку, и это не офлайн-инструмент, работающий в браузере.

Сопутствующие инструменты

Генератор фейковых текстовых сообщений

Наберите переписку с двух сторон, посмотрите пузыри в предпросмотре и скачайте макет экрана телефона в PNG. Отправленное зеленым, входящее серым.

Генератор текста эмодзи

Введите короткую фразу, выберите один из пяти стилей, и генератор поставит эмодзи блёсток, огня, сердца, звезды или праздника между каждым словом: для биографий, подписей и постов.

Генератор фальшивых твитов

Создайте реалистичные фальшивые посты в Twitter или X с пользовательским ником, текстом, ответами, репостами, лайками, закладками и цветом значка подтверждения.

Генератор тегов YouTube

Создавайте релевантные Unicode-теги в официальном общем лимите 500 символов.

Генератор меток времени Discord

Создавайте коды меток времени Discord, которые подстраиваются под часовой пояс каждого читателя. Выберите дату, время и стиль, чтобы получить короткие, длинные и относительные теги <t:UNIX>.

Генератор скриншотов для iMessage

Создайте реалистичные скриншоты разговоров в iMessage с синими и серыми пузырями, временными метками, именами контактов и полосой состояния iOS.

Инструмент доступен на других языках