รายการตรวจสอบขนาดและตัวอย่างภาพ Twitter Card

ปรับปรุงล่าสุด: June 28, 2026

ภาพ Twitter card image คือภาพตัวอย่างที่ปรากฏเมื่อมีคนแชร์ URL บน X มันควรจะมีขนาดใหญ่พอที่จะดูคมชัด มีขนาดเล็กพอให้ crawler ดึงข้อมูลได้อย่างรวดเร็ว และต้องระบุด้วย metadata ที่ใช้งานได้แม้ว่าแพลตฟอร์มจะย้อนกลับไปใช้ Open Graph tags ก็ตาม

คู่มือนี้จะมอบรายการตรวจสอบการเผยแพร่ที่ใช้งานได้จริง: ขนาด (dimensions), แท็ก (tags), รูปแบบไฟล์ (file format), การตรวจสอบ CDN, และวิธีแก้ไขสำหรับ card ที่ไม่ยอมอัปเดต

คำตอบสั้น ๆ: ควรใช้รูปภาพ Twitter Card แบบใด?

สำหรับลิงก์ที่แชร์ส่วนใหญ่ ให้ใช้ WebP หรือ JPEG ขนาด 1200 by 630 pixel โดยเฉพาะอย่างยิ่งเมื่อคุณต้องการการ์ดรูปภาพขนาดใหญ่ ควรจัดวางวัตถุสำคัญให้ห่างจากขอบ ทำให้ข้อความอ่านได้แม้ในขนาด thumbnail และใช้ absolute HTTPS URL ทั้งใน twitter:image และ og:image

สำหรับ X ให้ตั้งค่า twitter:card เป็น summary_large_image เมื่อรูปภาพเป็นจุดดึงดูดหลัก ควรให้ไฟล์มีขนาดที่ต่ำกว่าขีดจำกัดของรูปภาพการ์ดตามเอกสารอย่างสบาย ๆ และตรวจสอบว่า CDN URL สุดท้ายส่งคืน HTTP 200 ก่อนเผยแพร่

การตั้งค่าที่เชื่อถือได้นั้นง่ายมาก:

ส่งออกรูปภาพขนาด 1200 by 630 สำหรับตัวอย่าง
ใช้ CDN URL สุดท้าย ไม่ใช่ relative path
เพิ่ม twitter:title, twitter:description, และ twitter:image
เพิ่ม og:title, og:description, และ og:image ที่ตรงกันเป็นตัวสำรอง (fallback)
ทดสอบ live URL หลังการติดตั้ง จากนั้นรีเฟรชแคชของแพลตฟอร์มหากรูปภาพเก่าปรากฏ

ภาพ Twitter Card คืออะไร?

ภาพ Twitter card image คือ URL ของรูปภาพที่ประกาศใน metadata ของหน้า เพื่อให้ X สามารถสร้างตัวอย่างแบบ rich preview ได้ มันไม่เหมือนกับรูปแรกในบทความของคุณ Crawler จะอ่านส่วน head ของ HTML ค้นหา card tags ดึงรูปภาพ และจัดเก็บตัวอย่างแคชสำหรับ shared URL นั้น

ตัวอย่าง markup card ของ X เองยังคงอธิบายประเภท card อย่าง summary และ summary_large_image ในเอกสารและตัวอย่างสำหรับนักพัฒนา ความแตกต่างในทางปฏิบัติคือขนาดของ preview: summary_large_image ให้พื้นที่รูปภาพเพียงพอที่จะบรรจุลิงก์บล็อก ผลิตภัณฑ์ เครื่องมือ หรือแคมเปญ

Open Graph มีความสำคัญเพราะแพลตฟอร์มโซเชียลมีเดีย แอปแชท และระบบ link preview หลายแห่งอ่าน og:image Open Graph protocol กำหนดให้ og:title, og:type, og:image, และ og:url เป็น metadata หลัก ควรใช้ทั้ง Twitter/X tags และ Open Graph tags เพื่อไม่ให้การที่ parser ตัวใดตัวหนึ่งขาดหายไปทำให้ทุก preview พัง

Metadata field	ใช้สำหรับ	หมายเหตุในทางปฏิบัติ
`twitter:card`	เลือกรูปแบบ summary หรือ large-image	ใช้ `summary_large_image` สำหรับการแชร์บทความและหน้า Landing Page ส่วนใหญ่
`twitter:image`	รูปภาพ preview หลักของ X	ควรใช้ URL รูปภาพ HTTPS แบบ absolute
`og:image`	รูปภาพ preview สำรองสำหรับแอปโซเชียลและข้อความ	โดยปกติให้ตรงกับ `twitter:image` เว้นแต่แพลตฟอร์มต้องการการครอปที่แตกต่างกัน
`og:url`	URL หลัก (Canonical URL) สำหรับหน้าเว็บที่ถูกแชร์	ต้องตรงกับ URL หน้าหลักสาธารณะ
`title` and `description` tags	บริบทของเบราว์เซอร์และเครื่องมือค้นหา	ควรให้สอดคล้องกับ social metadata

สำหรับงานเกี่ยวกับ image metadata ที่เกี่ยวข้อง ให้จับคู่สิ่งนี้กับไกด์ Image Optimization for SEO และ Complete Image Optimization Checklist

ขนาดรูปภาพสำหรับ Twitter Card ควรเป็นเท่าไหร่?

ควรเริ่มต้นที่ 1200 by 630 pixels เพราะขนาดนี้ตรงกับอัตราส่วนการแสดงตัวอย่างโซเชียลทั่วไปที่ 1.91:1 ให้พิกเซลเพียงพอแก่แพลตฟอร์มในการย่อขนาดได้อย่างสะอาดตา และใช้งานได้ดีเมื่อใช้รูปภาพเดียวกันซ้ำเป็น og:image

หลีกเลี่ยงการออกแบบ Card ที่ใช้งานได้เฉพาะเมื่อแสดงผลขนาดเต็มเท่านั้น เพราะ Feed ต่างๆ จะทำการ Crop, ปรับขนาด และวางข้อความรอบรูปภาพ ป้ายกำกับเล็ก ๆ ภาพหน้าจอ UI ที่บาง และพื้นหลังที่ยุ่งเหยิงมักจะดูดีในเครื่องมือออกแบบ แต่จะอ่านยากมากเมื่ออยู่ใน Card สำหรับแชร์จริง

กรณีการใช้งาน	รูปภาพแนะนำ	เหตุผลที่ใช้ได้ผล	ข้อควรระวัง
บทความหรือไกด์	1200 x 630 WebP	Crop ตัวอย่างขนาดใหญ่, รองรับหลายแพลตฟอร์ม	ข้อความหัวข้อเล็กเกินไป
เปิดตัวผลิตภัณฑ์	1200 x 630 WebP หรือ JPEG	ผลิตภัณฑ์ยังคงมองเห็นได้แม้มีการย่อขนาด	การ Crop ขอบของผลิตภัณฑ์
หน้าเครื่องมือ (Tool page)	กราฟิกที่อิงจากภาพหน้าจอ ขนาด 1200 x 630	แสดงให้เห็นว่าเครื่องมือทำอะไรก่อนการคลิก	ข้อความ UI เล็กเกินกว่าจะอ่านได้
หน้าที่มีโลโก้เท่านั้น	1200 x 630 พร้อมพื้นที่ว่างที่เหมาะสม	ป้องกันไม่ให้โลโก้ดูแน่นเกินไป	ตัวอย่างภาพที่ดูว่างเปล่า
แคมเปญที่เหมาะกับสี่เหลี่ยมจัตุรัส	รูปแบบแยกต่างหากขนาด 1200 x 1200 เมื่อจำเป็น	มีประโยชน์สำหรับแพลตฟอร์มที่มีการ Crop แบบสี่เหลี่ยมจัตุรัส	ห้ามนำไปใช้ซ้ำโดยไม่คิดว่าเป็น X card

เมื่อคุณต้องการ Crop สำหรับหลายแพลตฟอร์ม ให้ใช้บทความ Best Image Resizer for Social Media และใช้ Facebook Ad Image Sizes เมื่อ Creative เดียวกันนี้ถูกนำไปใช้กับ Paid social ด้วย

จะเขียน metadata อย่างไรดี?

ให้ใส่แท็กใน HTML ที่ถูกเรนเดอร์จากเซิร์ฟเวอร์ ภายในส่วน <head> ของหน้า อย่าพึ่งพา client-side JavaScript ในการฉีด social tags หลังจากโหลด หน้าเว็บสำหรับดูตัวอย่างลิงก์ (Link preview crawlers) อาจไม่ได้ทำงานแอปของคุณเหมือนที่เบราว์เซอร์ทำ

ใช้รูปแบบนี้สำหรับบทความหรือหน้าเครื่องมือทั่วไป:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size and Preview Checklist">
<meta name="twitter:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta name="twitter:image" content="https://cdn.example.com/blog/twitter-card-image.webp">

<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size and Preview Checklist">
<meta property="og:description" content="Choose the right image size, format, and tags for clean shared links.">
<meta property="og:image" content="https://cdn.example.com/blog/twitter-card-image.webp">
<meta property="og:url" content="https://example.com/blog/twitter-card-image">

ควรตรวจสอบรายการเหล่านี้ในการรีวิวโค้ด:

URL ของรูปภาพต้องเป็นแบบ absolute และขึ้นต้นด้วย https://.
URL ของรูปภาพต้องเป็น CDN URL สุดท้าย ไม่ใช่ local build path
ชื่อหน้า (page title) และชื่อโซเชียล (social title) ต้องอธิบายถึงหน้าเดียวกัน
คำอธิบายโซเชียลต้องสั้นพอที่จะอ่านได้ในการแสดงตัวอย่าง
canonical URL และ og:url ต้องชี้ไปยังหน้าสาธารณะเดียวกัน
รูปภาพสำหรับ card ต้องไม่ถูกบล็อกโดย robots.txt, การยืนยันตัวตน (authentication), หรือกฎ hotlink
การตอบสนองของเซิร์ฟเวอร์ต้องรวม content type ของรูปภาพที่ถูกต้อง

คำแนะนำด้าน image SEO ของ Google ยังแนะนำให้มีบริบทของรูปภาพที่อธิบายได้, URL รูปภาพที่ crawlable และรูปแบบที่รองรับ ใน Google Images best practices คำแนะนำนั้นไม่ได้จำกัดเฉพาะ Twitter แต่เป็นหลักการเผยแพร่เดียวกัน: คือทำให้รูปภาพสำคัญง่ายต่อการค้นพบ ดึงข้อมูล และทำความเข้าใจสำหรับ crawler

ควรใช้ WebP, JPEG หรือ PNG สำหรับรูปภาพการ์ดของ Twitter ดีไหม?

ควรใช้ WebP เมื่อแพลตฟอร์มและเป้าหมายในการแสดงตัวอย่างรองรับ โดยเฉพาะสำหรับกราฟิกบทความ ตัวอย่างผลิตภัณฑ์ และภาพหน้าจอที่มีสีผสมผสาน ใช้ JPEG สำหรับความเข้ากันได้ในวงกว้าง หรือสำหรับการ์ดที่เน้นรูปถ่ายเป็นหลัก ส่วน PNG ควรใช้เมื่อต้องการความโปร่งใสหรือขอบที่ไม่สูญเสียรายละเอียด (lossless edges) ซึ่งคุ้มค่ากับขนาดไฟล์ที่ใหญ่ขึ้น

image file type guide ของ MDN อธิบายว่า WebP รองรับการบีบอัดทั้งแบบ lossy และ lossless ความยืดหยุ่นนี้มีประโยชน์สำหรับ social cards เพราะรูปภาพเดียวสามารถบรรจุพื้นผิวของภาพถ่าย สีแบรนด์เรียบๆ และข้อความได้

สำหรับบทความนี้ ผู้เขียนได้เข้ารหัสและทดสอบกราฟิก WebP ขนาด 1200 by 630 จำนวนสี่รายการด้วย ImageMagick ในเครื่อง และตรวจสอบขนาดเอาต์พุตก่อนเผยแพร่ ซึ่งมีขนาดอยู่ระหว่าง 14 KB ถึง 28 KB เนื่องจากเป็นกราฟิกที่สะอาดตาและมีพื้นผิวจำกัด ภาพถ่ายผลิตภัณฑ์จริงและภาพหน้าจอโดยละเอียดมักจะมีขนาดใหญ่กว่า

Format	Good fit	Typical risk	Practical starting point
WebP	กราฟิกตัวอย่างสำหรับโซเชียลส่วนใหญ่ และการ์ดรูปภาพผสมผสาน	เครื่องมือรุ่นเก่าบางตัวอาจไม่แสดงตัวอย่างฉบับร่างในเครื่อง	Export lossy WebP รอบคุณภาพ 80-85
JPEG	ตัวอย่างที่เน้นรูปถ่ายและต้องการความเข้ากันได้แบบอนุรักษ์นิยม	ไม่มีความโปร่งใส อาจมีอาการขอบรอบข้อความ (ringing)	Export รอบคุณภาพ 82-88
PNG	โลโก้ ความโปร่งใส กราฟิกแบนที่คมชัด	ขนาดไฟล์ใหญ่	ใช้เมื่อจำเป็นต้อง lossless เท่านั้น
AVIF	รูปภาพสมัยใหม่ขนาดเล็กมาก	ระบบนิเวศการแสดงตัวอย่างอาจคาดเดาได้ยากกว่า	ทดสอบอย่างระมัดระวังก่อนใช้เป็นรูปภาพการ์ดเพียงอย่างเดียว

หากรูปภาพการ์ดยังเป็นส่วนหนึ่งของ hero image ของหน้าเว็บ ให้ทำตามแนวทาง Image Compression Ratio เพื่อให้ตัวอย่างดูสะอาดตาโดยไม่ทำให้หน้าเว็บหนักเกินไป หากคุณกำลังเปรียบเทียบรูปแบบสมัยใหม่ ควรอ่าน AVIF vs WebP Comparison

ต้องทำอย่างไรให้อิมเมจอ่านง่ายในฟีด?

ออกแบบการ์ดสำหรับพื้นที่ที่เล็กที่สุดที่จะแสดงผล ไม่ใช่บน Artboard ในโปรแกรมแก้ไขของคุณ ตัวอย่างในฟีดอาจจะแคบกว่าต้นฉบับ และส่วนติดต่อผู้ใช้ (UI) รอบข้างก็จะแย่งความสนใจไปด้วย

ใช้กฎการออกแบบเหล่านี้:

วางหัวข้อหลักหรือประเด็นสำคัญไว้ในพื้นที่ปลอดภัยตรงกลาง (center safe area)
เว้นระยะห่างรอบใบหน้า ผลิตภัณฑ์ โลโก้ และข้อความ
ใช้ข้อความสั้นๆ เพียงอย่างเดียว ไม่ใช่ชื่อบทความเต็มพร้อมด้วยหัวข้อย่อยและป้ายกำกับ
ตรวจสอบรูปภาพที่ความกว้าง 600 pixels ก่อนอนุมัติ
หลีกเลี่ยงการจับภาพหน้าจอที่มีป้ายกำกับเล็กๆ เว้นแต่ว่าตัว UI นั้นเองคือเรื่องราว
รักษาความเปรียบต่าง (contrast) ให้สูงพอสำหรับการมองแวบแรก
อย่าใช้ภาพสต็อกทั่วไปเมื่อหน้านั้นเกี่ยวกับเครื่องมือ ผลิตภัณฑ์ หรือขั้นตอนการทำงานทางเทคนิค

รูปภาพการ์ดที่มีประโยชน์ควรตอบคำถามว่า "ลิงก์นี้เกี่ยวกับอะไร?" ก่อนที่ผู้อ่านจะศึกษาชื่อเรื่อง สำหรับบทความบล็อก อาจเป็นแผนภาพง่ายๆ สำหรับคู่มืออีคอมเมิร์ซ อาจเป็นตัวอย่างรูปถ่ายผลิตภัณฑ์ และสำหรับเครื่องมือแปลงหรือปรับขนาด (resizer) อาจเป็นภาพหน้าจอของเครื่องมือที่ถูกครอปมา

ทำไมรูปภาพ Twitter Card ของฉันถึงไม่แสดง?

รูปภาพ Card ที่แสดงผลผิดพลาดส่วนใหญ่มักเกิดจากสาเหตุใดสาเหตุหนึ่งในสี่ประการ: crawler ไม่สามารถดึง URL ได้, metadata ชี้ไปยังรูปภาพที่ไม่ถูกต้อง, แพลตฟอร์มได้แคชเวอร์ชันเก่าไว้แล้ว, หรือรูปภาพนั้นแม้จะถูกต้องทางเทคนิคแต่ก็เป็นตัวเลือกสำหรับพรีวิวที่แย่

ให้ทำตามขั้นตอนเหล่านี้ก่อนที่จะเปลี่ยนงานออกแบบ:

เปิด Source Code ของหน้าสุดท้ายและยืนยันว่ามีแท็ก twitter:image อยู่หรือไม่
คัดลอก URL รูปภาพที่แน่นอนจาก HTML ที่แสดงผลแล้ว
รัน curl -I กับ URL รูปภาพและยืนยันว่าได้รับ HTTP 200
ยืนยันว่าประเภทเนื้อหาของการตอบกลับเป็นรูปแบบรูปภาพ
ตรวจสอบให้แน่ใจว่า URL รูปภาพไม่ได้ถูกเปลี่ยนเส้นทางผ่านกำแพงการยืนยันตัวตน (auth wall)
ตรวจสอบให้แน่ใจว่าไฟล์รูปภาพนั้นไม่ได้มีขนาดใหญ่มากเกินไป
ยืนยันว่า robots.txt ไม่ได้บล็อกรูปภาพหรือหน้าเพจ
เปลี่ยนชื่อไฟล์รูปภาพเมื่อคุณต้องการบังคับให้มีการแคชใหม่
ทดสอบหน้าเว็บที่ใช้งานจริง ไม่ใช่ URL พรีวิวในเครื่อง (local)
ตรวจสอบแท็ก Open Graph หาก Card ทำงานได้ในแอปหนึ่งแต่ไม่ทำงานในอีกแอป

Symptom	Likely cause	Fix
No image appears	Missing or relative `twitter:image`	Use a full HTTPS CDN URL
Old image appears	Cached preview	Publish a new filename and refresh the shared URL
Image appears cropped badly	Unsafe composition	Re-export with more padding and a central subject
Preview title is wrong	Metadata mismatch	Align `twitter:title`, `og:title`, and the page title
Works locally but not live	Local path, auth, or blocked CDN	Test the production URL with `curl -I`

คู่มือ Crop Image Online Guide มีประโยชน์เมื่อหัวข้อที่ต้องการมีการครอปที่ปลอดภัยกว่า และ Image Aspect Ratio Changer ใช้สำหรับเปลี่ยนงานออกแบบจากสี่เหลี่ยมจัตุรัสหรือแนวตั้งให้เป็นกรอบพรีวิวโซเชียล

รายการตรวจสอบก่อนเผยแพร่

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

ใช้รายการตรวจสอบสุดท้ายนี้:

รูปภาพในส่วน frontmatter หรือ CMS ต้องเป็นรูปเดียวกับที่ใช้สำหรับ social metadata
รูปภาพต้องมีความเฉพาะเจาะจงกับหน้านั้น ๆ หรือเกี่ยวข้องกับเนื้อหาของหน้าอย่างชัดเจน
URL ของรูปภาพต้องเป็น HTTPS และสาธารณะ (public)
ส่วนขยายไฟล์ต้องตรงกับรูปแบบการตอบสนองจริง
รูปภาพต้องส่งคืนค่า HTTP 200 จาก CDN
ชื่อเรื่องและคำอธิบายต้องไม่ได้ยัดไส้ด้วยคีย์เวิร์ดมากเกินไป
รูปภาพตัวอย่างต้องมี alt text ที่สื่อความหมายในจุดที่ปรากฏในเนื้อหาบทความ
ต้องตรวจสอบรูปภาพด้วยสายตาว่าดูดีทั้งขนาดพรีวิวบนเดสก์ท็อปและมือถือ
หน้าเว็บต้องมี canonical URL ที่เสถียร
ต้องทดสอบการ์ดใหม่อีกครั้งหลังจากการติดตั้งใช้งาน (deployment)

รูปภาพ Twitter card ที่ดีคือระบบการเผยแพร่ขนาดเล็ก: ภาพที่ชัดเจนเพียงภาพเดียว metadata ที่เสถียร URL CDN ที่รวดเร็ว และการตรวจสอบ fetch ครั้งสุดท้าย เมื่อองค์ประกอบเหล่านี้เข้าที่แล้ว โอกาสที่ตัวอย่างจะพังระหว่างการเปิดตัวหรือการรีเฟรชเนื้อหาก็จะลดลงมาก

รายการตรวจสอบขนาดและตัวอย่างภาพ Twitter Card

คำตอบสั้น ๆ: ควรใช้รูปภาพ Twitter Card แบบใด?

ภาพ Twitter Card คืออะไร?

ขนาดรูปภาพสำหรับ Twitter Card ควรเป็นเท่าไหร่?

จะเขียน metadata อย่างไรดี?

ควรใช้ WebP, JPEG หรือ PNG สำหรับรูปภาพการ์ดของ Twitter ดีไหม?

ต้องทำอย่างไรให้อิมเมจอ่านง่ายในฟีด?

ทำไมรูปภาพ Twitter Card ของฉันถึงไม่แสดง?

รายการตรวจสอบก่อนเผยแพร่

เครื่องมือย่อขนาดภาพจำนวนมาก: ปรับขนาดรูปภาพหลายร้อยรูปได้ในครั้งเดียว (ฟรี)

วิธีปรับขนาดรูปภาพหลายไฟล์พร้อมกัน: เปรียบเทียบเครื่องมือและสคริปต์ฟรี

เครื่องมือปรับขนาดภาพที่ดีที่สุดสำหรับเวิร์กโฟลว์โซเชียลมีเดีย

คำตอบสั้น ๆ: ควรใช้รูปภาพ Twitter Card แบบใด?

ภาพ Twitter Card คืออะไร?

ขนาดรูปภาพสำหรับ Twitter Card ควรเป็นเท่าไหร่?

จะเขียน metadata อย่างไรดี?

ควรใช้ WebP, JPEG หรือ PNG สำหรับรูปภาพการ์ดของ Twitter ดีไหม?

ต้องทำอย่างไรให้อิมเมจอ่านง่ายในฟีด?

ทำไมรูปภาพ Twitter Card ของฉันถึงไม่แสดง?

รายการตรวจสอบก่อนเผยแพร่

อ่านต่อ

เครื่องมือย่อขนาดภาพจำนวนมาก: ปรับขนาดรูปภาพหลายร้อยรูปได้ในครั้งเดียว (ฟรี)

วิธีปรับขนาดรูปภาพหลายไฟล์พร้อมกัน: เปรียบเทียบเครื่องมือและสคริปต์ฟรี

เครื่องมือปรับขนาดภาพที่ดีที่สุดสำหรับเวิร์กโฟลว์โซเชียลมีเดีย