Open Graph Meta Tags – สิ่งที่คุณต้องรู้

คุณต้องการให้คนอื่นสังเกตเห็นโพสต์ในโซเชียลมีเดียของคุณหรือไม่?

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

Open Graph คืออะไร?

Open Graph meta tags เช่น คําอธิบายเมตาและชื่อ, จะควบคุมวิธีการเขียน URL เมื่อมีการแชร์บนโซเชียลมีเดีย

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

เหตุใดจึงต้องใช้ Open Graph?

ขณะนี้ Open Graph ได้รับการสนับสนุนในโซเชียลเน็ตเวิร์กต่างๆ เช่น:

• Facebook
• Twitter
• Pinterest
• Viber
• Telegram
• WhatsApp

ตามข้อมูลของ Google โปรโตคอลนี้ช่วยปรับปรุง “บล็อกเนื้อหาที่แนะนำ”

จะเกิดอะไรขึ้นถ้าไม่ใช้ Open Graph?

เนื่องจาก Facebook ไม่แน่ใจว่าจะแสดงอะไรในการแสดงตัวอย่าง จึงจะใช้รูปภาพที่คุณอัปโหลด (อาจใช้แบนเนอร์โฆษณาได้) ไม่มีพื้นที่ว่างในส่วนหัวอีกต่อไป

ด้วยเหตุนี้ Facebook จึงไม่สามารถระบุได้ว่า จะแสดงตัวอย่างส่วนใด

Open Graph สร้างการแสดงตัวอย่างสำหรับเว็บไซต์ที่เกี่ยวข้องกับโซเชียลมีเดีย

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

เมื่อผู้เยี่ยมชมเลื่อนลงมาที่หน้าเว็บไซต์ของคุณ ยิ่งเนื้อหาของคุณสูงขึ้นเท่าใด ก็ยิ่งได้รับความสนใจมากขึ้นเท่านั้น ช่วยให้ผู้ใช้สามารถดูตัวอย่างก่อนคลิก

ใช้ OG tags เพื่อช่วยให้ผู้คนค้นหาเนื้อหาของคุณบน Facebook และแพลตฟอร์มโซเชียลมีเดียอื่นๆ

องค์ประกอบเมตาของ OG ถูกใช้เพื่อสร้างตัวอย่าง เมื่อมีการแบ่งปัน URL ในการสนทนาส่วนตัวบนไซต์ที่ใช้โปรโตคอล

ความสำคัญของโปรโตคอล Open Graph สำหรับธุรกิจของคุณ

การโต้ตอบประเภทนี้ ทำได้ง่ายด้วยโปรโตคอล Open Graph ของ Facebook

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

เพื่ออำนวยความสะดวกในการรวมระบบ เราพยายามสร้างออบเจ็กต์กราฟแบบสมบูรณ์ ที่แชร์ชุดคุณลักษณะมาตรฐานของ Facebook ไว้ Facebook สามารถควบคุมการไหลของข้อมูล จากแหล่งภายนอกได้อย่างสมบูรณ์ ข้อมูลนี้มาจากเมตาแท็ก Open Graph ขณะที่เมตาแท็กเหล่านั้นเคลื่อนผ่านส่วนหัวของเว็บไซต์

เนื่องจากปัจจุบันคนส่วนใหญ่เข้าถึงหน้าผ่านโซเชียลมีเดีย Open Graph tags จึงมีความสำคัญมากกว่าที่เคย CTR อาจเพิ่มขึ้นเมื่อมีการปรับปรุงการค้นหา Open Graph ช่วยอำนวยความสะดวก ในกระบวนการแชร์โซเชียลมีเดีย

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

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

โซเชียลเน็ตเวิร์กที่โดดเด่นที่สุดใช้ open graph tags

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

Open Graph tags มีไว้สำหรับโซเชียลมีเดียจริงๆ

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

รูปภาพที่ปรับให้เหมาะสมที่สุด

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

มันเกี่ยวกับการแสดงตัวอย่างโซเชียล ไม่ใช่การค้นหาตัวอย่าง

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

คุณสามารถควบคุมเนื้อหาของคุณได้

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

ประเภทของ Open Graph tags

แท็ก Open Graph เช่น og:title, og:image, og:type และ og:url อนุญาตให้แพลตฟอร์มโซเชียลเน็ตเวิร์กดูข้อมูลของคุณได้ คุณต้องใช้แท็กที่สำคัญเหล่านี้ แต่คุณสามารถใช้แท็กอื่นได้เช่นกัน ภาพหน้าจอ Facebook ที่มีการเชื่อมต่อกับส่วนประกอบ og:image, og:url, og:title และ og:description

og:site_name

แท็ก og:site name ควรมีโดเมนที่อาจพบเนื้อหาของคุณได้ ด้วยเหตุนี้ จึงเป็นการแทนที่ชื่อแบรนด์ ซึ่งน่าจะอยู่ในชื่อเมตา (ดังนั้นจึงไม่ได้รับอนุญาตในแท็ก og:name)

แท็ก og:site name ควรมีชื่อเว็บไซต์หรือแบรนด์ของคุณ ในขณะที่แท็ก og:title ควรมีชื่อบทความของคุณ

og:site_name Code

<meta property=”og:site_name” content=”Your Site Name” />

ใช้แท็กชื่อเว็บไซต์เดียวกันทั่วทั้งเว็บไซต์ของคุณ

og:title

แนะนำให้ใช้แท็ก og:title สำหรับตั้งชื่อเพจ คล้ายกับวิธีการใช้คำอธิบายเมตาใน SEO เมื่อใช้ชื่อเมตาที่มีอยู่ อย่าลืมเว้นฟิลด์ og:title ว่างไว้ และลบเนื้อหาที่เป็นพิเศษสำหรับแบรนด์หรือเว็บไซต์ของคุณ

Og:title Code

<meta property=”og:title” content=”Title” />

แท็กนี้ควรปรากฏบนหน้าใดๆ ของเว็บไซต์ของคุณที่ผู้ใช้อาจต้องการแชร์บน Facebook, Twitter หรือเว็บไซต์โซเชียลเน็ตเวิร์กอื่น

ตั้งชื่อให้มีความยาวระหว่าง 40 ถึง 50 อักขระ ไม่เช่นนั้นจะถูกตัดออก

หากคุณต้องการให้มีคนมาเยี่ยมชมเว็บไซต์ของคุณมากขึ้น ชื่อจะต้องเป็นมากกว่าแค่การอธิบาย

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

og:type

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

og:type Code

<meta property=”og:type” content=”article” />

ใช้ประเภทอ็อบเจ็กต์บทความ สำหรับข้อมูลที่ต้องการคำอธิบาย เช่น บล็อกโพสต์

เพิ่มประเภทเว็บไซต์ลงในหน้าอื่นๆ ของเว็บไซต์

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

og:locale

แท็ก og:locale ให้ข้อมูลเกี่ยวกับภาษาที่เขียนเนื้อหาที่ถ่ายโอน ผู้ใช้เว็บไซต์โซเชียลเน็ตเวิร์กควรทราบว่า เนื้อหาที่โพสต์บนเว็บไซต์สามารถเห็นได้ในหลายภาษา

og:locale code

<meta property=”og:locale” content=”en_GB” />

เนื่องจาก Facebook ตั้งสมมติฐานว่าทุกอย่างที่ไม่มีแท็ก og:locale นั้นเขียนเป็นภาษาอังกฤษแบบอเมริกัน หากคุณเปิดเว็บไซต์ในสหรัฐอเมริกาที่ประกอบด้วยเนื้อหาภาษาอังกฤษทั้งหมด คุณจะไม่ต้องสนใจแท็กนี้ (สหรัฐอเมริกา)

หากเนื้อหาที่คุณ จัดเตรียมเป็นภาษาอื่นที่ไม่ใช่ภาษาอังกฤษแบบอเมริกัน ตรวจสอบให้แน่ใจว่าใช้แท็ก OG ที่ถูกต้อง

og:url

เพียงใช้แท็ก og:url เพื่อระบุตำแหน่งที่คุณต้องการเผยแพร่เนื้อหา

og:url Code

<meta property=”og:url” content=”https://www.yourdomain.com/title.html” />

แท็กนี้ต้องระบุ URL ตามรูปแบบบัญญัติของหน้าเว็บ

og:description

ข้อความที่รวมอยู่ในแท็ก og:description ต้องกระชับไม่ซับซ้อนและมีส่วนร่วมมากที่สุดเท่าที่จะเป็นไปได้ เพื่อกระตุ้นให้ผู้อ่านเข้าชมเว็บไซต์

คุณสามารถใช้ข้อมูลซ้ำได้ตราบเท่าที่มีความเกี่ยวข้อง เนื่องจากแท็กนี้คล้ายกับแท็กที่เครื่องมือค้นหาใช้งาน

og: description code

<meta property=”og:description” content=”Your description.” />

มันจะเป็นประโยชน์ถ้าคุณเก็บคำอธิบายของคุณให้มีความยาวระหว่าง 50 ถึง 100 อักขระ โพสต์บน Facebook ควรมีความยาวไม่เกินสองถึงสี่คำ โพสต์ที่ยาวเกินสี่คำมักจะถูกลบ

เพื่อให้ได้รับการคลิกและความสนใจมากที่สุดจากเนื้อหาที่คุณนำเสนอ คำอธิบายที่คุณให้ควรมีรายละเอียดและน่าสนใจเท่าที่มนุษย์จะทำได้

og:image

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

องค์ประกอบ OG นี้ทำงานคล้ายกับ schema markup รูปภาพ ซึ่งเครื่องมือค้นหาใช้เพื่อให้ผลลัพธ์ที่หลากหลาย

og:image code

<meta property=”og:image” content=”https://yourdomain.com/wp-content/uploads/2022/02/your-image.png” />

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

เพื่อหลีกเลี่ยงภาพพิกเซลหรือคุณภาพต่ำ อาร์ตเวิร์กต้นฉบับของคุณควรมีอัตราส่วน 1.91:1 และความละเอียดอย่างน้อย 1200 x 630 พิกเซล

แท็ก og:image:width และ og:image:height ช่วยให้มั่นใจว่ารูปภาพที่แชร์ก่อนหน้านี้จะปรากฏอย่างถูกต้อง ติดตั้ง Yoast บนไซต์ WordPress ของคุณ หากคุณยังไม่ได้ติดตั้งโดยอัตโนมัติ หากคุณยังไม่ได้ดำเนินการ นี่คือโค้ด:

<meta property=”og:image:width” content=”1200″ />

<meta property=”og:image:height” content=”630″ />

เพิ่ม Open Graph ให้กับ WordPress

การเพิ่มแท็ก OG ลงใน WordPress เป็นวิธีที่ง่ายที่สุด ธรรมดาที่สุด และง่ายที่สุดในการทำให้สำเร็จด้วยปลั๊กอิน Yoast SEO ปลั๊กอินนี้ควรได้รับการติดตั้งแล้ว หากไซต์ของคุณได้รับการตั้งค่า เพื่อให้เครื่องมือค้นหาสามารถระบุตำแหน่งได้อย่างง่ายดาย

อัปเดตหน้าหรือบทความที่ควรแทรก Open Graph โดยใช้ตัวเลือก “social” ของ Yoast SEO กรอกข้อมูลในช่อง og:image, og:title และ og:description บนหีบเพลง Facebook

Yoast จะกำหนดค่าแท็ก og:url, การ์ด Twitter และขนาดรูปภาพสำหรับคุณ หากคุณไม่ได้สั่งให้ Yoast ใช้รูปภาพใดรูปภาพหนึ่ง ระบบจะใช้รูปภาพหลักจากโพสต์

เมื่อมีการแชร์เว็บไซต์ของคุณ จะไม่มีภาพใดปรากฏตามค่าเริ่มต้น คุณสามารถแก้ไขได้โดยให้ภาพหน้าจอของทั้งเว็บไซต์ ข้อผิดพลาดนี้เกิดขึ้นเมื่อ URL รูปภาพไม่มีแท็ก og:image

ในหน้าการตั้งค่าหลักของ Yoast คุณสามารถเลือก og:image ทั่วทั้งไซต์ การเพิ่มแท็ก OG ในบล็อก WordPress ของคุณนั้นง่ายมาก คุณเพียงแค่ต้องไปที่ :

WordPress แถบด้านข้าง : Yoast>Social>Facebook

สลับสวิตช์ จากนั้นบันทึกรูปภาพที่มีอยู่ เราเชื่อว่าคุณควรเลือกโลโก้ คุณยังสามารถทำสิ่งเดียวกันกับ Twitter และ Pinterest ได้อีกด้วย

เพิ่ม Open Graph ด้วยตนเอง

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

<meta property=”og:site_name” content=”INSERT SITE NAME” />

<meta property=”og:title” content=”INSERT TITLE” />

<meta property=”og:description” content=”INSERT DESCRIPTION” />

<meta property=”og:url” content=”INSERT URL” />

<meta property=”og:type” content=”INSERT TYPE” />

<meta property=”og:image” content=”INSERT IMAGE URL” />

<meta property=”og:image:width” content=”1280″ />

<meta property=”og:image:height” content=”640″ />

<meta property=”twitter:card” content=”summary_large_image” />

<meta property=”twitter:image” content=”INSERT IMAGE URL” />

การทดสอบเมตาแท็ก Open Graph ของคุณ

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

ก่อนที่คุณจะแชร์ URL ให้ตรวจสอบอีกครั้งว่าแท็ก OG ของคุณถูกดึงผ่านและแสดงอย่างถูกต้อง เครื่องมือเหล่านี้อาจมีประโยชน์สำหรับการทดสอบแท็ก OG ของคุณ :

• เครื่องมือตรวจสอบ Pinterest Rich Pins
• เครื่องมือตรวจสอบ Twitter Card
• โปรแกรมแก้ไขข้อบกพร่อง Facebook Sharing
• ตัวตรวจสอบโพสต์ LinkedIn Post

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

สุดท้ายนี้

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