แท็ก Open Graph อธิบาย: วิธีการสร้างตัวอย่างลิงก์บนโซเชียลมีเดีย

เมื่อใดก็ตามที่คุณแชร์ลิงก์เว็บในโพสต์บน Facebook วางบทความลงในกลุ่ม Telegram หรือ DM หน้าผลิตภัณฑ์ให้เพื่อนบน Twitter คุณคาดหวังที่จะเห็นการ์ดแสดงตัวอย่างภาพที่สวยงามปรากฏขึ้น การ์ดดังกล่าวซึ่งประกอบด้วยภาพแบนเนอร์ที่คมชัด หัวเรื่องที่น่าสนใจ และบทสรุปที่กระชับ ไม่ได้เกิดขึ้นโดยบังเอิญ สร้างขึ้นผ่านข้อกำหนดเว็บมาตรฐานที่เรียกว่า โปรโตคอล Open Graph แต่หากโค้ดเว็บไซต์ของคุณขาดเมตาแท็กเหล่านี้ แพลตฟอร์มโซเชียลจะแสดงกล่องสีเทาที่น่าเกลียดและเสียหาย หรือเลือกภาพขนาดย่อแบบสุ่มจากเพจของคุณ การเรียนรู้กลไก แท็กกราฟแบบเปิด ถือเป็นสิ่งสำคัญสำหรับนักพัฒนาเว็บและนักการตลาดทางเทคนิค

โปรโตคอล Open Graph เปิดตัวครั้งแรกโดย Facebook ในปี 2010 ได้รับการออกแบบมาเพื่อรวมหน้าเว็บภายนอกเข้ากับเครือข่ายกราฟโซเชียล ก่อน Open Graph เครือข่ายโซเชียลจะต้องเดาว่าบทความเกี่ยวกับอะไรโดยการคัดลอกข้อความย่อหน้าดิบและสแกนแท็กรูปภาพ HTML ซึ่งมักส่งผลให้เกิดการแสดงตัวอย่างภาพที่น่าอับอาย ปัจจุบัน Open Graph ได้กลายเป็นมาตรฐานอินเทอร์เน็ตสากลที่สนับสนุนโดย LinkedIn, Pinterest, Twitter, Telegram, Discord, Slack และ WhatsApp ในการเจาะลึกด้านเทคนิคนี้ คุณจะได้เรียนรู้ไวยากรณ์ที่แน่นอนสำหรับแท็ก OG หลัก ทำความเข้าใจข้อกำหนดด้านขนาดรูปภาพ และค้นพบวิธีแก้ไขข้อบกพร่องและเพิ่มประสิทธิภาพการ์ดแสดงตัวอย่างเพื่อการมีส่วนร่วมทางสังคมสูงสุด

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

นอกเหนือจากฟีดโซเชียลมีเดียสาธารณะ แท็ก Open Graph ยังควบคุมวิธีที่ลิงก์แสดงผลภายในซอฟต์แวร์การทำงานร่วมกันแบบส่วนตัวและเครื่องมือส่งข้อความในทีม เช่น Slack, Microsoft Teams และ Discord เมื่อสมาชิกในทีมวาง URL ของคุณลงในช่องทาง Slack ของบริษัทหรือเซิร์ฟเวอร์ Discord ของนักพัฒนา บอทภายในของแอปพลิเคชันจะแยกวิเคราะห์ข้อมูลเมตา Open Graph ของคุณแบบเรียลไทม์ โดยแสดงพาดหัว ภาพขนาดย่อ และตัวอย่างข้อมูลสรุปของคุณโดยตรงในสตรีมแชท ข้อมูลเมตาคุณภาพสูงช่วยให้แน่ใจว่าผู้มีส่วนได้ส่วนเสียภายในและสมาชิกชุมชนมีส่วนร่วมกับลิงก์ของคุณทันที

โปรโตคอล Open Graph คืออะไร?

โปรโตคอล Open Graph คือชุดของเมตาแท็กที่มีโครงสร้างซึ่งนักพัฒนาเว็บวางไว้ภายในส่วน <head> ของเอกสาร HTML เมื่อโปรแกรมรวบรวมข้อมูลอัตโนมัติ (เช่น facebookexternalhit หรือ TelegramBot) เข้าชมเพจของคุณ โปรแกรมจะแยกวิเคราะห์แท็กเหล่านี้เพื่อสร้างออบเจ็กต์การแสดงตัวอย่างแบบโต้ตอบ

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

แท็ก Open Graph หลักที่คุณต้องรวมไว้

หน้าเว็บสาธารณะทุกหน้าควรมีแท็ก Open Graph พื้นฐานสี่แท็กเพื่อให้แน่ใจว่าการแสดงผลจะสอดคล้องกันในทุกแพลตฟอร์มหลัก:

ตรวจสอบให้แน่ใจเสมอว่า og:url ตรงกับแท็กลิงก์ตามรูปแบบบัญญัติของคุณ เพื่อป้องกันไม่ให้จำนวนการโต้ตอบทางสังคมและสัญญาณลิงก์ย้อนกลับกระจัดกระจายในรูปแบบต่างๆ ของ URL

การเพิ่มประสิทธิภาพรูปภาพ Open Graph สำหรับจอแสดงผลสมัยใหม่

รูปภาพถือเป็นองค์ประกอบที่สำคัญที่สุดของการ์ดแสดงตัวอย่างใดๆ เพื่อให้มั่นใจว่ากราฟิกของคุณจะเรนเดอร์ด้วยความคมชัดสูงสุดบนหน้าจอสมาร์ทโฟนที่มีความละเอียดสูงสมัยใหม่ ให้ปฏิบัติตามข้อกำหนดทางเทคนิคเหล่านี้:

• ความละเอียดมาตรฐาน (1.91:1): ใช้ 1200x630 พิกเซล นี่คือมาตรฐานสากลสำหรับการ์ดข้อมูลสรุปของ Facebook, LinkedIn และ Twitter
• ทางเลือกจอกว้าง (16:9): 1200x675 พิกเซล ถูกนำมาใช้กันอย่างแพร่หลายสำหรับเนื้อหาวิดีโอ การแชร์ YouTube และบล็อกที่ตอบสนองสมัยใหม่
• ประกาศขนาดอย่างชัดเจน: ใส่ <meta property="og:image:width" content="1200" /> และ <meta property="og:image:height" content="630" /> เสมอ ซึ่งช่วยให้โปรแกรมรวบรวมข้อมูลทางสังคมสามารถแสดงผลเค้าโครงการ์ดได้ทันทีในระหว่างการคัดลอกครั้งแรก โดยไม่ต้องดาวน์โหลดและคำนวณขนาดรูปภาพแบบอะซิงโครนัส
• ข้อจำกัดขนาดไฟล์: รักษาขนาดไฟล์ให้ไม่เกิน 5MB โปรแกรมขูดโซเชียลส่วนใหญ่จะยกเลิกการดาวน์โหลดรูปภาพที่มีขนาดเกิน 5MB เพื่อรักษาแบนด์วิธเครือข่าย
• ข้อความสำคัญตรงกลาง: แพลตฟอร์มโซเชียลจะครอบตัดกราฟิกตัวอย่างบนฟีดบนมือถือแตกต่างกับแถบด้านข้างของเดสก์ท็อป รักษาโลโก้ที่สำคัญ ส่วนหัวของข้อความ และใบหน้าให้อยู่ตรงกลาง "โซนปลอดภัย" ตรงกลางของรูปภาพ

การ์ด Twitter กับ Open Graph: โต้ตอบกันอย่างไร

Twitter (X) ยังคงรักษามาร์กอัปข้อมูลเมตาที่เป็นกรรมสิทธิ์ของตนเองที่เรียกว่า การ์ด Twitter แต่ยังสนับสนุนทางเลือก Open Graph แบบดั้งเดิมอีกด้วย

เพื่อให้แน่ใจว่าลิงก์ของคุณจะแสดงเป็นการ์ดภาพขนาดใหญ่และน่าดึงดูดบน Twitter แทนที่จะเป็นภาพขนาดย่อสี่เหลี่ยมจัตุรัสเล็กๆ ให้รวมแท็ก Twitter เฉพาะเหล่านี้ไว้ข้างแท็ก Open Graph ของคุณ:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Catchy Headline" />
<meta name="twitter:description" content="Engaging summary snippet." />
<meta name="twitter:image" content="https://yourbrand.com/images/og-image.jpg" />

จำเป็นต้องตั้งค่า twitter:card เป็น summary_large_image หากคุณต้องการดูตัวอย่างภาพแบบเต็มความกว้าง หากละไว้ Twitter จะใช้ค่าเริ่มต้นเป็นตัวอย่างข้อความเท่านั้นที่ดึงดูดการคลิกได้น้อยกว่ามาก

ผู้เผยแพร่โฆษณาขั้นสูงควรใช้คุณสมบัติ Open Graph เพิ่มเติม เช่น og:locale และ article:published_time การประกาศ og:locale แจ้งให้โปรแกรมรวบรวมข้อมูลทราบถึงภาษาหลักและการจัดรูปแบบภูมิภาคของเนื้อหา ในขณะที่การประทับเวลาการเผยแพร่ช่วยให้เครื่องมือค้นหาเนื้อหา เช่น Google Discover จดจำการรายงานด้านบรรณาธิการที่สดใหม่ได้

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

คุณยังสามารถสำรวจว่าแท็ก Open Graph โต้ตอบกับโดเมนย่อยของแบรนด์อย่างไรในคำแนะนำของเราเกี่ยวกับ โดเมนย่อยของแบรนด์

การทดสอบ ตรวจสอบ และแก้ไขปัญหาแท็กแสดงตัวอย่าง

ก่อนที่จะเปิดตัวแคมเปญการตลาดหรือแชร์ลิงก์ต่อสาธารณะ โปรดตรวจสอบแท็ก Open Graph ของคุณโดยใช้ชุดการแก้ไขข้อบกพร่องแพลตฟอร์มอย่างเป็นทางการเสมอ:

• ดีบักเกอร์การแบ่งปัน Meta: วาง URL ของคุณเพื่อดูตัวอย่างการ์ด Facebook ตรวจสอบคำเตือนแท็ก และบังคับให้รีเฟรชแคชของโปรแกรมรวบรวมข้อมูลตามที่กล่าวไว้ในคำแนะนำของเราเกี่ยวกับ การแก้ไขภาพตัวอย่างที่ไม่ถูกต้อง
• Telegram @WebpageBot: ส่งลิงก์ของคุณไปยังบอทที่ได้รับการตรวจสอบภายใน Telegram เพื่อตรวจสอบการแสดงตัวอย่างบนมือถือ และล้างกราฟิกแคชเก่า
• ตัวตรวจสอบโพสต์ของ LinkedIn: ล้างแคชตัวอย่างลิงก์เจ็ดวันของ LinkedIn และรายงานช่องข้อมูลเมตาที่ขาดหายไป
• การตรวจสอบลิงก์อัตโนมัติ: ตรวจสอบการเปลี่ยนเส้นทาง ใบรับรอง SSL และรหัสสถานะโดยใช้เครื่องมือตรวจสอบลิงก์ฟรีของเรา

ด้วยการใช้เมตาดาต้า Open Graph ที่สมบูรณ์และตรวจสอบการแสดงตัวอย่างบนทุกแพลตฟอร์มหลัก คุณมั่นใจได้ว่าเว็บลิงก์ของคุณโดดเด่นในฟีดที่มีผู้คนหนาแน่นและกระตุ้นการมีส่วนร่วมสูงสุด

คำถามที่พบบ่อย