# Навык агента по созданию изображений для Twitter Card > Создавайте оптимизированные изображения для предпросмотра ссылок Twitter Card (X) с правильным соотношением сторон 2:1 и учётом платформенных ограничений. Этот навык гарантирует, что ваши превью твитов выглядят идеально, помогая захватить внимание аудитории и увеличить вовлечённость. - Canonical: https://nanoskill.ai/ru/skills/twitter-card-image-generator - Markdown: https://nanoskill.ai/ru/skills/twitter-card-image-generator.md - Author: kostja94 - Published: 2026-06-09T06:00:00.000Z - Updated: 2026-07-25T04:19:51.168Z - Language: ru - Source type: github - Popularity signal: 244 ## Sources - https://github.com/kostja94/social-cards-skills ## Install ```shell npx skills add https://github.com/kostja94/social-cards-skills/tree/main/twitter-card-image-generator ``` ## About Этот навык генератора изображений для Twitter Card позволяет пользователям создавать идеально оптимизированные изображения для предпросмотра ссылок в X (Twitter), гарантируя, что их контент произведёт сильное визуальное впечатление в ленте. В отличие от обычных изображений Open Graph, этот инструмент специально адаптирован под уникальное соотношение сторон Twitter 2:1 (1200x675 пикселей) и особенности отображения на платформе, помогая создателям контента, маркетологам и разработчикам улучшить присутствие в социальных сетях и повысить вовлечённость. Используя шесть различных подходов к генерации и 16 универсальных визуальных стилей, навык предлагает широкие возможности для создания изображений. Он включает расширенные функции, такие как генерация фона с помощью ИИ, рабочие процессы с учётом контента и интеграцию с конвейером Satori/resvg. Важные аспекты дизайна, такие как совместимость с тёмным режимом, обрезка для мобильной ленты и маскирование краёв, встроены в процесс, что гарантирует визуально привлекательные и функциональные изображения для всех пользователей. Помимо стандартных превью ссылок, генератор также поддерживает создание привлекательных постеров для Twitter Player Cards, идеально подходящих для видео- и аудиоконтента. Благодаря встроенным проверкам YAML и рекомендациям по типичным ошибкам пользователи могут уверенно создавать высококачественные изображения для Twitter Card, соответствующие техническим требованиям и максимизирующие кликабельность, делая их общие ссылки более эффективными и профессиональными. ## Key features - **Оптимизировано для превью ссылок X (Twitter)**: Создавайте изображения, специально разработанные для соотношения сторон Twitter 2:1 (1200x675 пикселей) и уникального поведения отображения, чтобы ваш контент выделялся в ленте. - **Шесть подходов генерации и 16 визуальных стилей**: Используйте шесть различных методов генерации, включая генерацию изображений с помощью ИИ и рабочие процессы с учётом контента, в 16 визуальных стилях для создания разнообразных и привлекательных изображений Twitter Card. - **Адаптация к тёмному режиму и обрезке на мобильных устройствах**: Разрабатывайте изображения, которые хорошо смотрятся в тёмном режиме Twitter и не обрезаются в мобильной ленте, размещая важный контент в безопасных зонах для максимальной видимости. - **Генерация постера для карточки плеера**: Создавайте привлекательные изображения-постеры для Twitter Player Cards с наложенными кнопками воспроизведения и заголовками видео, чтобы побуждать пользователей взаимодействовать с вашим мультимедийным контентом. - **Комплексные проверки валидации**: Воспользуйтесь встроенными проверками YAML, которые проверяют размеры изображений, тип карточки, формат URL и дизайнерские аспекты, такие как безопасные зоны ленты и совместимость с тёмным режимом. ## Use cases - **Генерация изображений Twitter Card для записей блога**: Автоматически создавайте визуально привлекательные изображения Twitter Card размером 1200x675 пикселей для новых записей блога, чтобы они выглядели профессионально и привлекательно при публикации на X. - **Дизайн постеров карточек плеера для видео**: Создавайте оптимизированные постеры для вашего видеоконтента, публикуемого в Twitter, что способствует повышению кликабельности ещё до начала воспроизведения видео. - **Обеспечение совместимости с тёмным режимом для социальных публикаций**: Адаптируйте существующие изображения Open Graph или создавайте новые с дизайном, подходящим для тёмного режима, гарантируя, что ваши изображения Twitter Card будут отлично выглядеть для всех пользователей, независимо от их настроек отображения. ## Result preview Изучите высокоэффективное изображение Twitter Card, созданное с помощью этого навыка. ![A dark-themed Twitter Card preview for FlowMind AI featuring the headline 'The Future of AI Agents' in large white and indigo typography. The design uses a futuristic navy-blue gradient background with subtle grid lines and connected-node graphics representing AI networks. A 'Read More' button appears below the headline alongside an estimated reading time, creating a clean, modern SaaS-style layout optimized for social media engagement.](https://file.nanoskill.ai/Twitter-card-outcome-1.png) ![A brand style guide page showcasing the FlowMind AI color palette and visual language. Large color swatches display indigo, cyan, emerald green, deep black, dark surface blue, and semi-transparent gray text colors, each labeled with HEX values and usage descriptions. Below, a section outlines design principles focused on dark-mode optimization, color hierarchy, typography consistency, and visual balance for Twitter-native experiences.](https://file.nanoskill.ai/Twitter-card-outcome-3.png) ![A strategic design briefing page divided into four dark-themed cards titled Objective, Target Audience, Visual Identity, and Format. The page summarizes campaign goals, audience segments including tech professionals and startup founders, brand colors and style direction, and technical specifications such as Twitter’s 1200×675 pixel format, mobile-safe composition, and dark-mode compatibility.](https://file.nanoskill.ai/Twitter-card-outcome-5.png) ![A realistic Twitter feed mockup displaying a post from FlowMind AI about the future of AI agents. The tweet includes descriptive promotional copy and an embedded Twitter Card preview featuring a futuristic AI-themed visual. Engagement metrics such as comments, reposts, likes, and shares appear beneath the post, while a note at the bottom highlights projected improvements in click-through rate and user engagement from using optimized visual cards.](https://file.nanoskill.ai/Twitter-card-outcome-6.png) ## Result walkthrough ### Установить Добавьте навык генератора изображений Twitter Card в вашего ИИ-агента. ![A terminal-style screenshot showing the installation of the Twitter Card Image Generator skill. The console output displays the command 'npx skills add https://github.com/kostja94/social-cards-skills', followed by interactive prompts and confirmation messages indicating successful installation, universal agent setup, and symlinking for Hermes Agent access.](https://file.nanoskill.ai/Twitter-card-install.png) ### Опишите контент Поделитесь деталями вашего контента, фирменным стилем и предпочитаемым визуальным направлением. ![A screenshot of a terminal or interface asking the user to provide content details for generating a Twitter Card image. The prompt requests title/topic, key message, brand/account name, visual assets (logo, color palette, style), and call-to-action, showing how the skill gathers information before designing the card.](https://file.nanoskill.ai/describe-content.png) ### Сгенерировать результат Создайте оптимизированное для платформы изображение Twitter Card с чёткой визуальной иерархией и улучшениями дизайна, направленными на повышение вовлечённости. ![A screenshot of a terminal or interface showing the generation step for the Twitter Card image. It highlights the user confirming inputs and the system preparing the final platform-optimized image, ready for export as a high-resolution, social-media-ready graphic. The screen emphasizes that the card will follow 1200×675px format, mobile-safe layout, dark-mode compatibility, and engagement-focused design principles.](https://file.nanoskill.ai/Generation.png) ## Skill definition # Генератор изображений для 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](https://oginify.com) вместо запуска агентного процесса **При вызове**: При **первом использовании** начните с 1–2 предложений о том, что охватывает этот навык и почему это важно, затем предоставьте основной вывод. При **последующем использовании** или когда пользователь просит пропустить, сразу переходите к основному выводу. ## 1. Как Twitter потребляет изображения Twitter читает изображения в следующем порядке: 1. `twitter:image` — если явно задан, используется напрямую 2. `og:image` — откатывается до изображения OG, если теги Twitter Card отсутствуют 3. Нет изображения — обычный текстовый предпросмотр ссылки **Ключевой момент**: Facebook и LinkedIn НЕ читают `twitter:image`. Twitter — единственная платформа, которая читает теги Twitter Card. Это означает, что вам нужны ОБА пути к изображениям в ваших метаданных, хотя сам процесс рендеринга можно разделить. ## 2. Спецификации изображений Twitter | Свойство | Спецификация | |----------|--------------| | **Соотношение сторон** | 2:1 (официальное); на практике Twitter отображает ~1.91:1 | | **Рекомендуется** | 1200x675px (2:1); 1200x628px (кроссплатформенное с OG) | | **Минимальное** | 300x157px | | **Максимальное** | 4096x4096px | | **Размер файла** | До 5MB | | **Форматы** | JPG, PNG, WebP, GIF (только первый кадр); SVG не поддерживается | **Тип карточки определяет отображение изображения:** | Тип карточки | Поведение изображения | |-----------|---------------| | `summary_large_image` | Полноразмерное заметное изображение (рекомендуется для большинства страниц) | | `summary` | Маленькая миниатюра (квадрат 100x100px) | | `player` | Встраивание видео/аудио; изображение является постером до воспроизведения | | `app` | Иконка приложения; изображение — это иконка приложения + промо-изображение | Для большинства случаев используйте `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 для полной реализации. ```tsx // Общая конечная точка обслуживает и 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( , { width, height }, ); } ``` **Затем в метаданных страницы:** ```tsx 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](../og-image-generator/references/content-strategy.md) и [pipeline-guide.md](../og-image-generator/references/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 (по стилям):** | Шаблон OG | Адаптация для Twitter | |-------------|-------------------| | Terminal/CLI | Опустите оформление окна ниже (скругления Twitter обрезают точки в левом верхнем углу); используйте акцентный цвет для контраста в темном режиме | | Magazine Editorial | Используйте пресет Midnight Ink (темный вариант, разработанный для X); переместите область фото выше (верхние 50% вместо нижних) | | Swiss Minimal | Добавьте вариант для темного режима: фон `#0a0a0a` с сохранением акцента, белый текст; строки данных хорошо переживают обрезку до 1:1 | | Pixel Retro | Естественно темные фоны — пресеты NES/Arcade/CGA уже готовы для X; уменьшите элементы HUD на 10%, чтобы освободить маску по краям | | Brutalist | Вариант с черным фоном уже естественен для темного режима; асимметричный блок заголовка по умолчанию остается в верхних 60% | | Newspaper | Добавьте вариант с темным фоном `#1a1a1a`; многоколоночный макет должен вертикально складываться для зоны квадратной обрезки | ## 5. Постеры для карточек типа player Для видео/аудио контента тип карточки `player` требует изображения постера: ```html ``` Изображение постера отображается до того, как пользователь нажмет «воспроизвести». Создайте его как привлекательную миниатюру — включите наложение кнопки воспроизведения (треугольник в круге по центру), название видео и кадр из контента. Применяется та же рекомендация по соотношению сторон 2:1. Кнопка воспроизведения должна быть самым большим элементом в центральной квадратной зоне. Для постеров, созданных ИИ: промпт должен быть «миниатюра видео с кнопкой воспроизведения по центру, текст заголовка в верхней трети, темный фон, 1200x675px.» ## 6. Система стилей (общая с OG — 16 стилей) Изображения для Twitter используют те же 16 визуальных стилей из **og-image-generator** §3 и [references/style-system-v3.md](../og-image-generator/references/style-system-v3.md). Все шаблоны работают для Twitter — просто измените высоту канваса на 675px. | # | Стиль | Темный режим | Потенциал CTR в X | Шаблон | |---|-------|-----------|----------------|----------| | 1 | Terminal / CLI | Всегда темный | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) | | 2 | Magazine Editorial | Midnight Ink | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) | | 3 | Swiss Minimal | Нужен вариант | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) | | 4 | Pixel Retro | Все темные | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) | | 5 | Brutalist | Черный фон | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) | | 6 | Newspaper | Нужен вариант | ★★★ | [newspaper.tsx](../og-image-generator/templates/newspaper.tsx) | | 7 | Neo-Brutalism | Да | ★★★★★ | [neo-brutalism.tsx](../og-image-generator/templates/neo-brutalism.tsx) | | 8 | Bento Grid | Темная основа | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) | | 9 | Neo-Swiss Gradient | Светлый | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) | | 10 | Dark Gradient+Texture | Всегда темный | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) | | 11 | Text Overlay | Зависит от фона | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) | | 12 | Cinematic | Дружественный к темному | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) | | 13 | Collage | Различается | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) | | 14 | Risograph | Бумажная основа | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) | | 15 | Vaporwave | Темный неон | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) | | 16 | Grunge | Выцветший темный | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) | **Лучшие для X**: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — высокий контраст + темный фон оптимальны для ленты X. **Избегайте в X**: чрезмерно корпоративные стили без темного варианта; чисто белые фоны в темном режиме ленты. ## 7. Шрифты и типографика Те же правила, что и в OG. См. **og-image-generator** [references/typography.md](../og-image-generator/references/typography.md). Специфичное для Twitter дополнение: поскольку изображения в ленте отображаются шириной ~260px (против ~500px в десктопной ленте OG), увеличьте минимальный размер шрифта на 4px — используйте минимум 28px вместо 24px. ## 8. Проверки Agent YAML ```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 ## FAQ ### Что такое генератор изображений для Twitter Card? Генератор изображений для Twitter Card — это инструмент или навык, который создаёт изображения, специально оптимизированные для превью ссылок в X (Twitter). Эти изображения соответствуют уникальному соотношению сторон Twitter (2:1, 1200x675 пикселей) и дизайнерским требованиям, обеспечивая корректное и привлекательное отображение при публикации ссылки на платформе. ### Чем этот генератор отличается от обычного генератора изображений Open Graph (OG)? Хотя он использует общую инфраструктуру с генераторами изображений OG, этот навык специально адаптирует размеры вывода под соотношение сторон Twitter 1200x675 пикселей (2:1), включает адаптации дизайна для X, учитывает безопасные зоны ленты и поддерживает требования к карточкам плеера. Обычные изображения OG обычно имеют размер 1200x630 пикселей (1,91:1). ### Какие рекомендуемые размеры для изображения Twitter Card? Рекомендуемые размеры для изображения Twitter Card составляют 1200x675 пикселей, что соответствует соотношению сторон 2:1. Это обеспечивает эффективное заполнение карточки и позволяет избежать появления чёрных полос. ### Можно ли использовать SVG-изображения для Twitter Cards? Нет, Twitter не поддерживает SVG для изображений карточек. Следует использовать форматы PNG, JPG или WebP. При использовании GIF будет отображаться только первый кадр. ### Как этот генератор обрабатывает тёмный режим для изображений Twitter Card? Генератор учитывает использование тёмного режима в Twitter, отдавая предпочтение стилям с тёмным фоном или предоставляя варианты шаблонов для тёмного режима. Это гарантирует, что изображения будут естественно вписываться в тёмную ленту и сохранят визуальную привлекательность для примерно 40% пользователей Twitter. ### Что такое 'безопасная зона ленты' и почему она важна для изображений Twitter Card? 'Безопасная зона ленты' — это верхние 60% изображения, где следует размещать критически важный контент (заголовок, основной визуал). Это важно, потому что Twitter обрезает изображения примерно до формата 1:1 в мобильной ленте, пока твит не будет развёрнут, поэтому контент в нижних 20% может быть обрезан.