ตั้งภาพตัวอย่างลิงก์ Joomla อย่างไร เมื่อแชร์บทความบนโซเชียล

ภาพตัวอย่างลิงก์ที่แชร์มักมาจาก Open Graph tag og:image ในส่วน <head> ของหน้า บทความ Joomla มีช่อง Intro Image และ Full Article Image แต่ภาพเหล่านี้จะถูกใช้เป็นภาพแชร์หรือไม่ ขึ้นกับเทมเพลตหรือส่วนเสริมที่สร้าง Open Graph ให้เว็บไซต์ด้วย

❶ เลือกภาพที่ต้องการใช้กับลิงก์แชร์

① ใช้ภาพที่ตรงกับบทความ

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

② เตรียมภาพให้แสดงได้ชัด

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

③ ตรวจสิทธิ์และการเข้าถึงภาพ

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

❷ เลือกภาพในบทความ Joomla

① ตั้ง Intro Image หรือ Full Article Image

ไปที่ Content → Articles แล้วเปิดบทความ จากนั้นเปิดแท็บ Images and Links เลือก Intro Image สำหรับภาพที่แสดงในหน้ารายการ หรือ Full Article Image สำหรับภาพที่แสดงในหน้าบทความ

② ตั้ง Alt Text แยกจากภาพแชร์

กรอก Image Description (Alt Text) เพื่ออธิบายภาพสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ Alt Text ไม่ได้แทน og:image และไม่รับประกันว่าจะเป็นภาพตัวอย่างเมื่อแชร์

③ ตรวจว่าเทมเพลตหรือส่วนเสริมใช้ภาพใด

ดูการตั้งค่า Open Graph ของเทมเพลตหรือส่วนเสริมว่าใช้ Intro Image, Full Article Image หรือมีช่อง Open Graph Image แยกต่างหาก หากมีช่องภาพแชร์เฉพาะ ให้ใช้ช่องนั้นและตรวจ URL ที่สร้างขึ้น

④ ไม่สมมติว่าภาพในบทความจะเป็นภาพแชร์เสมอ

หากหน้าเว็บแสดง Intro Image แต่ส่วนเสริม Open Graph เลือกภาพอื่น หรือไม่ได้สร้าง og:image แพลตฟอร์มอาจเลือกภาพจากส่วนอื่นของหน้า หรือไม่มีภาพให้แสดง

❸ ตั้งค่า og และข้อมูลแชร์

① กรอกภาพในช่อง Open Graph Image

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

② ตรวจค่าอื่นที่ใช้ประกอบภาพ

ตรวจ og:title, og:description, og:url และ og:type ให้ตรงกับหน้า โดยเฉพาะ og:url ต้องชี้ไป URL หลักของบทความ และ og:image ต้องเป็นภาพที่เปิดได้จริง

③ ใช้ URL ภาพแบบเต็ม

ตรวจว่า og:image สร้างเป็น URL เต็มที่ขึ้นต้นด้วยโปรโตคอลและโดเมน เช่น https://example.com/images/article-preview.jpg ไม่ใช่ path ที่ไม่มีโดเมน หากส่วนเสริมมีตัวเลือกสร้าง URL ให้อัตโนมัติ ให้ตรวจผลในซอร์สหน้าเว็บ

④ ตรวจว่ามี og เพียงค่าที่ต้องการ

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

ComSiam แนะนำให้กำหนดภาพแชร์เฉพาะในช่อง Open Graph เมื่อเว็บไซต์มีช่องนี้ แล้วตรวจ og:image จากหน้าเว็บจริงก่อนแชร์

❹ แก้เมื่อแชร์แล้วยังเห็นภาพเก่า

① ตรวจซอร์สหน้าเว็บก่อน

เปิดบทความ ดูซอร์สหน้า แล้วค้นหา property="og:image" ตรวจว่า URL ของภาพตรงกับค่าที่ตั้งไว้ หากไม่มีแท็ก ให้ตรวจการเปิดใช้งานส่วนเสริมหรือการตั้งค่าเทมเพลต

② เปิด URL ของภาพโดยตรง

คัดลอก URL จาก og:image ไปเปิดในหน้าต่างส่วนตัว ตรวจว่าภาพโหลดได้ ไม่ต้องล็อกอิน และไม่ถูกเปลี่ยนเส้นทางไปหน้าอื่น

③ ล้างแคชของเว็บไซต์

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

④ ขอให้แพลตฟอร์มดึงตัวอย่างใหม่

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

❺ เช็กลิสต์ก่อนแชร์บทความ

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

ภาพแชร์ที่ถูกต้องช่วยให้ผู้ชมเห็นเนื้อหาคร่าว ๆ ก่อนเปิดลิงก์ หลังเปลี่ยนภาพหรือส่วนเสริม ทีม ComSiam ควรตรวจ og:image จากหน้าเว็บและทดสอบตัวอย่างแชร์อีกครั้ง