เวลาคุณวางลิงก์ลงในข้อความ ทวีต โพสต์ LinkedIn หรือช่อง Slack แพลตฟอร์มจะดึงการ์ดพรีวิวขึ้นมา ทั้งรูปใหญ่ ชื่อเรื่อง และคำโปรย รูปนั้นคือ Open Graph (OG) image และมันทำงานหนักยิ่งกว่าพาดหัวของคุณเสียอีก ในฟีดที่เลื่อนผ่านอย่างรวดเร็ว รูปคือสิ่งที่หยุดนิ้วโป้งของคนดู พรีวิวที่ว่างเปล่าหรือแตกจะดูเหมือนงานลวก ๆ และถูกเลื่อนข้ามไป
นี่คือวิธีทำรูปที่คว้าคลิกมาได้ ในขนาดที่ถูกต้อง พร้อมข้อความที่อ่านออกจริง
ขนาด: 1200×630
OG image มาตรฐานคือ 1200×630 พิกเซล อัตราส่วน 1.91:1 Facebook, LinkedIn, Slack, Discord และระบบพรีวิวลิงก์ส่วนใหญ่ถูกออกแบบมารองรับขนาดนี้ ทำขนาดนี้ให้ถูก แล้วคุณก็ครอบคลุมได้เกือบทุกที่
มีขนาดใกล้เคียงอีกไม่กี่แบบที่โผล่มาขึ้นอยู่กับปลายทางของลิงก์:
| แพลตฟอร์ม / การใช้งาน | ขนาด | อัตราส่วน |
|---|---|---|
| Open Graph (ค่าเริ่มต้น) | 1200×630 | 1.91:1 |
| การ์ดใหญ่ Twitter/X | 1200×628 | ~1.91:1 |
| ภาพปก YouTube | 1280×720 | 16:9 |
| สี่เหลี่ยมจัตุรัส (ฟีด/IG) | 1080×1080 | 1:1 |
| สตอรี / แนวตั้ง | 1080×1920 | 9:16 |
คุณไม่จำเป็นต้องมีครบทุกขนาดสำหรับบทความบล็อก 1200×630 คือตัวหลักที่ใช้งานได้ทุกวัน แต่ถ้าคุณกำลังทำภาพปกวิดีโอหรือโพสต์โซเชียลแบบสี่เหลี่ยมด้วย การสร้างในสัดส่วนที่ถูกต้องตั้งแต่แรกย่อมดีกว่าไปครอปรูปเดียวให้เข้าทรงแบบพัง ๆ
กฎการวางข้อความ: อ่านออกแม้ย่อขนาดเท่าภาพย่อ
ความผิดพลาดที่ทำลาย OG image คือการมองมันเป็นโปสเตอร์ที่จะดูแบบเต็มจอ แต่คุณจะไม่ดูแบบนั้น คนส่วนใหญ่เห็นการ์ดในขนาดราวหนึ่งในสามของขนาดจริง บนมือถือ ระหว่างเลื่อนฟีด จงออกแบบเพื่อ สภาพนั้น
- ตัวอักษรใหญ่ คำน้อย ชื่อสั้น ๆ ห้าถึงแปดคำที่ยังอ่านออกเมื่อการ์ดถูกย่อ ถ้าคุณต้องหรี่ตามองตอนขนาดเต็ม มันก็อ่านไม่ออกเลยในฟีด
- คอนทราสต์จัด ตัวอักษรสว่างบนพื้นเข้มหรือพื้นสีสด หรือกลับกัน ตัวอักษรที่วางบนภาพรก ๆ โดยไม่มีพื้นรองจะกลืนหายไป
- วางของสำคัญไว้ตรงกลาง แต่ละแพลตฟอร์มครอปขอบต่างกันเล็กน้อย เก็บข้อความและโลโก้ให้ห่างจากขอบนอกไว้ ของสำคัญจะได้ไม่ถูกตัด
- หนึ่งภาพ หนึ่งความคิด OG image คือเบ็ดตกปลา ไม่ใช่บทสรุป ชื่อเรื่อง อาจมีคำโปรยรอง แค่นั้นพอ
พื้นหลังที่ทำให้ข้อความเด่น
ไล่เฉดสีเรียบ ๆ คือทางเลือกที่ไว้ใจได้ มันให้ข้อความมีที่สะอาด ๆ ให้ยืน ดูทันสมัย และไม่แย่งความเด่นกับตัวอักษรแบบที่ภาพถ่ายรก ๆ ทำ ไล่เฉดจากเข้มไปเข้มขึ้นอีกนิดพร้อมตัวอักษรสว่าง แทบจะพลาดไม่ได้เลย
เครื่องมือ OG Image ถูกสร้างมาเพื่อสิ่งนี้โดยตรง เลือกขนาดสำเร็จรูป (OG 1200×630, Twitter, YouTube, สี่เหลี่ยม หรือสตอรี) เลือกพื้นหลังไล่เฉดสี แล้วเติมชื่อและคำโปรยรอง คุณจะได้การ์ดแชร์ที่อ่านชัดในทุกขนาด โดยไม่ต้องเปิดโปรแกรมออกแบบเต็มรูปแบบ
HTML ที่ทำให้มันแสดงผล
การทำรูปเป็นแค่ครึ่งงาน แพลตฟอร์มต้องรู้ว่าจะหารูปได้ที่ไหน เพิ่มแท็กเหล่านี้ลงใน <head> ของหน้าเว็บ:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
บรรทัด twitter:card ที่ตั้งเป็น summary_large_image คือสิ่งที่ทำให้คุณได้การ์ดใหญ่บน X แทนที่จะเป็นภาพย่อจิ๋ว ๆ URL แบบเต็ม (มี https://) สำคัญมาก เพราะพาธแบบสัมพัทธ์มักไม่ทำงานตอนที่ตัวดึงข้อมูลมาอ่านหน้าเว็บของคุณ
หลังจากดีพลอยแล้ว ให้ทดสอบ วาง URL ของคุณลงในเครื่องมือดีบักพรีวิวลิงก์ของแพลตฟอร์ม (Sharing Debugger ของ Facebook, Post Inspector ของ LinkedIn) เพื่อยืนยันว่ารูปโหลดขึ้นและเคลียร์เวอร์ชันเก่าที่ถูกแคชไว้ แพลตฟอร์มแคชพรีวิวอย่างดุดัน ดังนั้นถ้าคุณอัปเดตรูปแล้วแต่ยังเห็นของเก่า ปุ่มดึงข้อมูลใหม่ในเครื่องมือดีบักคือทางแก้
สร้างมัน ไม่ใช่อัปโหลดมัน
ทั้งหมดทำงานในเบราว์เซอร์ของคุณ รูปถูกประกอบขึ้นด้วย Canvas ในเครื่องและไม่มีการอัปโหลดขึ้นเซิร์ฟเวอร์เลย มันฟรี ไม่ต้องสมัคร ไม่มีลายน้ำประทับพาดการ์ดแชร์ของคุณ และใช้งานแบบออฟไลน์ได้หลังจากเข้าครั้งแรก สร้างขนาด 1200×630 ต่อแท็ก meta ให้เรียบร้อย รันผ่านเครื่องมือดีบักสักครั้ง แล้วลิงก์ของคุณก็จะเริ่มทำหน้าที่ของมันได้เต็มที่