Генератор Twitter (X) Card
Создайте мета-теги twitter:card для превью ссылок в X (Twitter): summary или summary_large_image, аккаунты site и creator, заголовок, описание, изображение и alt.
Не меньше 300×157 px, соотношение 2:1 (например, 1200×600).
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@example"> <meta name="twitter:title" content="My Awesome Article"> <meta name="twitter:description" content="A short summary shown in the card."> <meta name="twitter:image" content="https://example.com/card.png"> <meta name="twitter:image:alt" content="Article cover">
Что такое Генератор Twitter Card?
Генератор пишет мета-теги twitter:, которые X (бывший Twitter) использует для отображения карточек ссылок: тип карточки (summary или summary_large_image), аккаунты @site и @creator, заголовок, описание, изображение и alt-текст изображения.
Как пользоваться Генератор Twitter Card
- Выберите тип карточки: summary (маленькое квадратное изображение) или summary_large_image (широкое изображение).
- Введите аккаунты site и creator; @ добавляется, если вы его не указали.
- Заполните заголовок, описание, URL изображения и alt-текст.
- Скопируйте теги в <head> страницы.
Пример
summary, @example, title Hello
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@example"> <meta name="twitter:title" content="Hello"> <meta name="twitter:description" content="A short summary shown in the card."> <meta name="twitter:image" content="https://example.com/card.png"> <meta name="twitter:image:alt" content="Article cover">
Когда использовать Генератор Twitter Card
Используйте, когда хотите, чтобы X показывал карточку с большим изображением или указывал аккаунт автора. Если на странице уже есть теги Open Graph, вам нужен только twitter:card плюс значения, которые должны отличаться в X.
Как работает Генератор Twitter Card
Инструмент всегда выводит twitter:card, а остальные теги добавляет, только если они заполнены, с HTML-экранированием. Аккаунты нормализуются так, чтобы начинаться с @. image:alt добавляется только вместе с изображением. Для всего незаданного X возвращается к тегам Open Graph (og:title, og:description, og:image), поэтому набор twitter: можно держать минимальным.
Распространенные Случаи Использования
- Превратить обычную ссылку в карточку с большим изображением в X.
- Указать автора статьи по его @аккаунту.
- Использовать в X другое изображение, чем в Facebook.
- Добавить alt-текст к изображениям карточек для доступности.
Часто Задаваемые Вопросы
Нужны ли теги Twitter, если есть теги Open Graph?
Для выбора типа карточки нужен только twitter:card; иначе X повторно использует og:title, og:description и og:image.
Какой размер изображения использовать?
summary_large_image: не менее 300×157, лучше 1200×600 (2:1). summary: не менее 144×144, квадрат.
Работает ли это после переименования в X?
Да. X по-прежнему читает мета-теги twitter:.