Навык агента по созданию изображений для Twitter Card

Генератор изображений для Twitter Card

Генерируйте изображения, оптимизированные для предпросмотра ссылок в X (Twitter) — тех карточек, которые появляются в ленте, когда кто-то делится ссылкой. Twitter Cards имеют уникальные размеры изображений и особенности отображения, которые отличаются от стандартных Open Graph. Этот навык охватывает полный процесс генерации, адаптированный для соотношения сторон 2:1 и специфических особенностей платформы.

Все шесть подходов к генерации и все шесть визуальных стилей из og-image-generator применимы здесь. Единственными отличиями являются: выходные размеры (1200x675 вместо 1200x630), адаптации дизайна под X, безопасное зонирование для ленты и поддержка карточек player.

Когда использовать

• Пользователю нужны изображения 1200×675px (2:1) для предпросмотра ссылок X/Twitter, summary_large_image или постеров для карточек типа player
• Пользователь упоминает twitter:image, Twitter Card, изображение для предпросмотра X, предпросмотр твита или дизайн карточки в ленте
• Пользователю нужна верстка, безопасная для темного режима, зоны контента в верхних 60% или отступы 20px по краям для скругленных углов Twitter
• Пользователь уже использует og-image-generator и хочет получить адаптированный под Twitter вариант тех же стилей и процесса

Когда НЕ использовать

• Стандартные изображения Open Graph (1200×630, 1.91:1) для Facebook, LinkedIn, Slack и т.д. — используйте og-image-generator
• Только установка HTML-метатегов (без создания файла изображения) — используйте twitter-cards из marketing-skills
• Вывод в SVG — Twitter не поддерживает SVG для изображений карточек; используйте PNG или JPG
• Визуальный редактор без кода или размещенный API — используйте Oginify вместо запуска агентного процесса

При вызове: При первом использовании начните с 1–2 предложений о том, что охватывает этот навык и почему это важно, затем предоставьте основной вывод. При последующем использовании или когда пользователь просит пропустить, сразу переходите к основному выводу.

1. Как Twitter потребляет изображения

Twitter читает изображения в следующем порядке:

1. twitter:image — если явно задан, используется напрямую
2. og:image — откатывается до изображения OG, если теги Twitter Card отсутствуют
3. Нет изображения — обычный текстовый предпросмотр ссылки

Ключевой момент: Facebook и LinkedIn НЕ читают twitter:image. Twitter — единственная платформа, которая читает теги Twitter Card. Это означает, что вам нужны ОБА пути к изображениям в ваших метаданных, хотя сам процесс рендеринга можно разделить.

2. Спецификации изображений Twitter

Тип карточки определяет отображение изображения:

Для большинства случаев используйте summary_large_image с размером 1200x675px.

3. Шесть подходов к генерации (адаптированные под Twitter)

Все шесть подходов из og-image-generator §1 работают для изображений Twitter. Единственное отличие — выходные размеры. В этом разделе рассматриваются адаптации под Twitter — см. og-image-generator §1 для полной документации процесса рендеринга.

3.1 Генерация изображений с помощью ИИ (Основной #1)

Та же стратегия из трех частей в промпте, что и для OG, но с учетом специфики Twitter:

Часть 1 — Визуальное описание: фон, композиция, настроение
Часть 2 — Спецификация текста: ТОЧНЫЙ текст, в кавычках, с подсказками по размеру
Часть 3 — Ограничения Twitter: \"1200x675px, соотношение сторон 2:1, ключевой текст в
         верхних 60%, темный фон предпочтителен для темного режима\"

Гибридный подход (рекомендуется): ИИ генерирует фон/атмосферу; Satori накладывает текст. Критично для китайского текста, с которым модели ИИ все еще испытывают трудности — и использование темного режима ~40% пользователей Twitter делает точность текста еще более заметной.

См. og-image-generator §1.1 для полной таблицы сравнения инструментов ИИ (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney).

3.2 Агентно-нативный процесс с учетом контента (Основной #2)

Тот же 6-шаговый процесс, что и в OG (§1.2): Прочитать контент → Подобрать стиль → Извлечь визуальные элементы → Выбрать генерацию → Сгенерировать → Проверить. На каждом шаге добавляются специфичные для Twitter элементы:

Шаг 2 (Подобрать стиль) — Учет темного режима Twitter: предпочтительны стили с темным фоном (Terminal/CLI, Midnight Ink Magazine, темный режим Brutalist) или стили с темными вариантами для X.

Шаг 3 (Извлечь визуальные элементы) — Обрезка ленты Twitter до ~1:1 на мобильных устройствах означает, что самый важный визуальный элемент должен работать внутри квадрата. Горизонтальная лента данных, которая хорошо выглядит при 1200x675, может быть невидима в квадратной обрезке. Извлеките по крайней мере один элемент, который хорошо читается при 1:1.

Шаг 4 (Выбрать генерацию) — То же дерево решений. Для генерации ИИ добавьте: «Будет ли текст читаем при ширине рендера Twitter на мобильных ~260px?»

Шаг 6 (Проверить) — Выполните как проверки OG, так и специфичные для Twitter (§8).

3.3 Satori + resvg (На основе кода)

Тот же процесс, что и в OG. Измените высоту с 630 на 675. См. og-image-generator §1.3 для полной реализации.

// Общая конечная точка обслуживает и OG, и Twitter:
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  const platform = searchParams.get('platform') ?? 'og'; // 'og' | 'twitter'

  const width = 1200;
  const height = platform === 'twitter' ? 675 : 630;

  return new ImageResponse(
    <OgTemplate title={title} height={height} />,
    { width, height },
  );
}

Затем в метаданных страницы:

const ogUrl = `/og?title=${encodeURIComponent(title)}`;
const twitterUrl = `/og?title=${encodeURIComponent(title)}&platform=twitter`;

export const metadata: Metadata = {
  openGraph: {
    images: [{ url: ogUrl, width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    images: [twitterUrl],  // Специфичное для Twitter 1200x675
  },
};

3.4 Puppeteer, управляемые сервисы, конфигурация JSON

То же, что и в OG — установите viewport/высоту 675 вместо 630. См. og-image-generator §1.4–1.6. Для системы приоритетов страниц v3 (S/A/B/C) и выбора процесса см. content-strategy.md и pipeline-guide.md.

4. Особенности дизайна для X

Twitter отображает изображения иначе, чем Facebook/LinkedIn. Разрабатывайте дизайн с учетом следующего:

Темный режим (~40% пользователей): Изображения отображаются в ленте, в окружении твитов. Темные фоны выглядят естественно; светлые фоны выделяются, но могут выглядеть резко в темном режиме. Каждый шаблон должен иметь темный вариант или по умолчанию быть дружественным к темному режиму. Из 6 стилей: Terminal/CLI, Midnight Ink Magazine и Brutalist (черный фон) естественно подходят для темного режима. Swiss Minimal и Newspaper должны поставляться с альтернативой для темного режима.

Обрезка в ленте (мобильные устройства): На мобильных устройствах изображения summary_large_image обрезаются до ~1:1 в ленте, пока твит не развернут. Полное изображение 2:1 видно только при нажатии. Помещайте наиболее важный контент (заголовок, основной визуальный элемент) в верхние 60% изображения — центральный квадрат, который выживает после обрезки. Никогда не размещайте критический текст в нижних 20%.

Читаемость текста при малых размерах: Изображения в ленте отображаются шириной ~260px на мобильных устройствах. Протестируйте ваш шаблон в масштабе 1/4 (~300px шириной), чтобы убедиться, что текст остается читаемым. Это более строгое требование, чем для OG с шириной ~500px в десктопной ленте.

Маска по краям: Twitter применяет небольшую маску скругленных углов к изображениям карточек. Логотипы и критически важные элементы, размещенные ближе 20px к любому краю, рискуют быть частично обрезанными.

Рекомендуемые адаптации шаблонов для Twitter (по стилям):

5. Постеры для карточек типа player

Для видео/аудио контента тип карточки player требует изображения постера:

<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://example.com/player.html">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="480">
<meta name="twitter:image" content="https://example.com/poster.jpg">

Изображение постера отображается до того, как пользователь нажмет «воспроизвести». Создайте его как привлекательную миниатюру — включите наложение кнопки воспроизведения (треугольник в круге по центру), название видео и кадр из контента. Применяется та же рекомендация по соотношению сторон 2:1. Кнопка воспроизведения должна быть самым большим элементом в центральной квадратной зоне.

Для постеров, созданных ИИ: промпт должен быть «миниатюра видео с кнопкой воспроизведения по центру, текст заголовка в верхней трети, темный фон, 1200x675px.»

6. Система стилей (общая с OG — 16 стилей)

Изображения для Twitter используют те же 16 визуальных стилей из og-image-generator §3 и references/style-system-v3.md. Все шаблоны работают для Twitter — просто измените высоту канваса на 675px.

Лучшие для X: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — высокий контраст + темный фон оптимальны для ленты X. Избегайте в X: чрезмерно корпоративные стили без темного варианта; чисто белые фоны в темном режиме ленты.

7. Шрифты и типографика

Те же правила, что и в OG. См. og-image-generator references/typography.md.

Специфичное для Twitter дополнение: поскольку изображения в ленте отображаются шириной ~260px (против ~500px в десктопной ленте OG), увеличьте минимальный размер шрифта на 4px — используйте минимум 28px вместо 24px.

8. Проверки Agent YAML

checks:
  # P0 — должно проходить
  - id: dimensions-twitter
    description: twitter:image имеет размеры 1200x675px (2:1) или 1200x628px (кроссплатформенное)
  - id: card-type-match
    description: twitter:card равен summary_large_image при использовании большого изображения
  - id: absolute-url
    description: URL twitter:image абсолютный (https://) и общедоступный
  - id: format
    description: Формат изображения — PNG, JPG или WebP (не SVG)

  # P1 — должно проходить
  - id: og-fallback
    description: og:image также задан (как запасной для платформ, которые не читают twitter:image)
  - id: timeline-safe-zone
    description: Критический текст и основной визуальный элемент находятся в верхних 60%; ничего критичного в нижних 20%
  - id: square-crop-survival
    description: Самый важный визуальный элемент правильно читается при обрезке 1:1 по центру (мобильная лента)
  - id: dark-mode
    description: Шаблон включает вариант с темным фоном или использует стиль по умолчанию, дружественный к темному режиму
  - id: edge-mask-clearance
    description: Логотипы и критически важные элементы находятся на расстоянии ≥20px от всех краев (маска скругленных углов Twitter)

  # P2 — желательно
  - id: cross-platform-compatible
    description: То же изображение размером 1200x628px работает и для OG, и для Twitter без отдельной генерации
  - id: ai-text-validated
    description: Если сгенерировано ИИ, весь текст был проверен по исходнику — нет галлюцинированного или написанного с ошибками текста
  - id: player-poster
    description: Страницы с карточками player имеют отдельный постер с кнопкой воспроизведения
  - id: content-aware-twitter
    description: Изображение отражает контент, специфичный для страницы, а не просто заголовок в шаблоне размера Twitter

9. Распространенные ошибки

1. Неправильное соотношение сторон: Использование 1200x630 (1.91:1) из OG без корректировки. Хотя Twitter это допускает, 1200x675 (2:1) лучше заполняет карточку и избегает леттербоксинга.
2. Отсутствие тега twitter:image: полагаться только на запасной вариант OG — без явного twitter:image вы теряете контроль над тем, какое изображение выберет Twitter.
3. Текст в нижних 20%: Twitter обрезает изображения до ~1:1 на мобильных устройствах. Критический текст внизу обрезается в ленте.
4. Не учтен темный режим: Изображения со светлым фоном выглядят резко в темном режиме Twitter, который включен у ~40% пользователей.
5. Использование SVG: Twitter не поддерживает SVG для изображений карточек. Всегда выводите PNG или JPG.
6. GIF без статичного первого кадра: Twitter показывает только первый кадр GIF. Убедитесь, что кадр 1 является осмысленным статичным изображением.
7. Галлюцинации текста ИИ при просмотре шириной 260px: Текст, сгенерированный ИИ, который выглядит правильно в полном размере, может показывать искаженные символы при малом рендере. Проверяйте в масштабе 1/4.
8. Логотипы касаются краев: Маска скругленных углов Twitter обрезает ~10px от краев. Держите логотипы на расстоянии ≥20px от краев.

10. Тестирование

• Валидатор карточек: https://cards-dev.twitter.com/validator — показывает, как именно будет отображаться карточка. Вставьте любой URL для предпросмотра.
• Ручное тестирование: Опубликуйте ссылку из тестового аккаунта, затем проверьте в ленте и развернутых видах.
• Тестирование темного режима: Проверьте карточку как в светлом, так и в темном режиме клиентов Twitter.
• Сброс кеша: Twitter агрессивно кеширует данные карточек (до 7 дней). После изменений используйте Валидатор карточек, чтобы принудительно выполнить повторное сканирование.
• Тест на мобильную обрезку: Сделайте скриншот карточки с соотношением 1:1 (обрежьте до 675x675 по центру), чтобы убедиться, что квадратная обрезка все еще передает контент страницы.

11. Связанные навыки

Эти навыки необязательны — данный навык работает самостоятельно. Установите их, если вам нужны дополнительные возможности:

Из того же репозитория (всегда устанавливаются вместе):

• og-image-generator: Генерация изображений OG (1200x630, 1.91:1) — полный процесс рендеринга, все 6 стилей, начальные шаблоны, руководство по типографике, ограничения Satori. Этот генератор Twitter Card использует всю его инфраструктуру повторно.

Из отдельных репозиториев (могут быть установлены или нет):

• twitter-cards (marketing-skills): Конфигурация HTML-метатегов для twitter:card, twitter:site, twitter:creator, валидация. Определяет, КАК установить тег; этот навык — КАК создать изображение.
• open-graph (marketing-skills): Конфигурация HTML-метатегов для og:title, og:image, og:url, инструменты тестирования платформ
• social-share-generator (marketing-skills): UI кнопок «Поделиться», который использует данные Twitter Card, когда пользователи делятся ссылками в X