📘 คู่มือ GOOMETA: ลิ้งค์ภาพสำหรับ Meta Tag

อธิบายตั้งแต่การได้ลิ้งค์ภาพ (Postimages / Netlify Drop) ไปจนถึงการใส่ลงใน meta tags และตรวจสอบผลลัพธ์

Guide v1.0

ดูงานหลัก: https://goonee.netlify.app/

สารบัญ

  1. ภาพสำหรับ Meta Tag คืออะไร?
  2. สเปกและคำแนะนำของภาพ (OG/Twitter)
  3. วิธีได้ลิ้งค์ภาพด้วย Postimages
  4. วิธีได้ลิ้งค์ภาพด้วย Netlify Drop
  5. ใส่ภาพลงใน Meta Tags ยังไง
  6. ตรวจสอบผลลัพธ์และเคลียร์แคช
  7. เวิร์กโฟลว์สั้นๆ ตั้งแต่ไฟล์ → ลิ้งค์ → meta
  8. คำถามพบบ่อย
รูปตัวอย่าง

1) ภาพสำหรับ Meta Tag คืออะไร?

เมื่อแชร์ลิ้งค์ไปยังโซเชียล (เช่น Facebook, X/Twitter, LINE) ระบบจะอ่าน meta tags ในหน้าเว็บเพื่อดึงรูป แ Title และคำอธิบายไปแสดง ตัวอย่างแท็กสำคัญคือ og:image (Open Graph) และ twitter:image.

2) สเปกและคำแนะนำของภาพ

Tip: บีบอัดรูปด้วยเครื่องมืออย่าง Squoosh หรือ TinyPNG เพื่อเร็วขึ้น
รูปตัวอย่าง

3) ได้ลิ้งค์ภาพจาก Postimages ยังไง

  1. เข้า postimages.org
  2. กด Upload → เลือกรูป (PNG/JPG) ขนาดตามสเปก
  3. หลังอัปโหลดเสร็จ เลือกคัดลอกลิงก์แบบ Direct link (ปลายทางเป็นไฟล์รูป เช่น .png หรือ .jpg)
  4. ทดสอบเปิดลิงก์ในแท็บใหม่ ต้องเห็นรูปขึ้นทันที
ข้อควรระวัง: บางลิงก์ที่เป็นหน้าเว็บแสดงรูป (ไม่ใช่ไฟล์ตรง) จะใช้กับ meta tag ไม่ได้ ให้ใช้ลิงก์ไฟล์ตรงเท่านั้น

4) ได้ลิ้งค์ภาพจาก Netlify Drop ยังไง

  1. เข้า Netlify Drop
  2. ลากไฟล์รูป (หรือโฟลเดอร์ที่มี index.html + รูป) ลงไป ระบบจะสร้างซับโดเมนชั่วคราวให้
  3. คัดลอก URL ของไฟล์รูป เช่น https://<random-subdomain>.netlify.app/images/og.png
  4. ทดสอบเปิดลิงก์ให้ขึ้นรูปทันที
Tip: ถ้าต้องการใช้ในโปรเจกต์ต่อเนื่อง แนะนำสร้างไซต์ Netlify ถาวร และอัปโหลดผ่าน Git หรือ Deploys เพื่อได้โดเมนคงที่

5) ใส่ภาพลงใน Meta Tags ยังไง

วางแท็กในส่วน <head> ของหน้า HTML:

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:title" content="ชื่อเพจของคุณ" />
<meta property="og:description" content="คำอธิบายสั้น ๆ เกี่ยวกับเพจ" />
<meta property="og:url" content="https://yourdomain.com/yourpage" />
<meta property="og:image" content="https://your-host.com/path/to/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ชื่อเพจของคุณ" />
<meta name="twitter:description" content="คำอธิบายสั้น ๆ เกี่ยวกับเพจ" />
<meta name="twitter:image" content="https://your-host.com/path/to/og-image.png" />
Tip: ใช้ URL แบบ absolute เต็ม (เริ่มต้นด้วย https://) เสมอสำหรับรูปและลิงก์

6) ตรวจสอบผลลัพธ์และเคลียร์แคช

หมายเหตุ: บางแพลตฟอร์มแคชรูปไว้นาน การอัปเดตรูปใหม่อาจต้องเปลี่ยนชื่อไฟล์หรือ query string เพื่อตัดแคช

7) เวิร์กโฟลว์สั้นๆ: จากไฟล์ → ลิ้งค์ → Meta

  1. เตรียมรูป 1200×630 (PNG/JPG) และบีบอัดให้เหมาะสม
  2. อัปโหลดไปยัง Postimages หรือ Netlify Drop เพื่อได้ Direct URL
  3. นำ URL ไปวางใน og:image และ twitter:image ตามตัวอย่าง
  4. เผยแพร่หน้าเว็บ (ถ้าใช้ Netlify Drop สำหรับทั้งหน้า จะได้ลิงก์ทันที)
  5. ตรวจสอบด้วย Debugger/Validator และแก้ไขถ้าจำเป็น

8) คำถามพบบ่อย

ต้องใช้รูปหลายขนาดไหม?

ไม่บังคับ แต่รูป 1200×630 จะครอบคลุมส่วนใหญ่ ใส่ og:image:width/height เพื่อช่วยระบบประมวลผล

ใช้ลิงก์มี query string ได้ไหม?

ส่วนใหญ่ได้ แต่แนะนำลิงก์ไฟล์ตรงเรียบๆ เพื่อความชัวร์

ต้องมี HTTPS ไหม?

ควรใช้ HTTPS เพื่อความน่าเชื่อถือและรองรับแพลตฟอร์มหลักทั้งหมด

กลับหน้าแรก (goonee) ไปที่ goometa.figma.site