Search Engine Optimization, seo

Open Graph Tags คืออะไร?

Posted on by prp
30
ม.ค.

🔹 การใช้งาน Open Graph Tags สำหรับทำ SEO อย่างละเอียด

📌 Open Graph Tags คืออะไร?

Open Graph (OG Tags) เป็น Meta Tags ที่พัฒนาโดย Facebook เพื่อช่วยให้เว็บไซต์แสดงผล ภาพ, หัวข้อ, คำอธิบาย ได้ดีขึ้นเมื่อแชร์บน Facebook, Twitter, LinkedIn และแพลตฟอร์มอื่นๆ

📌 Open Graph Tags ช่วย SEO อย่างไร?
✅ ช่วยให้ลิงก์ที่แชร์ดูน่าสนใจ เพิ่ม CTR (Click-Through Rate)
✅ ช่วยปรับแต่งข้อมูลที่แสดงบนโซเชียลมีเดีย
✅ ลดโอกาสที่ Facebook จะแสดงข้อมูลผิดพลาด
✅ ช่วยเพิ่มการคลิกเข้าสู่เว็บไซต์ ซึ่งส่งผลดีต่อ SEO

🔹 โครงสร้างพื้นฐานของ Open Graph Tags

html
<meta property=”og:title” content=”คู่มือการทำ SEO สำหรับมือใหม่”> <meta property=”og:description” content=”เรียนรู้พื้นฐาน SEO เพื่อช่วยให้เว็บไซต์ติดอันดับ Google อย่างมีประสิทธิภาพ”> <meta property=”og:image” content=”https://example.com/seo-guide.jpg”> <meta property=”og:url” content=”https://example.com/seo-guide”> <meta property=”og:type” content=”article”> <meta property=”og:site_name” content=”Example SEO Blog”>

 

🔹 รายละเอียด Open Graph Tags ที่สำคัญ

Open Graph Tag คำอธิบาย ตัวอย่าง
og:title หัวข้อที่จะแสดงเมื่อแชร์ลิงก์ <meta property=”og:title” content=”สุดยอดเทคนิค SEO 2024″>
og:description คำอธิบายของเนื้อหา (150-200 ตัวอักษร) <meta property=”og:description” content=”วิธีเพิ่มอันดับเว็บไซต์ด้วย SEO”>
og:image URL ของรูปภาพที่ใช้แสดง <meta property=”og:image” content=”https://example.com/image.jpg”>
og:url URL ของหน้าเว็บ (ควรเป็น Canonical URL) <meta property=”og:url” content=”https://example.com/seo-tips”>
og:type ประเภทของเนื้อหา เช่น website, article, video.movie <meta property=”og:type” content=”article”>
og:site_name ชื่อเว็บไซต์ที่แสดงบน Facebook <meta property=”og:site_name” content=”SEO Expert Blog”>

🔹 ตัวอย่างการใช้งาน Open Graph Tags ที่ถูกต้อง

✅ ตัวอย่าง 1: Open Graph Tags สำหรับบทความ

html
<meta property=”og:title” content=”10 เทคนิค SEO ที่คุณต้องรู้ในปี 2024″> <meta property=”og:description” content=”เรียนรู้วิธีปรับแต่ง SEO ให้เว็บไซต์ของคุณติดอันดับบน Google ได้ง่ายขึ้น”> <meta property=”og:image” content=”https://example.com/seo-tips.jpg”> <meta property=”og:url” content=”https://example.com/10-seo-tips”> <meta property=”og:type” content=”article”> <meta property=”og:site_name” content=”SEO Master Blog”> <meta property=”article:published_time” content=”2024-01-15T08:00:00Z”> <meta property=”article:author” content=”https://example.com/author/john-doe”>

 

✅ ตัวอย่าง 2: Open Graph Tags สำหรับเว็บไซต์ทั่วไป

html
<meta property=”og:title” content=”SEO Master – สอนทำ SEO ฟรี”> <meta property=”og:description” content=”แหล่งเรียนรู้ SEO ฟรีสำหรับมือใหม่และผู้เชี่ยวชาญ”> <meta property=”og:image” content=”https://example.com/seo-master-logo.jpg”> <meta property=”og:url” content=”https://example.com”> <meta property=”og:type” content=”website”>

 

🔹 การตั้งค่ารูปภาพ (og:image) ให้เหมาะสม

✅ ควรใช้ภาพขนาดใหญ่เพื่อให้แสดงผลได้ดีบนโซเชียลมีเดีย
✅ ขนาดที่แนะนำ:

  • Facebook: 1200×630 px
  • Twitter: 1200×675 px
  • LinkedIn: 1200×627 px
    ✅ ใช้ไฟล์ภาพที่เป็น .jpg, .png และควรอยู่บน CDN หรือเซิร์ฟเวอร์ที่โหลดเร็ว

📌 ตัวอย่างการตั้งค่า og:image หลายขนาด

html
<meta property=”og:image” content=”https://example.com/image-large.jpg”> <meta property=”og:image:width” content=”1200″> <meta property=”og:image:height” content=”630″> <meta property=”og:image:alt” content=”รูปตัวอย่างการทำ SEO”>

 

เหตุผล: ถ้าเบราว์เซอร์โหลดภาพขนาดใหญ่ไม่ได้ ระบบจะเลือกภาพขนาดที่เหมาะสมที่สุดแทน

🔹 การตรวจสอบ Open Graph Tags

✅ Facebook Sharing Debugger → https://developers.facebook.com/tools/debug/
✅ Twitter Card Validator → https://cards-dev.twitter.com/validator
✅ LinkedIn Post Inspector → https://www.linkedin.com/post-inspector/

📌 วิธีใช้ Facebook Debugger

  1. ใส่ URL ที่ต้องการตรวจสอบ
  2. กดปุ่ม “Debug”
  3. ถ้า Open Graph Tags ไม่อัปเดต ให้กด “Scrape Again”

🔹 Open Graph Tags และ SEO

📌 Open Graph Tags ไม่ได้ช่วยอันดับ SEO โดยตรง แต่ช่วยเพิ่ม Click-Through Rate (CTR)
📌 CTR สูงขึ้น → อัตราการคลิกเข้าเว็บไซต์เพิ่ม → SEO ดีขึ้น
📌 ช่วยให้แชร์เนื้อหาบนโซเชียลมีเดียได้สวยงาม → เพิ่ม Engagement และ Traffic

🔹 สรุป

🔹 Open Graph Tags ช่วยให้เว็บไซต์ดูน่าสนใจเมื่อแชร์บน Facebook, Twitter และ LinkedIn
🔹 ควรใช้ og:title, og:description, og:image, และ og:url ในทุกหน้าเว็บไซต์
🔹 ตั้งค่าภาพ og:image ให้เหมาะสมกับแต่ละแพลตฟอร์มเพื่อให้การแสดงผลดีขึ้น
🔹 ใช้ Facebook Debugger เพื่อตรวจสอบว่า Open Graph Tags ทำงานถูกต้องหรือไม่
🔹 ช่วยเพิ่ม CTR ซึ่งส่งผลดีต่อ SEO ทางอ้อม

📌 แนะนำ: ปรับแต่ง Open Graph Tags ให้เหมาะสมกับทุกบทความ เพื่อเพิ่มการคลิกเข้าสู่เว็บไซต์ 🚀

prp

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *