# ทักษะเอเจนต์สร้างภาพการ์ดทวิตเตอร์

> สร้างภาพแสดงตัวอย่างลิงก์การ์ดทวิตเตอร์ (X) ที่ปรับแต่งให้เหมาะสม ด้วยอัตราส่วนภาพ 2:1 ที่ถูกต้องและข้อจำกัดเฉพาะแพลตฟอร์ม ทักษะนี้ช่วยให้ตัวอย่างทวีตของคุณดูสมบูรณ์แบบ ช่วยดึงดูดความสนใจของผู้ชมและเพิ่มการมีส่วนร่วม

- Canonical: https://nanoskill.ai/th/skills/twitter-card-image-generator
- Markdown: https://nanoskill.ai/th/skills/twitter-card-image-generator.md
- Author: kostja94
- Published: 2026-06-09T06:00:00.000Z
- Updated: 2026-07-25T04:19:51.168Z
- Language: th
- 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

ทักษะตัวสร้างภาพการ์ดทวิตเตอร์นี้ช่วยให้ผู้ใช้สามารถสร้างภาพที่ปรับแต่งอย่างสมบูรณ์แบบสำหรับตัวอย่างลิงก์ X (ทวิตเตอร์) เพื่อให้เนื้อหาของพวกเขาสร้างผลกระทบทางภาพที่แข็งแกร่งในไทม์ไลน์ ซึ่งแตกต่างจากภาพ Open Graph ทั่วไป เครื่องมือนี้ปรับให้เข้ากับอัตราส่วนภาพ 2:1 (1200x675 พิกเซล) ที่เป็นเอกลักษณ์ของทวิตเตอร์และลักษณะการแสดงผลเฉพาะแพลตฟอร์ม ช่วยให้ผู้สร้างเนื้อหา นักการตลาด และนักพัฒนาสามารถเพิ่มการปรากฏตัวบนโซเชียลมีเดียและกระตุ้นการมีส่วนร่วม

ด้วยการใช้วิธีการสร้างภาพที่แตกต่างกันหกวิธีและรูปแบบภาพที่หลากหลายสิบหกแบบ ทักษะนี้จึงมีตัวเลือกที่ครอบคลุมสำหรับการสร้างภาพ โดยรวมคุณสมบัติขั้นสูงเช่น การสร้างภาพพื้นหลังด้วย AI, เวิร์กโฟลว์ที่รับรู้เนื้อหา, และการรวมไปป์ไลน์ซาโทริ/อาร์เอสวีจี ข้อควรพิจารณาด้านการออกแบบที่สำคัญ เช่น ความเข้ากันได้กับโหมดมืด, การครอบตัดไทม์ไลน์บนมือถือ, และการมาสก์ขอบถูกรวมไว้ในตัว เพื่อให้ภาพดูน่าสนใจและใช้งานได้ในทุกประสบการณ์ผู้ใช้

นอกเหนือจากตัวอย่างลิงก์มาตรฐานแล้ว ตัวสร้างยังรองรับการสร้างภาพโปสเตอร์ที่น่าสนใจสำหรับการ์ดเล่นสื่อของทวิตเตอร์ ซึ่งเหมาะสำหรับเนื้อหาวิดีโอและเสียง ด้วยการตรวจสอบยามล์ในตัวและคำแนะนำเกี่ยวกับข้อผิดพลาดทั่วไป ผู้ใช้สามารถสร้างภาพการ์ดทวิตเตอร์คุณภาพสูงที่ตรงตามข้อกำหนดทางเทคนิคและเพิ่มอัตราการคลิกผ่าน ทำให้ลิงก์ที่แชร์มีประสิทธิภาพและเป็นมืออาชีพมากขึ้น

## Key features

- **ปรับแต่งสำหรับการแสดงตัวอย่างลิงก์บน X (ทวิตเตอร์)**: สร้างภาพที่ออกแบบมาเฉพาะสำหรับอัตราส่วนภาพ 2:1 ของทวิตเตอร์ (1200x675px) และพฤติกรรมการแสดงผลที่เป็นเอกลักษณ์ เพื่อให้เนื้อหาของคุณโดดเด่นบนไทม์ไลน์
- **หกวิธีการสร้างและ 16 รูปแบบภาพ**: ใช้วิธีการสร้างที่แตกต่างกันหกวิธี รวมถึงการสร้างภาพด้วยเอไอและเวิร์กโฟลว์ที่คำนึงถึงเนื้อหา ใน 16 รูปแบบภาพ เพื่อสร้างภาพการ์ดทวิตเตอร์ที่หลากหลายและน่าสนใจ
- **การปรับแต่งสำหรับโหมดมืดและการครอปบนมือถือ**: ออกแบบภาพที่ทำงานได้ดีในโหมดมืดของทวิตเตอร์และอยู่รอดจากการครอปบนไทม์ไลน์มือถือ โดยวางเนื้อหาสำคัญในพื้นที่ปลอดภัยเพื่อให้มองเห็นได้มากที่สุด
- **การสร้างโปสเตอร์การ์ดผู้เล่น**: สร้างภาพโปสเตอร์ที่น่าสนใจสำหรับการ์ดผู้เล่นของทวิตเตอร์ พร้อมด้วยปุ่มเล่นซ้อนทับและชื่อวิดีโอ เพื่อดึงดูดให้ผู้ใช้มีส่วนร่วมกับเนื้อหามัลติมีเดียของคุณ
- **การตรวจสอบความถูกต้องอย่างครอบคลุม**: รับประโยชน์จากการตรวจสอบยามล์ในตัวที่ตรวจสอบขนาดภาพ ประเภทการ์ด รูปแบบ URL และข้อควรพิจารณาด้านการออกแบบ เช่น พื้นที่ปลอดภัยบนไทม์ไลน์และความเข้ากันได้กับโหมดมืด

## Use cases

- **สร้างภาพการ์ดทวิตเตอร์สำหรับโพสต์บล็อก**: สร้างภาพการ์ดทวิตเตอร์ขนาด 1200x675px ที่น่าดึงดูดสายตาโดยอัตโนมัติสำหรับโพสต์บล็อกใหม่ เพื่อให้ดูเป็นมืออาชีพและน่าสนใจเมื่อแชร์บน X
- **ออกแบบโปสเตอร์การ์ดผู้เล่นสำหรับวิดีโอ**: ผลิตภาพโปสเตอร์ที่ปรับให้เหมาะสมสำหรับเนื้อหาวิดีโอของคุณที่แชร์บนทวิตเตอร์ เพื่อกระตุ้นให้มีอัตราการคลิกผ่านที่สูงขึ้นก่อนที่วิดีโอจะเริ่มเล่น
- **รับประกันความเข้ากันได้กับโหมดมืดสำหรับการแชร์บนโซเชียล**: ปรับแต่งภาพโอเพนกราฟที่มีอยู่หรือสร้างใหม่ด้วยการออกแบบที่เหมาะกับโหมดมืด เพื่อรับประกันว่าภาพการ์ดทวิตเตอร์ของคุณดูดีสำหรับผู้ใช้ทุกคน โดยไม่คำนึงถึงการตั้งค่าการแสดงผลของพวกเขา

## Result preview

สำรวจภาพการ์ดทวิตเตอร์ที่มีประสิทธิภาพสูงซึ่งขับเคลื่อนด้วยทักษะนี้

![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

### ติดตั้ง

เพิ่มทักษะตัวสร้างภาพการ์ดทวิตเตอร์ให้กับเอเจนต์ AI ของคุณ

![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)

### สร้างผลลัพธ์

สร้างภาพการ์ดทวิตเตอร์ที่ปรับเหมาะกับแพลตฟอร์มด้วยลำดับภาพที่ชัดเจนและการปรับปรุงการออกแบบที่เน้นการมีส่วนร่วม

![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

สร้างภาพที่ปรับแต่งให้เหมาะสมสำหรับการแสดงตัวอย่างลิงก์บน X (Twitter) — การ์ดที่ปรากฏในไทม์ไลน์เมื่อมีผู้แชร์ลิงก์ การ์ด Twitter มีขนาดภาพและพฤติกรรมการแสดงผลที่แตกต่างจาก Open Graph มาตรฐาน ทักษะนี้ครอบคลุมขั้นตอนการสร้างทั้งหมดที่ปรับแต่งสำหรับอัตราส่วนภาพ 2:1 ของ Twitter และลักษณะเฉพาะของแพลตฟอร์ม

ทั้งหกแนวทางการสร้างและหกสไตล์การมองเห็นจาก **og-image-generator** สามารถใช้ได้ที่นี่ ข้อแตกต่างเพียงอย่างเดียวคือ: ขนาดผลลัพธ์ (1200x675 แทนที่จะเป็น 1200x630), การปรับแต่งการออกแบบเฉพาะสำหรับ X, การกำหนดโซนที่ปลอดภัยในไทม์ไลน์, และการรองรับการ์ดผู้เล่น

## เมื่อใดควรใช้

- ผู้ใช้ต้องการภาพ **1200×675px (2:1)** สำหรับการแสดงตัวอย่างลิงก์ X/Twitter, `summary_large_image`, หรือโปสเตอร์การ์ดผู้เล่น
- ผู้ใช้กล่าวถึง `twitter:image`, การ์ด Twitter, ภาพตัวอย่าง X, ตัวอย่างทวีต, หรือการออกแบบการ์ดไทม์ไลน์
- ผู้ใช้ต้องการเลย์เอาต์ที่ปลอดภัยสำหรับโหมดมืด, โซนเนื้อหาส่วนบน 60%, หรือค่าเยื้องขอบ 20px สำหรับการครอบตัดมุมโค้งของ X
- ผู้ใช้ใช้ **og-image-generator** อยู่แล้วและต้องการตัวแปรที่ปรับแต่งสำหรับ Twitter จากสไตล์และขั้นตอนการสร้างเดียวกัน

## เมื่อใดไม่ควรใช้

- **ภาพ OG ทั่วไป (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
3. ไม่มีภาพ — แสดงตัวอย่างลิงก์แบบข้อความธรรมดา

**ข้อมูลเชิงลึกที่สำคัญ**: Facebook และ LinkedIn ไม่อ่าน `twitter:image` Twitter เป็นแพลตฟอร์มเดียวที่อ่านแท็กการ์ด Twitter นั่นหมายความว่าคุณต้องการทั้งสองเส้นทางภาพในข้อมูลเมตาของคุณ แม้ว่าขั้นตอนการเรนเดอร์จริงอาจใช้ร่วมกันได้

## 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 การสร้างภาพ AI (แกนหลัก #1)

กลยุทธ์พร้อมท์สามส่วนเหมือนกับ OG แต่มีการจัดเฟรมเฉพาะสำหรับ Twitter:

```
ส่วนที่ 1 — คำอธิบายภาพ: พื้นหลัง, องค์ประกอบ, อารมณ์
ส่วนที่ 2 — ข้อกำหนดข้อความ: ข้อความที่แน่นอน, ในอัญประกาศ, พร้อมคำแนะนำขนาด
ส่วนที่ 3 — ข้อจำกัดของ Twitter: "1200x675px, อัตราส่วนภาพ 2:1, ข้อความสำคัญใน
         ส่วนบน 60%, พื้นหลังสีเข้มแนะนำสำหรับโหมดมืด"
```

**แนวทางไฮบริด (แนะนำ)**: AI สร้างพื้นหลัง/บรรยากาศ; Satori ซ้อนทับข้อความ มีความสำคัญอย่างยิ่งสำหรับข้อความจีนที่โมเดล AI ยังคงมีปัญหา — และอัตราการใช้โหมดมืดประมาณ 40% ของ Twitter ทำให้ความถูกต้องของข้อความมองเห็นได้ชัดเจนยิ่งขึ้น

ดู**og-image-generator** §1.1 สำหรับตารางเปรียบเทียบเครื่องมือ AI ทั้งหมด (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 (เลือกการสร้าง)** — ต้นไม้ตัดสินใจเหมือนเดิม สำหรับการสร้าง AI เพิ่ม: "ข้อความจะรอดที่ความกว้างการเรนเดอร์บนมือถือ ~260px ของ Twitter หรือไม่?"

**ขั้นตอนที่ 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(
    <OgTemplate title={title} height={height} />,
    { 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],  // 1200x675 เฉพาะ Twitter
  },
};
```

### 3.4 Puppeteer, บริการที่จัดการ, การกำหนดค่า JSON

เหมือนกับ OG — ตั้งค่า viewport/height เป็น 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` ต้องการภาพโปสเตอร์:

```html
<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 ใช้เหมือนเดิม ปุ่มเล่นควรเป็นองค์ประกอบที่ใหญ่ที่สุดในโซนสี่เหลี่ยมกลาง

สำหรับโปสเตอร์ที่สร้างโดย AI: พร้อมท์สำหรับ "ภาพขนาดย่อวิดีโอพร้อมปุ่มเล่นตรงกลาง, ข้อความชื่อในส่วนบนหนึ่งในสาม, พื้นหลังสีเข้ม, 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 (เทียบกับฟีดเดสก์ท็อปของ OG ที่ ~500px) ให้เพิ่มขนาดแบบอักษรขั้นต่ำอีก 4px — ใช้ขั้นต่ำ 28px แทนที่จะเป็น 24px

## 8. การตรวจสอบ 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: หากสร้างโดย AI ข้อความทั้งหมดได้รับการตรวจสอบกับต้นฉบับ — ไม่มีข้อความที่สร้างขึ้นมาหรือสะกดผิด
  - id: player-poster
    description: หน้าการ์ดผู้เล่นมีภาพโปสเตอร์เฉพาะพร้อมปุ่มเล่น
  - 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. **ข้อความ AI หลอนที่มุมมอง 260px**: ข้อความที่สร้างโดย AI ที่ดูถูกต้องในขนาดเต็มอาจแสดงตัวอักษรผิดเพี้ยนเมื่อเรนเดอร์ขนาดเล็ก ตรวจสอบที่สเกล 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 นี้ใช้โครงสร้างพื้นฐานทั้งหมดของมันซ้ำ

**รีโพแยก** (อาจติดตั้งหรือไม่ก็ได้):
- **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 เมื่อผู้ใช้แชร์ลิงก์ไปยัง X

## FAQ

### เครื่องสร้างภาพการ์ดทวิตเตอร์คืออะไร?

เครื่องสร้างภาพการ์ดทวิตเตอร์เป็นเครื่องมือหรือทักษะที่สร้างภาพที่ปรับให้เหมาะสมโดยเฉพาะสำหรับตัวอย่างลิงก์ของ X (ทวิตเตอร์) ภาพเหล่านี้ยึดตามอัตราส่วนภาพเฉพาะของทวิตเตอร์ (2:1, 1200x675px) และข้อควรพิจารณาในการออกแบบ เพื่อให้แสดงผลอย่างถูกต้องและน่าดึงดูดเมื่อมีการแชร์ลิงก์บนแพลตฟอร์ม

### เครื่องสร้างนี้แตกต่างจากเครื่องสร้างภาพโอเพนกราฟ (โอจี) ทั่วไปอย่างไร?

แม้ว่ามันจะใช้โครงสร้างพื้นฐานร่วมกับเครื่องสร้างภาพโอจี แต่สกิลนี้ปรับขนาดผลลัพธ์ให้เป็นอัตราส่วนภาพ 1200x675px (2:1) ของทวิตเตอร์โดยเฉพาะ รวมถึงการปรับเปลี่ยนการออกแบบเฉพาะ X คำนึงถึงพื้นที่ปลอดภัยบนไทม์ไลน์ และรองรับข้อกำหนดของการ์ดผู้เล่น ภาพโอจีทั่วไปมักมีขนาด 1200x630px (1.91:1)

### ขนาดที่แนะนำสำหรับภาพการ์ดทวิตเตอร์คืออะไร?

ขนาดที่แนะนำสำหรับภาพการ์ดทวิตเตอร์คือ 1200x675 พิกเซล ซึ่งให้อัตราส่วนภาพ 2:1 เพื่อให้ภาพเต็มการ์ดอย่างมีประสิทธิภาพและหลีกเลี่ยงแถบดำ

### ฉันสามารถใช้ภาพเอสวีจีสำหรับการ์ดทวิตเตอร์ได้ไหม?

ไม่ ทวิตเตอร์ไม่รองรับเอสวีจีสำหรับภาพการ์ด คุณควรใช้รูปแบบพีเอ็นจี เจเพก หรือเว็บพี หากคุณใช้กิฟ จะแสดงเฉพาะเฟรมแรกเท่านั้น

### เครื่องสร้างนี้จัดการกับโหมดมืดสำหรับภาพการ์ดทวิตเตอร์อย่างไร?

เครื่องสร้างนี้คำนึงถึงการใช้งานโหมดมืดของทวิตเตอร์ โดยเลือกใช้สไตล์พื้นหลังสีเข้มหรือมีตัวเลือกโหมดมืดสำหรับเทมเพลต เพื่อให้ภาพกลมกลืนกับไทม์ไลน์โหมดมืดอย่างเป็นธรรมชาติและคงความดึงดูดทางสายตาสำหรับผู้ใช้ทวิตเตอร์ประมาณ 40%

### 'พื้นที่ปลอดภัยบนไทม์ไลน์' คืออะไรและทำไมมันถึงสำคัญสำหรับภาพการ์ดทวิตเตอร์?

'พื้นที่ปลอดภัยบนไทม์ไลน์' หมายถึงส่วนบน 60% ของภาพที่ควรวางเนื้อหาสำคัญ (ชื่อเรื่อง, ภาพหลัก) ไว้ ซึ่งสำคัญเพราะทวิตเตอร์จะครอปภาพให้เป็นประมาณ 1:1 บนไทม์ไลน์มือถือจนกว่าจะขยายทวีต หมายความว่าเนื้อหาในส่วนล่าง 20% อาจถูกตัดออก