วิธีใช้งาน
- ป้อน og:title และ og:description ที่คุณใช้อยู่หรือวางแผนจะใช้บนหน้าเว็บ
- วาง URL เต็มของ og:image เครื่องมือจะโหลดรูปและรายงานขนาดพิกเซลจริง
- เพิ่ม URL หรือโดเมนของหน้าเว็บ แล้วเปรียบเทียบตัวอย่างการ์ดขนาดใหญ่และเล็ก และแก้ไขคำเตือนที่พบ
วิธีการทำงาน
เมื่อมีคนแชร์ลิงก์ โซเชียลเน็ตเวิร์กและแอปแชทส่วนใหญ่จะดึงหน้าเว็บและอ่านแท็ก Open Graph ได้แก่ og:title, og:description, og:image และ og:url จากนั้นจึงสร้างการ์ดขึ้นมา ภาพกว้างในอัตราส่วนประมาณ 1.91:1 มักจะทำให้ได้การ์ดขนาดใหญ่โดยมีภาพอยู่ด้านบน ส่วนภาพเล็กหรือสี่เหลี่ยมจัตุรัสมักได้การ์ดแบบกะทัดรัดพร้อมภาพขนาดย่อข้างข้อความ
เครื่องมือนี้แสดงรูปแบบการ์ดทั่วไปสองแบบเพื่อช่วยให้คุณประเมินความยาวของข้อความและการจัดวางภาพ โดยจะตรวจสอบขนาดจริงของภาพหลังจากเบราว์เซอร์โหลดเสร็จ: ภาพเล็กกว่า 200 × 200 px แอปส่วนใหญ่มักไม่แสดงภาพ ภาพเล็กกว่า 600 × 315 px มักใช้เลย์เอาต์แบบเล็ก และอัตราส่วนที่ต่างจาก 1.91:1 มากจะถูกครอบตัด ขนาด 1200 × 630 px เป็นขนาดที่แนะนำกันอย่างแพร่หลายเพราะยังคมชัดบนหน้าจอความหนาแน่นสูง
ตัวอย่างนี้ไม่สามารถแสดงผลได้เหมือนกับที่แอปใดแอปหนึ่งจะแสดงจริง แอปต่างกันที่จำนวนบรรทัดของชื่อและคำอธิบายที่แสดง บางแอปไม่แสดงคำอธิบาย และส่วนใหญ่จะแคชตัวอย่างไว้ชั่วระยะหนึ่งหลังจากการแชร์ครั้งแรก ดังนั้นการเปลี่ยนแปลงแท็กของคุณอาจยังไม่ปรากฏทันที หลายแพลตฟอร์มมีเครื่องมือแก้ไขข้อบกพร่องของตัวเองสำหรับรีเฟรชแคชดังกล่าว
ตัวอย่าง
ภาพหน้าจอที่ใช้เป็น og:image
ภาพหน้าจอขนาด 1440 × 900 มีอัตราส่วน 1.6:1 เครื่องมือจะเตือนเรื่องอัตราส่วนนี้ เพราะในการ์ดขนาดใหญ่ ส่วนบนและล่างจะถูกครอบตัด การส่งออกเป็นเวอร์ชัน 1200 × 630 จะช่วยหลีกเลี่ยงปัญหา
โลโก้ที่เป็นภาพเพียงภาพเดียว
โลโก้ขนาด 180 × 180 ต่ำกว่า 200 × 200 px แอปจำนวนมากจึงไม่แสดงภาพ ให้ใช้แบนเนอร์แนวกว้างขนาดใหญ่กว่าที่มีโลโก้อยู่ภายในแทน
ตรวจสอบความยาวของชื่อ
og:title ความยาว 90 ตัวอักษรจะตัดขึ้นบรรทัดใหม่เป็นสามบรรทัดในตัวอย่างการ์ดขนาดใหญ่ การย่อให้เหลือประมาณ 60 ตัวอักษรจะช่วยให้การ์ดดูเรียบร้อยในแอปส่วนใหญ่
คำถามที่พบบ่อย
ทำไมลิงก์ของฉันจึงดูแตกต่างกันบน Facebook, LinkedIn และ X
แต่ละแพลตฟอร์มแสดงการ์ดด้วยเลย์เอาต์ การครอบตัด และขีดจำกัดข้อความของตัวเอง และบางแพลตฟอร์มแสดงคำอธิบายในขณะที่บางแพลตฟอร์มไม่แสดง ตัวอย่างนี้เป็นเพียงการประมาณแบบทั่วไป ไม่ใช่การเลียนแบบดีไซน์ของแพลตฟอร์มใดแพลตฟอร์มหนึ่ง
เปลี่ยน og:image แล้ว แต่รูปเก่ายังแสดงอยู่ เพราะอะไร
แพลตฟอร์มจะแคชตัวอย่างลิงก์ไว้ ลองใช้เครื่องมือดีบักการแชร์ของแพลตฟอร์มนั้นเพื่อดึงหน้าใหม่ หรือรอให้แคชหมดอายุ การเปลี่ยนชื่อไฟล์รูปก็ช่วยได้เช่นกัน
ใช้รูป SVG หรือ WebP ได้ไหม
แพลตฟอร์มส่วนใหญ่ไม่รองรับ SVG ส่วน WebP ใช้ได้ในหลายแอปแต่ไม่ทั้งหมด JPG หรือ PNG เป็นตัวเลือกที่ปลอดภัยที่สุด
ทำไมเครื่องมือจึงโหลดรูปของฉันไม่ได้
URL นั้นอาจต้องล็อกอิน ชี้ไปยังหน้า HTML แทนที่จะเป็นรูป หรือเซิร์ฟเวอร์อาจบล็อกคำขอจากเว็บอื่น ถ้าเบราว์เซอร์โหลดที่นี่ไม่ได้ บอตของแพลตฟอร์มโซเชียลก็อาจโหลดไม่ได้เช่นกัน
ความเป็นส่วนตัว
ข้อความที่คุณป้อนจะอยู่ในเบราว์เซอร์ของคุณเท่านั้น ในการตรวจสอบรูป เบราว์เซอร์จะร้องขอรูปโดยตรงจาก URL ที่คุณป้อน (โดยไม่ส่ง referrer) เซิร์ฟเวอร์ปลายทางจึงเห็นเป็นคำขอรูปตามปกติ ไม่มีข้อมูลใดถูกส่งไปยัง TIG Tools