แท็กเมตา Open Graph — สิ่งที่คุณต้องรู้

Do you want people to notice your social media posts?

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

Not all folks have known about the importance of Open Graph. What is it anyway? How can it help you get noticed?

What is Open Graph?

Open Graph meta tags เช่น meta descriptions และ titles กำหนดว่า URLs จะแสดงอย่างไรเมื่อถูกแชร์บนโซเชียลมีเดีย

Facebook’s Open Graph ทำให้การกำหนดเนื้อหาเพจบนแพลตฟอร์มโซเชียลง่ายขึ้น โดยตั้งมาตรฐานข้อมูลโซเชียลข้ามเว็บไซต์

Meta tags เหล่านี้ส่งข้อมูลให้แพลตฟอร์มโซเชียล เช่น title ของหน้าเว็บ, description และ featured image ผ่านส่วน head ของเว็บเพจ ซึ่งช่วยรักษาความสอดคล้องและความถูกต้องของข้อมูลที่แสดง

Why use Open Graph?

Open Graph is supported in various social networks such as:

• Facebook;
• Twitter/X;
• Pinterest;
• Viber;
• Telegram;
• WhatsApp.

According to Google, the protocol improves “Recommended Content Blocks.”

What happens if Open Graph is not used?

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

As a result, Facebook is unable to determine which sections of the preview to display.

• Open Graph creates previews for social media-related websites.
• Open Graph tags help individuals locate material in social feeds, which leads to increased site visits.

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

Use OG tags to help people locate your material on Facebook and other social media platforms.

เว็บไซต์ที่รองรับ protocol จะใช้ OG meta elements สร้าง snippets เมื่อมีการแชร์ URLs ในแชทส่วนตัว

The significance of Open Graph protocol for your business

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

เพื่ออำนวยความสะดวกในการรวมระบบ สร้าง rich graph objects ที่มีชุดคุณลักษณะมาตรฐานของ Facebook Facebook ควบคุมการไหลของข้อมูลจากแหล่งภายนอก (เช่น การกดไลก์ ฯลฯ) ข้อมูลเหล่านี้ถูกระบุโดย Open Graph meta tags ที่วางอยู่ใน header ของเว็บไซต์

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

What exactly does this mean?

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

Most prominent social networks utilize open graph tags

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

Open Graph tags are indeed for social media

Open Graph แสดงตัวอย่างข้อมูลบน social network และจัดระเบียบข้อมูลได้มากกว่าการแชร์หน้าเว็บเพียงอย่างเดียว

Feature optimized image

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

It is about social previews, not search previews

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

ทั้ง page title, meta descriptions, open graph title, description, URL และ picture tags ต้องไม่ซ้ำกัน เพื่อให้เนื้อหาถูกปรับให้เหมาะสมกับเครื่องมือค้นหาและโซเชียลเน็ตเวิร์ก

You have control on your material

ไม่ว่าคุณจะโพสต์คอนเทนต์เองหรือให้ผู้อื่นโพสต์ คุณสามารถควบคุมได้เต็มที่ว่าเนื้อหาจะปรากฏบน social media อย่างไร

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

Types of Open Graph tags

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

A Facebook screenshot containing connections to the components og:image, og:url, og:title, and og:description.

og:site_name

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

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

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

Use the same site name tag across your whole website.

og:title

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

og:title Code <meta property="og:title" content="Title" />

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

Keep the title between 40 and 50 characters long; else, it will be chopped off.

If you want more people to visit your website, the title must do more than simply describe it.

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

og:type

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

og:type Code <meta property="og:type" content="article" />

Use the article object type for information that requires explanation, such as blog posts.

Add the website type to the website’s other pages.

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

og:locale

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

og:locale Code <meta property="og:locale" content="en_GB" />

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

หากคอนเทนต์ที่คุณส่งเขียนเป็นภาษาที่ไม่ใช่ American English ให้กำหนด OG tag ให้ถูกต้อง

og:url

Simply use the og:url tag to specify where you wish to publish the content.

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

This tag must provide the page’s canonical URL.

og:description

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

คุณสามารถนำข้อมูลนี้ไปใช้ซ้ำได้ตราบเท่าที่ยังเกี่ยวข้อง เพราะ tag นี้คล้ายกับ tag ที่ search engines ใช้

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

กรุณาทำคำอธิบายให้มีความยาวระหว่าง 50 ถึง 100 ตัวอักษร. โพสต์ Facebook ควรมีความยาวระหว่าง 2 ถึง 4 คำ เพราะโพสต์ที่ยาวกว่า 4 คำมีแนวโน้มจะถูกลบมากกว่า

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

og:image

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

องค์ประกอบ OG นี้ทำงานคล้าย image schema markup ที่ search engines ใช้เพื่อแสดง rich results

og:image Code <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

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

เพื่อไม่ให้ภาพดูแตกหรือมีคุณภาพต่ำ ภาพต้นฉบับควรมี aspect ratio 1.91:1 และ resolution อย่างน้อย 1200 by 630 pixels

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

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Add Open Graph to WordPress

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

Update the page or article where Open Graph should be inserted using Yoast SEO’s “social” option.

Fill in the og:image, og:title, and og:description boxes on the Facebook accordion.

Yoast จะกำหนดค่าแท็ก og:url, Twitter/X Card และขนาดภาพให้โดยอัตโนมัติ หากคุณไม่ระบุภาพเฉพาะ Yoast จะดึงภาพหลักจากโพสต์มาใช้

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

On Yoast’s main settings page, you may select the sitewide og:image.

Adding OG tags in your WordPress blog is really easy. You just need to go to:

WordPress Sidebar : Yoast>Social>Facebook.

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

Add Open Graph manually

If you know how to code and aren’t utilizing one of the previous systems, OG tags are simple to install.

You can copy and paste the content below onto your website, but please modify it to suit your needs.

<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" />

Testing your Open Graph meta tags

Let’s assume you’ve understood how to include an Open Graph onto your website.

เมื่อเว็บไซต์ของคุณถูกจัดประเภทอย่างถูกต้อง ควรแสดงผลได้ดีเมื่อแชร์บน social media. ทดสอบงานทุกครั้งก่อนเผยแพร่สู่สาธารณะ

Before you share a URL, double-check that your OG tags are being pulled through and shown appropriately.

These tools may be useful for testing your OG tags:

• Pinterest Rich Pins Validator
• Twitter/X Card Validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector

ป้อน URL ในบริการเหล่านี้เพื่อดึง meta tags ต้นฉบับ เมื่อแชร์ คุณจะเห็นว่าเพจนั้นจะแสดงผลต่อผู้อื่นอย่างไร

ก่อนดำเนินการ ให้ตรวจสอบ preview รวมทั้ง image, title และ description. ระบบอาจส่ง alerts เกี่ยวกับ tags ที่คุณไม่ต้องการ ซึ่งคุณสามารถเลือกเพิ่มหรือข้ามได้.

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

Verdict

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

Frequently asked questions