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) โปรโตคอลนี้ช่วยปรับปรุง “Recommended Content Blocks”

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

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

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

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

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

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

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

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

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

สิ่งนี้หมายความว่าอย่างไร?

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

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

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

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

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

รูปภาพที่ถูกปรับแต่งให้เหมาะสม

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

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

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

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

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

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

แท็ก Open Graph เช่น og:title, og:image, og:type และ og:url ช่วยให้แพลตฟอร์มโซเชียลเน็ตเวิร์กสามารถดูข้อมูลของคุณได้ คุณต้องใช้แท็กที่สำคัญเหล่านี้ แต่คุณสามารถใช้แท็กอื่นก็ได้เช่นกัน ภาพหน้าจอเฟซบุ๊กที่มีการเชื่อมต่อกับส่วนประกอบ 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=”ชื่อเว็บไซต์ของคุณ” />

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

og:title

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

Og:title Code

<meta property=”og:title” content=”ชื่อเรื่อง” />

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

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

og:type

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

og:type Code

<meta property=”og:type” content=”บทความ” />

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

og:locale

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

og:locale code

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

เนื่องจากเฟซบุ๊กตั้งสมมติฐานว่าทุกอย่างที่ไม่มีแท็ก og:locale นั้นเขียนเป็นภาษาอังกฤษแบบอเมริกัน หากคุณใช้งานเว็บไซต์ในสหรัฐอเมริกาที่ประกอบด้วยเนื้อหาภาษาอังกฤษทั้งหมด คุณจะไม่ต้องสนใจแท็กนี้ (en US) หากเนื้อหาที่คุณ จัดเตรียมเป็นภาษาอื่นที่ไม่ใช่ภาษาอังกฤษแบบอเมริกัน ตรวจสอบให้แน่ใจว่าใช้แท็ก 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=”คำอธิบายของคุณ” />

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

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 บนหีบเพลงเฟซบุ๊ก Yoast จะกำหนดค่าแท็ก og:url, Twitter Card และขนาดรูปภาพสำหรับคุณ หากคุณไม่สั่งให้ Yoast ใช้รูปภาพเฉพาะเจาะจง 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

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

สุดท้ายนี้

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