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

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

Michael

เผยแพร่เมื่อ 16 กุมภาพันธ์ 2569

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

ความเข้าใจสั้น ๆ — คุณจะได้อะไรจากบทความนี้

บทความนี้อธิบายว่า Open Graph คืออะไร แท็กหลักที่ควรใช้ ตัวอย่างโค้ด วิธีตรวจสอบด้วยเครื่องมือต่าง ๆ (เช่น curl, Chrome DevTools, Facebook Sharing Debugger) และรายการตรวจสอบก่อนแชร์บนโซเชียล เพื่อให้ตัวอย่างที่ปรากฏต่อผู้ใช้สอดคล้องและชัดเจน

Open Graph คืออะไร และทำงานอย่างไร

Open Graph เป็นชุด meta tags ที่ใส่ไว้ในส่วน <head> ของหน้า HTML เพื่อบอกแพลตฟอร์มโซเชียลว่าควรแสดง title, description, image และข้อมูลอื่น ๆ อย่างไรเมื่อ URL ถูกแชร์ แม้จะเริ่มจาก Facebook โปรโตคอลนี้ถูกอ่านโดยแพลตฟอร์มหลายแห่งและช่วยให้ preview ที่ผู้ใช้เห็นมีความสอดคล้อง

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

แท็กหลักของ Open Graph (พร้อมตัวอย่าง)

แท็ก Open Graph เขียนเป็น meta elements ในส่วน <head> ของ HTML ตัวอย่างแท็กที่ควรมีอย่างน้อยในเพจจัดการเนื้อหา:

ตัวอย่างโค้ด:

และตัวเลือกเพิ่มเติมที่ใช้บ่อย: og:site_name, og:locale, og:updated_time เป็นต้น

แนวทางปฏิบัติที่แนะนำ

หลักการที่ควรทำเมื่อจัดการ Open Graph:

ตั้งค่า og:title และ og:description ให้สั้น กระชับ และสื่อความหมายจริงของเพจ
ใช้ภาพที่มีอัตราส่วนที่เป็นมิตรกับ preview — อัตราส่วนแนวนอนทั่วไปคือประมาณ 1.91:1 เพื่อให้ครอบคลุมหลายแพลตฟอร์ม
ให้ og:url ชี้ไปยัง canonical URL ของหน้านั้นเพื่อหลีกเลี่ยงตัวอย่างที่ไม่สอดคล้อง
ถ้าหน้าของคุณเป็นบทความ ให้ใช้ og:type="article" และพิจารณาใส่ publisher metadata เพิ่มเติม (เช่น author, published_time) ผ่าน schema.org สำหรับแพลตฟอร์มที่ใช้ structured data
ทดสอบ preview บนหลายแพลตฟอร์ม เพราะแต่ละแพลตฟอร์มอาจอ่านแท็ก OG ร่วมกับหรือแทนที่ด้วยแท็กของตัวเอง (เช่น Twitter/X อาจอ่านทั้ง OG และ twitter:card)

วิธีตรวจสอบและแก้ไขปัญหา (Checklist + คำสั่งตัวอย่าง)

รายการตรวจสอบเมื่อ preview ไม่แสดงตามที่คาด:

ตรวจว่าแท็ก OG อยู่ในส่วน <head> ของ HTML ไม่ใช่ถูกแทรกหลังจากการเรนเดอร์ด้วย JavaScript ที่อาจไม่ถูกอ่านโดยบางผู้ให้บริการ
ใช้ curl เพื่อตรวจดู HTML ที่เซิร์ฟเวอร์ส่งจริง เช่น ดู source ที่ผู้เอเจนต์ทั่วไปจะเห็น:

ตัวอย่าง: curl -s -L https://example.com/your-page | grep -i "og:"

ถ้าต้องการตรวจว่าหน้าให้เนื้อหาเดียวกันกับที่ Googlebot Smartphone จะเห็น ให้ส่ง user-agent ที่เหมาะสม:

ตัวอย่าง: curl -A "Googlebot Smartphone" -s -L https://example.com/your-page | grep -i "og:"

ใช้ Chrome DevTools > Elements เพื่อตรวจดู DOM ที่ถูกเรนเดอร์: หากแท็ก OG ถูกใส่ด้วย JavaScript และไม่ปรากฏใน source ที่ curl อ่านได้ ให้พิจารณาใส่แท็กในฝั่งเซิร์ฟเวอร์หรือใช้ dynamic rendering ที่เหมาะสม (อย่าให้แตกต่างจากสิ่งที่ผู้ใช้เห็นจนกลายเป็น cloaking)

เครื่องมือ Debug ที่แนะนำ:

Facebook Sharing Debugger — รีเฟรช cache ของ Facebook และดูตัวอย่างว่าจะแสดงอย่างไร
Twitter/X Card Validator — ตรวจว่าการ์ดของ X แสดงตามที่คาดหรือไม่ (X อาจอ่าน OG ร่วมกับการ์ดของตัวเอง)
ตรวจ headers ด้วย curl -I เพื่อดูว่าหน้านั้นมีสถานะ 200 และ content-type ที่ถูกต้อง:

ตัวอย่าง: curl -I https://example.com/your-page

ข้อผิดพลาดทั่วไปและการแก้ไข

รายการปัญหาที่มักพบเมื่อ preview บนโซเชียลไม่ถูกต้อง พร้อมวิธีแก้ไขสั้น ๆ:

ภาพไม่ขึ้นหรือโชว์ภาพผิด — ตรวจว่า og:image ชี้ไปยัง URL ที่เข้าถึงได้ public และให้ภาพมีอัตราส่วนที่เหมาะสมกับ preview ของแพลตฟอร์ม
ข้อความไม่อัปเดตหลังแก้ OG — ใช้ Sharing Debugger ของแพลตฟอร์มเพื่อรีเฟรช cache; ตรวจสอบด้วย curl ว่า HTML ถูกอัปเดตจริงก่อนรีเฟรช
แท็ก OG ถูกแทรกด้วย JavaScript แต่ไม่ได้ถูก fetch — ย้ายแท็กไปไว้ในฝั่งเซิร์ฟเวอร์หรือใช้การเรนเดอร์ที่แพลตฟอร์มรองรับ

ข้อควรระวัง: อย่าให้ HTML ที่ส่งให้ crawler แตกต่างจากที่ผู้ใช้เห็นจนเป็นการ cloaking — ปรับเนื้อหาเพื่อรองรับอุปกรณ์/ความละเอียดต่าง ๆ แต่รักษาความสอดคล้องของข้อมูลหลัก

ตัวอย่างการใช้งานจริงและเคสการใช้งานสั้น ๆ

ตัวอย่างสถานการณ์การใช้งาน: เมื่อคุณเผยแพร่บทความหรือเพจประกาศ ใช้ OG เพื่อควบคุม title, description และภาพที่จะแสดงเมื่อแชร์บน Facebook, X, LinkedIn หรือในแชทของแอปส่งข้อความ ซึ่งช่วยให้ผู้รับเข้าใจคอนเทนต์ก่อนคลิก

หากคุณมีหน้า product listing หรือ landing page ให้ตรวจสอบว่า og:url ชี้ไปยังค่าที่เป็น canonical เพื่อให้ preview ของลิงก์ที่แชร์ตรงกับหน้าที่คุณต้องการให้ผู้ใช้เข้าชม

หากต้องการอ่านแนวทางด้าน Technical SEO เพิ่มเติม: อ่านคู่มือ Technical SEO เพื่อดูบทความและรายการตรวจสอบที่เกี่ยวข้อง

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

Open Graph ต่างจาก meta description ใน HTML อย่างไร?

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

ถ้าแพลตฟอร์มไม่อ่าน OG จะเกิดอะไรขึ้น?

แพลตฟอร์มบางแห่งอาจอ่านแท็กของตัวเองหรือเลือกภาพจากหน้าโดยอัตโนมัติ หากแพลตฟอร์มไม่อ่าน OG คุณอาจเห็น preview ที่ไม่สอดคล้องกับที่ตั้งใจไว้ จึงควรทดสอบแต่ละแพลตฟอร์มและใส่แท็กเสริมที่แพลตฟอร์มรองรับ (เช่น twitter:card) เมื่อต้องการความแน่นอน

ควรวางแท็ก Open Graph ที่ไหนในหน้า HTML?

วางแท็ก Open Graph ภายในส่วน <head> ของ HTML เพื่อให้แพลตฟอร์มสามารถอ่านได้ทันทีเมื่อดึงหน้า หากคุณใส่แท็กผ่าน JavaScript ให้ตรวจสอบว่าแพลตฟอร์มที่ต้องการอ่านรองรับการเรนเดอร์ฝั่งลูกค้าหรือพิจารณาให้แสดงแท็กในฝั่งเซิร์ฟเวอร์

มีผลต่อ SEO ของ Google อย่างไรไหม?

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