เครื่องมือแสดงตัวอย่าง Open Graph
EXAMPLE WEBSITE
ตัวอย่างชื่อหน้า
นี่คือตัวอย่างคำอธิบายของเนื้อหาหน้าที่จะปรากฏเมื่อแชร์บนโซเชียลมีเดีย
https://example.com/page
ตัวอย่างชื่อหน้า
นี่คือตัวอย่างคำอธิบายของเนื้อหาหน้าที่จะปรากฏเมื่อแชร์บนโซเชียลมีเดีย
example.com
websiteวิธีใช้ Open Graph Previewer
- 1
ป้อน URL ของหน้า
วาง URL แบบเต็มของหน้าที่คุณต้องการตรวจลงในช่อง URL ของเว็บไซต์
- 2
ดึงข้อมูล OG
คลิก "ดึงข้อมูล OG" เพื่อดึง Open Graph title, description, รูปภาพ และชื่อเว็บไซต์ที่มีอยู่ของหน้านั้น
- 3
แก้ไขด้วยตนเองหากจำเป็น
สลับไป "แก้ไขด้วยตนเอง" เพื่อปรับชื่อ คำอธิบาย URL รูปภาพ ประเภท และช่องอื่น ๆ และดูตัวอย่างอัปเดต
- 4
ดูตัวอย่างและคัดลอกแท็ก
ตรวจดูตัวอย่างการ์ด Facebook และ Twitter จากนั้นคัดลอก meta tag ที่สร้างขึ้นเพื่อเพิ่มลงในหน้าของคุณ
คู่มือฉบับสมบูรณ์ว่าด้วย Open Graph และตัวอย่างลิงก์
โปรโตคอล Open Graph คืออะไร
โปรโตคอล Open Graph คือชุด meta tag เล็ก ๆ ที่ Facebook นำมาใช้เป็นเจ้าแรก ซึ่งช่วยให้หน้าเว็บใด ๆ อธิบายตัวเองเป็นอ็อบเจ็กต์ที่สมบูรณ์เมื่อถูกแชร์ แทนที่จะเป็นลิงก์สีน้ำเงินเปล่า ๆ หน้าที่มีแท็ก Open Graph จะกลายเป็นการ์ดที่มีพาดหัว บทสรุป และรูปภาพขนาดใหญ่ แท็กเหล่านี้อยู่ในส่วน head ของหน้าและใช้แอตทริบิวต์ property ที่มีคำนำหน้า og เช่น og:title และ og:image จับคู่กับแอตทริบิวต์ content ที่บรรจุค่าไว้ เพราะมาตรฐานนี้ถูกนำไปใช้อย่างกว้างขวาง แท็ก og ชุดเดียวกันจึงขับเคลื่อนตัวอย่างในที่ต่าง ๆ มากกว่าแค่ Facebook ในตอนนี้
Open Graph เป็นเรื่องของการนำเสนอในบริบทของโซเชียลและการส่งข้อความล้วน ๆ มันไม่มีผลโดยตรงต่ออันดับการค้นหา แต่มีผลอย่างมากต่อการคลิกเข้าชมและการแชร์ เพราะการ์ดที่น่าสนใจจะถูกคลิกและแชร์ต่อ ในขณะที่การ์ดที่เรียบ ๆ หรือเสียหายจะถูกเลื่อนผ่านไป
แท็ก Open Graph หลัก
มีห้าพร็อพเพอร์ตี้ที่ทำงานส่วนใหญ่ og:title คือพาดหัวของการ์ดและสามารถต่างจากแท็ก title ใน HTML ของคุณได้ ช่วยให้คุณเขียนถ้อยคำที่ปรับให้เหมาะกับการแชร์ og:description คือบรรทัดเสริมที่อยู่ใต้มัน og:image คือรูปย่อ และมันแบกน้ำหนักทางสายตามากที่สุดอย่างเทียบไม่ติด og:url คือ URL แบบ canonical ที่การ์ดควรชี้ไป ซึ่งช่วยรวมการแชร์ไว้ที่ที่อยู่เดียวแม้เนื้อหาเดียวกันจะเข้าถึงได้ผ่านหลาย URL og:type อธิบายอ็อบเจ็กต์ โดยทั่วไปเป็น website สำหรับหน้าทั่วไปหรือ article สำหรับบล็อกโพสต์หรือข่าว
พร็อพเพอร์ตี้เพิ่มเติมช่วยปรับแต่งผลลัพธ์ og:site_name ติดป้ายแหล่งที่มา og:locale ประกาศภาษา และสำหรับรูปภาพ og:image:width และ og:image:height ช่วยให้แพลตฟอร์มจัดวางการ์ดได้ก่อนที่รูปภาพจะดาวน์โหลดเสร็จ การกรอกข้อมูลเหล่านี้ทำให้ได้ตัวอย่างที่เชื่อถือได้มากขึ้นและแสดงผลเร็วขึ้น
Twitter Card และวิธีที่ X อ่านแท็กของคุณ
X ใช้แท็ก twitter card ของตัวเอง แต่มันก็ผ่อนปรน หากไม่มีแท็กเฉพาะของ Twitter มันจะใช้แท็ก Open Graph ของคุณแทน แท็กสำคัญคือ twitter:card ที่ซึ่ง summary_large_image ให้เลย์เอาต์รูปภาพขนาดใหญ่ที่แบรนด์ส่วนใหญ่ต้องการ ในขณะที่ summary ให้รูปย่อขนาดเล็กกว่าข้างข้อความ คุณยังตั้ง twitter:title, twitter:description, twitter:image และ twitter:site เพื่อแทนที่ค่า Open Graph เฉพาะสำหรับ X ได้เมื่อต้องการใช้ถ้อยคำที่ต่างออกไปที่นั่น
ในทางปฏิบัติ กลยุทธ์ที่ดีคือตั้งแท็ก Open Graph ให้ครบถ้วนเพื่อความครอบคลุมในวงกว้าง แล้วเพิ่มเพียง twitter:card เพื่อเลือกใช้เลย์เอาต์รูปภาพขนาดใหญ่ โดยปล่อยให้ X สืบทอดที่เหลือจาก Open Graph วิธีนี้หลีกเลี่ยงการดูแลแท็กสองชุดที่เกือบเหมือนกัน ในขณะที่ยังได้การ์ดที่สมบูรณ์กว่าบน X
ข้อกำหนดของรูปภาพที่ชี้เป็นชี้ตายการ์ด
og:image คือจุดที่ตัวอย่างส่วนใหญ่สำเร็จหรือล้มเหลว ขนาดที่แนะนำกันอย่างกว้างขวางคือ 1200 คูณ 630 พิกเซล ซึ่งเป็นอัตราส่วนราว 1.91 ต่อ 1 ที่เติมการ์ดรูปภาพขนาดใหญ่ได้อย่างสะอาดบน Facebook, LinkedIn และ X โดยไม่ถูกครอบตัด จงใช้ URL แบบเต็มที่เข้าถึงได้แบบสาธารณะซึ่งขึ้นต้นด้วย https พาธแบบสัมพัทธ์อย่าง /images/card.png เป็นเหตุผลอันดับหนึ่งที่รูปย่อไม่ปรากฏ เพราะตัวกวาดข้อมูลไม่มี URL ฐานให้ใช้แปลงพาธนั้น เก็บขนาดไฟล์ให้ต่ำกว่าสองสามร้อยกิโลไบต์ และหลีกเลี่ยงการวางข้อความสำคัญไว้ใกล้ขอบ เพราะแต่ละแพลตฟอร์มครอบตัดต่างกันเล็กน้อย
แต่ละแพลตฟอร์มยังบังคับใช้ค่าต่ำสุดและสูงสุดของตัวเอง รูปภาพที่เล็กเกินไปจะถูกลดเหลือรูปย่อจิ๋วหรือไม่มีรูปเลย และไฟล์ที่ใหญ่มากอาจถูกข้ามไป การยึดมั่นกับไฟล์ JPEG หรือ PNG ขนาด 1200 คูณ 630 เพียงไฟล์เดียวที่ส่งผ่าน HTTPS เป็นตัวเลือกที่ปลอดภัยที่สุดสำหรับการแสดงผลที่สม่ำเสมอทุกที่
Facebook, LinkedIn, Discord และ Slack แสดงตัวอย่างอย่างไร
เมื่อลิงก์ถูกวางลงในแพลตฟอร์มเหล่านี้ แพลตฟอร์มจะส่งบอตตัวกวาดข้อมูลของตัวเองไปดึงหน้าและอ่านส่วน head ก่อนแสดงการ์ด Facebook ใช้ facebookexternalhit ส่วน Slack และ Discord มีบอตของตัวเอง และแต่ละตัวจะแยกวิเคราะห์แท็ก og เพื่อสร้างตัวอย่าง นั่นหมายความว่าตัวอย่างสะท้อนสิ่งที่ตัวกวาดข้อมูลเห็นฝั่งเซิร์ฟเวอร์ ซึ่งอาจต่างจากสิ่งที่ผู้ใช้ที่ล็อกอินแล้วเห็น โดยเฉพาะบนหน้าที่ต้องล็อกอินหรือแสดง meta tag ด้วย JavaScript หลังโหลด
เนื่องจากการแสดงผลเกิดขึ้นฝั่งบอต จึงมีสองสิ่งที่สำคัญ ประการแรก แท็ก og ของคุณต้องปรากฏใน HTML เริ่มต้นที่เซิร์ฟเวอร์ส่งกลับมา ไม่ใช่ถูกแทรกเข้ามาทีหลังโดยสคริปต์ฝั่งไคลเอนต์ที่ตัวกวาดข้อมูลอาจไม่รัน ประการที่สอง หน้าต้องเข้าถึงได้โดยบอตโดยไม่ต้องยืนยันตัวตน มิฉะนั้นตัวกวาดข้อมูลจะเจอกำแพงล็อกอินแทนเนื้อหาของคุณ และตัวอย่างจะกลับมาว่างเปล่า
การแคช ตัวดีบัก และการบังคับให้กวาดข้อมูลใหม่
แพลตฟอร์มโซเชียลแคชตัวอย่างที่มันกวาดมาอย่างจริงจัง บางครั้งนานหลายวัน นี่คือต้นตอของคำบ่นคลาสสิกที่ว่าแท็ก Open Graph ที่อัปเดตแล้วไม่ปรากฏ แพลตฟอร์มยังคงให้บริการเวอร์ชันที่แคชไว้ก่อนที่คุณจะเปลี่ยน วิธีแก้คือใช้เครื่องมือดีบักของแพลตฟอร์มเองเพื่อบังคับให้กวาดข้อมูลใหม่ Sharing Debugger ของ Facebook, Post Inspector ของ LinkedIn และตัวตรวจสอบการ์ดของ X ล้วนดึงหน้าอีกครั้งและแสดงให้คุณเห็นว่ามันแยกวิเคราะห์แท็กใดบ้าง ซึ่งใช้เป็นวิธีวินิจฉัยว่าทำไมการ์ดดูผิดเพี้ยนได้ด้วย
จงทำให้การกวาดข้อมูลใหม่เป็นส่วนหนึ่งของกิจวัตรการเผยแพร่ของคุณทุกครั้งที่คุณเปลี่ยนชื่อ คำอธิบาย หรือรูปภาพบน URL ที่เคยถูกแชร์ไปแล้ว หากไม่ทำ การแชร์ในช่วงแรกอาจตรึงการ์ดที่เก่าหรือเสียหายไว้ ซึ่งคงค้างอยู่นานหลังจากที่ตัวหน้าเองถูกต้องแล้ว เครื่องมือแสดงตัวอย่างนี้ช่วยให้คุณตรวจแท็กก่อนเผยแพร่ จึงต้องแก้ไขน้อยลงในภายหลัง
ข้อผิดพลาด Open Graph ที่พบบ่อยที่สุด
ความล้มเหลวที่เกิดซ้ำ ๆ คาดเดาได้ ทั้ง og:image ที่ขาดหายจนการ์ดไม่มีรูปย่อ, URL รูปภาพแบบสัมพัทธ์ที่ตัวกวาดข้อมูลแปลงไม่ได้, og:image ที่ส่งผ่าน HTTP บนหน้าที่เป็น HTTPS อยู่แล้ว (ซึ่งบางแพลตฟอร์มปฏิเสธ) และแท็กที่ถูกแทรกโดย JavaScript ที่ตัวกวาดข้อมูลไม่เคยรัน อีกอันที่พบบ่อยคือการปล่อยให้ og:url ชี้ไปยัง URL ที่ไม่ใช่ canonical หรือ URL ของสภาพแวดล้อมทดสอบ ซึ่งทำให้จำนวนการแชร์แตกออกและอาจพาผู้ใช้ไปผิดที่
ข้อผิดพลาดที่ละเอียดอ่อนกว่าคือการลืมว่า Open Graph และสนิปเพตในการค้นหาของคุณแยกจากกัน og:title และ og:description ควบคุมการ์ดโซเชียล ในขณะที่แท็ก title และ meta description ใน HTML ควบคุมผลการค้นหาของ Google และทั้งสองไม่จำเป็นต้องเหมือนกัน จงปรับแต่งแต่ละอย่างให้เหมาะกับบริบทของมัน นั่นคือกระชับและกระตุ้นความอยากรู้สำหรับการ์ดโซเชียล และชัดเจนพร้อมคำนึงถึงคีย์เวิร์ดสำหรับสนิปเพตในการค้นหา
คำถามที่พบบ่อย
แท็ก Open Graph คืออะไรและทำไมจึงสำคัญ
ตัวอย่าง Facebook และ Twitter ทำงานอย่างไร
ฉันสร้างแท็กโดยไม่มีหน้าที่มีอยู่แล้วได้ไหม
ทำไมการดึง URL อาจล้มเหลวหรือไม่คืนข้อมูล
เครื่องมือนี้ฟรีไหม และเกิดอะไรขึ้นกับ URL ที่ฉันป้อน
เครื่องมือที่เกี่ยวข้อง
ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้