ตั้งค่า Open Graph ใน Joomla อย่างไร ให้แชร์บทความแล้วแสดงข้อมูลครบ

Open Graph คือข้อมูลในส่วน <head> ของหน้าเว็บที่ช่วยให้แพลตฟอร์มต่าง ๆ แสดงชื่อ คำอธิบาย และภาพเมื่อมีคนแชร์ลิงก์ Joomla มีช่อง Metadata สำหรับ Title และ Description แต่การสร้าง Open Graph tags มักต้องใช้ส่วนเสริมหรือการตั้งค่าของเทมเพลตที่รองรับ

❶ เข้าใจข้อมูล Open Graph ที่ควรมี

① og:title

ชื่อเรื่องที่ต้องการให้แสดงบนการ์ดแชร์ ควรสั้น ชัด และตรงกับเนื้อหาของหน้า

② og:description

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

③ og:image

ภาพที่ต้องการให้แสดงเมื่อแชร์ลิงก์ เลือกภาพที่เกี่ยวข้องกับเนื้อหาและเปิดให้ระบบภายนอกเข้าถึงได้

④ og:url และ og:type

og:url ระบุ URL หลักของหน้า ส่วน og:type ระบุชนิดเนื้อหา เช่น หน้าเว็บไซต์หรือบทความ ค่าและรูปแบบควรตรงกับหน้าที่แชร์

❷ เลือกวิธีเพิ่ม Open Graph ใน Joomla

① ตรวจเทมเพลตและส่วนเสริมที่มีอยู่

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

② ใช้ส่วนเสริมที่ตั้งค่าแยกตามหน้าได้

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

③ ใช้การปรับแต่งของเทมเพลตเมื่อเหมาะสม

บางเทมเพลตมีช่องกำหนดข้อมูลแชร์ หากใช้วิธีนี้ ให้ตรวจว่าเทมเพลตสร้างค่าตามหน้าได้จริง และไม่ซ้ำกับส่วนเสริม SEO หรือโค้ดอื่นใน <head>

④ เลือกผู้สร้าง Open Graph เพียงระบบเดียว

หากมีหลายส่วนเสริมสร้าง Open Graph พร้อมกัน หน้าเว็บอาจมี og:title หรือ og:image ซ้ำกัน เลือกแหล่งกำหนดหลักหนึ่งจุด แล้วตรวจซอร์สหน้าเว็บหลังตั้งค่า

❸ ตั้งค่า Open Graph สำหรับแต่ละบทความ

① กำหนดชื่อและคำอธิบาย

กรอกชื่อและคำอธิบายให้ตรงกับบทความนั้น หากส่วนเสริมใช้ข้อมูลจาก Article Title หรือ Meta Description อัตโนมัติ ให้ตรวจว่าข้อความไม่ยาวเกินไปและสื่อเนื้อหาชัดเจน

② เลือกภาพสำหรับแชร์

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

③ ตรวจ URL หลัก

ตั้ง og:url ให้เป็น URL ของหน้าหลักที่ต้องการแชร์ ตรวจโดเมน โปรโตคอล HTTPS และเส้นทางว่าไม่ชี้ไป URL เก่าหรือหน้าซ้ำ

④ บันทึกและเคลียร์แคช

บันทึกบทความและล้างแคชของ Joomla เทมเพลต หรือส่วนเสริมที่เกี่ยวข้อง หากแก้ข้อมูลแล้วภาพเดิมยังแสดง อาจเป็นเพราะแพลตฟอร์มที่รับลิงก์เก็บตัวอย่างไว้ก่อนหน้า

ComSiam แนะนำให้ตั้งชื่อ คำอธิบาย และภาพแชร์แยกตามบทความสำคัญ แล้วตรวจค่าในซอร์สหน้าเว็บก่อนส่งลิงก์ไปแชร์จริง

❹ ตรวจภาพตัวอย่างก่อนแชร์

① ดูซอร์สหน้าเว็บ

เปิดหน้าบทความแล้วตรวจ <head> ว่ามี og:title, og:description, og:image, og:url และ og:type ตามที่ตั้งใจ รวมถึงตรวจว่าแต่ละแท็กไม่ได้ปรากฏซ้ำหลายครั้ง

② ทดสอบ URL และภาพ

เปิด URL จาก og:image โดยตรง ตรวจว่าระบบภายนอกเข้าถึงได้และภาพแสดงครบ หากใช้ภาพที่เก็บใน Media Manager ให้ตรวจ path และสิทธิ์การเข้าถึงด้วย

③ ตรวจตัวอย่างบนแพลตฟอร์มแชร์

ใช้เครื่องมือแสดงตัวอย่างหรือเครื่องมือตรวจสอบลิงก์ของแพลตฟอร์มที่ใช้งาน หากแสดงข้อมูลเก่า ให้ลองสั่งดึงข้อมูลใหม่เมื่อแพลตฟอร์มรองรับ

④ ตรวจบนโทรศัพท์

ดูตัวอย่างการแชร์บนมือถือด้วย เพราะพื้นที่แสดงภาพและการตัดข้อความอาจต่างจากหน้าจอคอมพิวเตอร์

❺ เช็กลิสต์ Open Graph ใน Joomla

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

Open Graph ที่ตั้งค่าตรงกับบทความช่วยให้ลิงก์มีตัวอย่างที่เข้าใจง่ายเมื่อถูกแชร์ หลังปรับเทมเพลตหรือส่วนเสริม ทีม ComSiam ควรตรวจซอร์สและตัวอย่างแชร์ของหน้าสำคัญอีกครั้ง