Open Graph (ภาพตัวอย่างเมื่อแชร์ลิงก์)

แท็ก Open Graph มีอะไรบ้าง

แท็ก Open Graph คือป้ายคำอธิบายสั้น ๆ ที่เขียนไว้ในส่วนหัวของหน้า พื้นฐาน 4 อย่างคือ ชื่อ · ประเภท · รูปหลัก · ที่อยู่ เอกสารทางการของ Open Graph Protocol (ogp.me) กำหนดให้ 4 อย่างนี้เป็นพร็อพเพอร์ตีที่ทุกหน้าต้องมี

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

แท็กเหล่านี้เขียนไว้ในส่วนที่ลูกค้ามองไม่เห็น ถ้ายังไม่ได้ลองส่งลิงก์จริง จะรู้ยากว่าขาดอะไรไป จึงควรใส่ไว้ในรายการตรวจก่อนเปิดเว็บไซต์เสมอ

รูปตัวอย่างเมื่อแชร์ลิงก์ควรทำขนาดและองค์ประกอบแบบไหน

ที่นิยมที่สุดคือสี่เหลี่ยมผืนผ้าแนวนอน อัตราส่วนประมาณ 1.91:1 (เช่น 1200×630) เอกสารนักพัฒนาของ Meta (Facebook) แนะนำรูปกว้าง 1080 พิกเซลขึ้นไปเพื่อให้คมชัดบนหน้าจอความละเอียดสูง และให้ระบุความกว้าง · ความสูงของรูปไว้ในแท็กด้วย

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

ถ้าจะใส่ตัวอักษรในรูป ข้อความสั้น ๆ ราว 10 ตัวอักษรหนึ่งข้อความก็พอ ในกลุ่มแชต ตัวอย่างลิงก์แสดงเล็กกว่าฝ่ามือ จึงควรตรวจบนหน้าจอมือถือเอง

อย่าให้ไฟล์รูปใหญ่เกินไปด้วย ถ้าบริการที่แชร์ใช้เวลาดึงรูปนาน ตัวอย่างลิงก์อาจแสดงโดยไม่มีรูป

ต้องทำตัวอย่างลิงก์ต่างกันในแต่ละหน้าไหม

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

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

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

• คาเฟ่: ลิงก์แนะนำเมนูใหม่ ใช้รูปเมนูใหม่กับชื่อ “เปิดตัวลาเต้เกาลัดลิมิเต็ดหน้าใบไม้ร่วง”
• ร้านทำผม: ลิงก์โปรโมชัน ใช้ชื่อ “โปรทรีตเมนต์สำหรับลูกค้าใหม่” กับรูปร้าน
• ร้านงานฝีมือ: ลิงก์รับสมัครคลาส ใช้รูปผลงานที่ทำเสร็จกับชื่อ “รับสมัครคลาสสุดสัปดาห์เดือน 11”
• ขายออนไลน์: ลิงก์สินค้า ให้เห็นรูปสินค้านั้นกับชื่อสินค้าตรง ๆ

เขียนชื่อและคำอธิบายของตัวอย่างลิงก์อย่างไร

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

คำอธิบาย 1–2 ประโยคก็พอตามที่เอกสารทางการของ Open Graph ระบุ ให้วางข้อมูลที่ผู้รับอยากรู้ไว้ข้างหน้า เช่น เวลาเปิดทำการ · ที่ตั้ง · วิธีจอง ประโยคยาวมักถูกตัดในตัวอย่างลิงก์

เมื่อเลือกรูปหลักแล้ว ให้เขียนคำอธิบายรูป (og:image:alt) ไว้ด้วย เอกสาร Open Graph ก็แนะนำให้เขียนคู่กัน และยังถ่ายทอดเนื้อหารูปให้คนที่ใช้โปรแกรมอ่านหน้าจอด้วย

ชื่อที่บอกสิ่งที่ผู้รับลิงก์ทำได้ ให้เหตุผลที่จะกดชัดเจนกว่าชื่อที่มีแค่ชื่อร้านซ้ำ ๆ เช่น “ร้านงานฝีมือ ○○ · ตารางคลาสเดือน 11” ดีกว่า “ร้านงานฝีมือ ○○”

• ตัวอย่างชื่อ: “คาเฟ่ ○○ · กาแฟดริปย่านยอนนัมดง เปิดทุกวัน 10:00–22:00 น.”
• ตัวอย่างคำอธิบาย: “คาเฟ่กาแฟดริปที่มีโต๊ะริมหน้าต่างกว้างขวาง ซื้อเมล็ดกาแฟที่ร้านได้ด้วย”
• ตัวอย่างที่ยังไม่ดี: ข้อความที่ไม่รู้ว่าเป็นร้านอะไร เช่น ชื่อ “หน้าแรก” คำอธิบาย “ยินดีต้อนรับ”

ถ้าตัวอย่างลิงก์ไม่เปลี่ยนหรือแสดงผลแปลก ๆ ควรตรวจตามลำดับไหน

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

Meta (Facebook) แจ้งว่าถ้าให้ Sharing Debugger ดึงข้อมูลใหม่ ก็ไม่ต้องรอรอบอัปเดตพื้นฐาน (ราว 24 ชั่วโมง) ส่วน KakaoTalk ก็ทำแบบเดียวกันได้ที่ Sharing Debugger บนเว็บไซต์ Kakao Developers

ถ้าจะส่งลิงก์เดียวกันผ่านหลายบริการ ให้ตรวจในแต่ละบริการสักครั้ง แม้อ่านแท็กเดียวกัน แต่ละบริการครอปรูปและแสดงจำนวนตัวอักษรต่างกันได้

1. 01ตรวจว่าหน้านั้นมีแท็ก og:title · og:image อยู่จริง
2. 02ตรวจว่าที่อยู่รูปเป็นที่อยู่เต็มที่ขึ้นต้นด้วย “https://”
3. 03ใส่ที่อยู่รูปในเบราว์เซอร์โดยตรง แล้วตรวจว่าเปิดได้โดยไม่ต้องล็อกอิน
4. 04ตรวจว่าไฟล์รูปไม่ใหญ่เกินไป
5. 05ใส่ที่อยู่ใน Sharing Debugger ของ Meta หรือ Kakao เพื่อให้ดึงตัวอย่างลิงก์ใหม่
6. 06ส่งใหม่ด้วย “ส่งถึงตัวเอง” ใน KakaoTalk แล้วตรวจผล

ความผิดพลาดที่พบบ่อยเรื่อง Open Graph มีอะไรบ้าง

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

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

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

เรื่อง Open Graph ควรถามบริษัทรับทำเว็บไซต์อะไรบ้าง

ตัวอย่างลิงก์แก้หลังเปิดเว็บไซต์ยุ่งยาก จึงควรถาม 4 ข้อด้านล่างนี้ในขั้นตอนแบบร่างดีไซน์

• ตั้งชื่อ · คำอธิบาย · รูปแยกในแต่ละหน้าได้หรือไม่
• เวลาลงบทความหรือสินค้าใหม่ รูปตัวอย่างลิงก์ถูกกำหนดอัตโนมัติหรือไม่
• จะตรวจตัวอย่างลิงก์ใน KakaoTalk ให้เองหรือไม่
• วันหลังคุณเปลี่ยนตัวอย่างลิงก์จากหน้าผู้ดูแลได้หรือไม่