Валидатор карточек Twitter
В X больше нет собственного валидатора, поэтому проверьте свою карточку здесь. Вставьте HTML-код страницы, чтобы протестировать все теги twitter:, посмотреть превью карточки в X и скопировать исправленные теги.
1<!-- X (Twitter) card -->2<meta name="twitter:card" content="summary_large_image" />3<meta name="twitter:title" content="Framer: Free website builder and AI design agent" />4<meta name="twitter:description" content="The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in." />5<meta name="twitter:image" content="https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png" />6<meta name="twitter:image:alt" content="Describe what the image shows" />7<meta name="twitter:site" content="@yourbrand" />Как исправить неполадки с картой X
X сначала считывает теги twitter:, а затем, если они не найдены, обращается к тегам Open Graph. В большинстве случаев некорректное отображение карточек сводится к одной из этих четырех причин.
Установите twitter:card в значение summary_large_image
Без него X может использовать маленькую карточку с квадратной миниатюрой. summary_large_image показывает полноразмерное изображение формата 2:1, которое привлекает гораздо больше внимания в ленте.
Используйте абсолютный URL-адрес изображения по протоколу HTTPS
Параметр twitter:image (или og:image) должен быть полным URL-адресом, начинающимся с https://, быть общедоступным и иметь размер менее 5 МБ. Относительные пути и изображения, требующие авторизации, загружаться не будут.
Добавить twitter:image:alt
Альтернативный текст описывает изображение для пользователей программ экранного доступа (до 420 символов). Это необязательно, но X его считывает, и он занимает одну строку.
Получите X, чтобы показать новую карту
X кэширует карточки примерно на неделю и не имеет кнопки обновления. Добавьте к ссылке строку запроса, например ?v=2, чтобы получить свежую карточку, а затем проверьте остальные платформы с помощью инструмента проверки метатегов. Информацию для LinkedIn, Facebook, Slack и других платформ см. в руководстве по обновлению.
Часто задаваемые вопросы о валидаторе Twitter Card
Краткие ответы о карточках X, тегах twitter: и старом валидаторе.
Что случилось с Twitter Card Validator?
В 2022 году X убрал предпросмотр из своего инструмента Card Validator, и теперь эта страница перенаправляет на экран входа. Этот инструмент заменяет его: он считывает те же теги, что и X, и показывает карточку, которую они формируют.
Какие теги нужны для карточки X?
Тег twitter:card является обязательным. Затем X считывает twitter:title, twitter:description и twitter:image, а если они отсутствуют, использует og:title, og:description и og:image. Теги twitter:site и twitter:image:alt являются необязательными.
Почему в карточке X не отображается изображение?
Обычно URL изображения является относительным, заблокирован в robots.txt, скрыт за авторизацией или слишком велик, либо указан тип карточки summary вместо summary_large_image. Кроме того, X кэширует карточки, поэтому протестируйте ссылку, добавив в конец ?v=2.
Зачем вставлять HTML вместо ссылки?
Вставка HTML позволяет валидатору прочитать каждый тег twitter: в точности так, как он написан. Проверка по URL показывает карточку, которую X создает на основе тегов Open Graph страницы — именно к ним обращается X, если теги twitter: отсутствуют.
Этот валидатор Twitter Cards бесплатный?
Да. Он работает прямо в браузере, не требует входа в систему, а вставленный вами HTML-код никогда не покидает ваше устройство.