ขนาดมาตรฐานของ OG image คือ 1200×630 พิกเซล ด้วยสัดส่วนภาพ 1.91:1 ใช้ขนาดเดียวนี้ แล้วตัวอย่างลิงก์ของคุณจะแสดงผลถูกต้องทั้งบน Facebook, X (Twitter), LinkedIn, Slack, Discord, WhatsApp และ Telegram
นั่นคือคำตอบแบบสั้น ส่วนที่เหลือของคู่มือนี้จะลงรายละเอียดที่ทำให้หลายคนพลาดจริง ๆ ทั้งขนาดของแต่ละแพลตฟอร์ม safe zone สำหรับข้อความ ขีดจำกัดขนาดไฟล์ และ meta tag ที่บอกแต่ละแพลตฟอร์มว่ารูปของคุณอยู่ที่ไหน
ขนาดเดียวที่ใช้ได้ทุกที่
ถ้าจะจำแค่ตัวเลขเดียว ให้จำตัวเลขนี้:
| คุณสมบัติ | ค่าที่แนะนำ |
|---|---|
| ขนาด | 1200 × 630 px |
| สัดส่วนภาพ | 1.91:1 |
| ฟอร์แมต | PNG หรือ JPG |
| ขนาดไฟล์ | ต่ำกว่า 1 MB (ขีดจำกัดจริงสูงกว่านี้ แต่ไฟล์ยิ่งเล็กยิ่งโหลดเร็ว) |
| URL | URL แบบ absolute ที่เป็น HTTPS |
แพลตฟอร์มหลักทุกเจ้าใช้สัดส่วน 1.91:1 เป็นค่าเริ่มต้น หรือไม่ก็ครอปจากสัดส่วนนี้ได้อย่างสวยงาม การออกแบบที่ 1200×630 พอดีจึงหมายความว่าคุณสร้างรูปแค่หนึ่งรูปต่อหน้า ไม่ใช่ห้ารูป
ขนาด OG image แยกตามแพลตฟอร์ม
แต่ละแพลตฟอร์มมีขนาดที่ชอบและเกณฑ์ที่บังคับต่างกันเล็กน้อย:
| แพลตฟอร์ม | ขนาดที่แนะนำ | หมายเหตุ |
|---|---|---|
| 1200 × 630 | ขั้นต่ำ 200×200 รูปที่เล็กกว่า 600×315 จะแสดงเป็นภาพขนาดย่อเล็ก ๆ แทนที่จะเป็นการ์ดใหญ่ | |
| X (Twitter) | 1200 × 630 | การ์ด summary_large_image จะถูกครอปเข้าใกล้ 2:1 — วางเนื้อหาสำคัญไว้ตรงกลาง |
| 1200 × 627 | 1.91:1 ในทางปฏิบัติใช้รูปเดียวกับ Facebook ได้เลย | |
| Discord | 1200 × 630 | ใช้ og:image สำหรับ embed ลิงก์ขนาดใหญ่ |
| Slack | 1200 × 630 | ตัวอย่างลิงก์ (unfurl) ใช้ Open Graph tag โดยตรง |
| 1200 × 630 | รักษาไฟล์ให้เล็ก (ควรต่ำกว่า 300 KB มาก) ไม่อย่างนั้นตัวอย่างอาจไม่โหลด | |
| Telegram | 1200 × 630 | อ่าน og:image และแคชไว้นานมาก |
| 1000 × 1500 | ข้อยกเว้นเดียว — Pin ชอบภาพแนวตั้ง 2:3 จึงควรใช้รูปเฉพาะสำหรับ Pinterest |
สรุปคือ นอกจาก Pinterest แล้ว รูป 1200×630 รูปเดียวครอบคลุมได้ทุกอย่าง
Safe zone: ข้อความของคุณควรอยู่ตรงไหน
แต่ละแพลตฟอร์มครอปไม่เหมือนกัน — X เอียงไปทาง 2:1 ส่วนเลย์เอาต์มือถือบางแบบก็เฉือนขอบออก เพื่อให้หัวเรื่องอ่านได้ในทุกที่:
- วางข้อความและโลโก้ทั้งหมดไว้ใน พื้นที่ตรงกลางขนาด 1120 × 560 (เว้นขอบประมาณ 5% ในแต่ละด้าน)
- ให้ถือว่าขอบด้านนอกอาจถูกครอปเสมอ — อย่าวางเนื้อหาสำคัญชิดขอบเด็ดขาด
- ทดสอบด้วยหัวเรื่องจริงในขนาดจริง: ข้อความที่ดูโอเคในเครื่องมือออกแบบมักเล็กเกินไปเมื่อแสดงในฟีด กฎง่าย ๆ คือใช้หัวเรื่องขนาด 48px ขึ้นไป บนแคนวาส 1200×630
เทมเพลตฟรี ของเราฝังระยะขอบเหล่านี้ไว้ให้แล้ว ทุกอย่างที่คุณพิมพ์จึงอยู่ใน safe zone เสมอ
ขนาดไฟล์ ฟอร์แมต และความละเอียด
- ฟอร์แมต: ใช้ PNG สำหรับกราฟิกที่มีข้อความเยอะ (ขอบคมชัด) และ JPG สำหรับพื้นหลังที่เป็นภาพถ่าย ปัจจุบัน WebP ใช้ได้บนแพลตฟอร์มหลักแล้ว แต่ PNG/JPG ยังปลอดภัยที่สุดสำหรับแอปกลุ่ม long tail
- ขนาดไฟล์: Facebook อนุญาตสูงสุด 8 MB และ X สูงสุด 5 MB — แต่ crawler จะหมดเวลารอกับรูปที่โหลดช้า เป้าหมายที่ใช้ได้จริงคือต่ำกว่า 1 MB (และต่ำกว่า 300 KB เพื่อความเสถียรบน WhatsApp)
- ความละเอียด: 1200×630 ที่ 1x ก็เพียงพอ การขยายสองเท่าแบบ Retina เป็น 2400×1260 แทบไม่ช่วยให้การแสดงผลในฟีดดีขึ้น แถมยังทำให้ไฟล์ใหญ่ขึ้นเท่าตัว
Meta tag ที่ทำให้ทุกอย่างทำงาน
ขนาดเป็นแค่ครึ่งเดียวของงาน — แพลตฟอร์มหารูปของคุณผ่าน Open Graph meta tag ใน <head> ของหน้าเว็บ:
<meta property="og:image" content="https://example.com/og/launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Launch day: v2.0 — changelog" />
<meta name="twitter:card" content="summary_large_image" />มีรายละเอียดสามข้อที่สำคัญกว่าที่เห็น:
og:imageต้องเป็น URL แบบ absolute ที่เป็น HTTPS — path แบบ relative จะล้มเหลวเงียบ ๆ บน crawler ส่วนใหญ่og:image:widthและog:image:heightช่วยให้แพลตฟอร์มจองพื้นที่ที่ถูกต้องได้ ก่อน ดาวน์โหลดรูป การแชร์ครั้งแรกจึงแสดงเป็นการ์ดเต็มใบแทนที่จะเป็นการ์ดว่างเปล่า- การตั้ง
twitter:cardเป็นsummary_large_imageคือสิ่งที่อัปเกรดตัวอย่างบน X จากสี่เหลี่ยมเล็ก ๆ ให้กลายเป็นการ์ดเต็มความกว้าง
ข้อผิดพลาดที่พบบ่อย (พร้อมวิธีแก้แบบเร็ว)
- รูปเล็กกว่า 600×315 Facebook จะลดชั้นให้เป็นภาพขนาดย่อเล็ก ๆ ด้านข้าง ให้ส่งออกที่ 1200×630
- ข้อความชิดขอบ การครอปของ X จะตัดข้อความออก วางข้อความไว้ใน safe zone ตรงกลาง
- ตัวอย่างแสดงรูปเก่า แพลตฟอร์มแคชไว้นานมาก — ดูวิธีแก้ได้ในคู่มือการพรีวิวและรีเฟรช OG image ของเรา
- URL เป็นแบบ relative หรืออยู่หลังระบบล็อกอิน crawler ดึง
/images/og.pngหรืออะไรก็ตามที่ต้องล็อกอินไม่ได้ ให้ใช้ URL แบบ absolute ที่เข้าถึงได้แบบสาธารณะ - ใช้รูปกลาง ๆ รูปเดียวทั้งเว็บไซต์ หน้าที่มี OG image เฉพาะเจาะจงและเกี่ยวข้องกับเนื้อหา ได้คลิกมากกว่าการ์ดโลโก้ที่ใช้ซ้ำอย่างสม่ำเสมอ
สร้าง OG image ขนาดถูกต้องได้ในไม่กี่วินาที
คุณจะตั้งค่า artboard ขนาด 1200×630 เส้นไกด์ safe zone และพรีเซ็ตการส่งออกด้วยตัวเองก็ได้ — หรือจะข้ามขั้นตอนทั้งหมดนี้ไปเลยก็ได้ เครื่องมือสร้าง OG image ฟรี ของเราเริ่มจากเทมเพลตที่ตั้งขนาดไว้แล้วที่ 1200×630 (และ 1500×500 สำหรับ header ของ X) คอยรักษาข้อความให้อยู่ใน safe zone และส่งออก PNG ที่ปรับให้เหมาะสม พร้อมใช้กับ meta tag ของคุณทันที ไม่ต้องสมัครสมาชิก ไม่มีลายน้ำ
คำถามที่พบบ่อย
ขนาด OG image ที่ดีที่สุดคือเท่าไร?
1200×630 พิกเซล (สัดส่วนภาพ 1.91:1) จะแสดงเป็นการ์ดขนาดใหญ่บน Facebook, X, LinkedIn, Slack, Discord, WhatsApp และ Telegram โดยไม่ต้องทำรูปเวอร์ชันอื่นเพิ่ม
ขนาด OG image ขั้นต่ำคือเท่าไร?
Facebook รับรูปเล็กสุดที่ 200×200 แต่รูปที่เล็กกว่า 600×315 จะเสียเลย์เอาต์แบบการ์ดใหญ่ไป ให้ถือว่า 600×315 คือพื้นต่ำสุดในทางปฏิบัติ — และ 1200×630 คือเป้าหมาย
ควรใช้รูปแยกสำหรับ X (Twitter) ไหม?
ส่วนใหญ่ไม่จำเป็น รูป 1200×630 ที่วางเนื้อหาไว้ตรงกลางใช้ได้กับการ์ด summary_large_image เพิ่มรูปเฉพาะสำหรับ X ก็ต่อเมื่อดีไซน์ของคุณวางเนื้อหาสำคัญไว้ใกล้ขอบบนหรือขอบล่างเท่านั้น
OG image มีผลต่อ SEO ไหม?
ไม่ได้มีผลต่ออันดับโดยตรง — แต่มีผลอย่างมากต่ออัตราการคลิกเมื่อลิงก์ของคุณถูกแชร์ และการกระจายบนโซเชียลก็ช่วยให้คอนเทนต์ถูกค้นพบ ตัวอย่างลิงก์ที่ชัดเจนและสื่อถึงแบรนด์คือหนึ่งในวิธีเพิ่ม CTR ที่ถูกที่สุดเท่าที่มี
