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

เครื่องมือสร้างภาพการ์ด 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 แทนการรันขั้นตอนตัวแทน

เมื่อเรียกใช้: ในการใช้งานครั้งแรก เริ่มด้วย 1–2 ประโยคเกี่ยวกับสิ่งที่ทักษะนี้ครอบคลุมและเหตุผลที่สำคัญ จากนั้นให้ผลลัพธ์หลัก ในการใช้งานครั้งถัดไป หรือเมื่อผู้ใช้ขอให้ข้าม ให้ไปยังผลลัพธ์หลักโดยตรง

1. วิธีที่ Twitter อ่านภาพ

Twitter อ่านภาพตามลำดับความสำคัญดังนี้:

1. twitter:image — หากตั้งค่าไว้อย่างชัดเจน จะใช้โดยตรง
2. og:image — ถอยกลับไปใช้ภาพ OG หากไม่มีแท็กการ์ด Twitter
3. ไม่มีภาพ — แสดงตัวอย่างลิงก์แบบข้อความธรรมดา

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

2. ข้อกำหนดภาพ Twitter

ประเภทการ์ดกำหนดการแสดงภาพ:

สำหรับกรณีการใช้งานส่วนใหญ่ เป้าหมายคือ 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 สำหรับการนำไปใช้เต็มรูปแบบ

// จุดปลายทางร่วมทำหน้าที่ทั้ง 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],  // 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 และ 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 ต้องการภาพโปสเตอร์:

<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 เทมเพลตทั้งหมดทำงานสำหรับ Twitter — เพียงแค่เปลี่ยนความสูงแคนวาสเป็น 675px

ผู้ทำผลงานดีเด่นบน X: Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — ความคมชัดสูง + พื้นหลังสีเข้มเหมาะสมที่สุดสำหรับไทม์ไลน์ X ควรหลีกเลี่ยงบน X: สไตล์องค์กรที่อ่อนเกินไปหรือไม่มีตัวแปรสีเข้ม; พื้นหลังสีขาวบริสุทธิ์ในไทม์ไลน์โหมดมืด

7. แบบอักษรและการเรียงพิมพ์

กฎเหมือน OG ดูog-image-generator references/typography.md.

การเพิ่มเติมเฉพาะ Twitter: เนื่องจากภาพไทม์ไลน์เรนเดอร์ที่กว้าง ~260px (เทียบกับฟีดเดสก์ท็อปของ OG ที่ ~500px) ให้เพิ่มขนาดแบบอักษรขั้นต่ำอีก 4px — ใช้ขั้นต่ำ 28px แทนที่จะเป็น 24px

8. การตรวจสอบ 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