HedgieTools

ดูตัวอย่างการแชร์บนโซเชียล

ดูว่าหน้าเว็บจะแสดงผลอย่างไรเมื่อแชร์บน Google, Facebook, X, LinkedIn, WhatsApp, Slack, Discord หรือ Pinterest แก้ส่วนที่ถูกตัด และคัดลอกแท็ก Open Graph ที่พร้อมวาง

1. ข้อมูลหน้าเว็บ

กรอกแบบฟอร์ม หรือนำเข้าจากโค้ดของหน้าเว็บ

0 / 60
0 / 155
ประเภทหน้าเว็บ
ภาพสำหรับแชร์

JPG, PNG, WebP หรือ GIF ภาพที่เลือกใช้สำหรับดูตัวอย่างเท่านั้น ให้ใส่ที่อยู่ออนไลน์ของภาพด้วยเพื่อใช้ในโค้ด

2. ดูตัวอย่าง

จำลองการแสดงผลของแต่ละแพลตฟอร์ม ผลจริงอาจต่างกันเล็กน้อย แต่ส่วนที่ถูกตัดจะใกล้เคียงของจริง

Google

Eexample.comhttps://example.com › …
หัวข้อหน้าคำอธิบายหน้าเว็บจะแสดงที่นี่

Facebook

example.comหัวข้อหน้าคำอธิบายหน้าเว็บจะแสดงที่นี่

X

หัวข้อหน้า
จาก example.com

LinkedIn

หัวข้อหน้าexample.com

WhatsApp

หัวข้อหน้าคำอธิบายหน้าเว็บจะแสดงที่นี่example.com
https://example.com10:24

Slack

example.comหัวข้อหน้าคำอธิบายหน้าเว็บจะแสดงที่นี่

Discord

example.comหัวข้อหน้าคำอธิบายหน้าเว็บจะแสดงที่นี่

Pinterest

หัวข้อหน้าEexample.com

Pinterest แสดงภาพเต็มโดยไม่ครอป ภาพแนวตั้ง (2:3 เช่น 1000 × 1500 px) จะได้พื้นที่มากกว่าบน Pinterest แต่จะถูกครอปบนแพลตฟอร์มอื่น

3. การตรวจสอบและโค้ด

สิ่งที่ควรแก้ไข และแท็กสำหรับวางลงในหน้าเว็บ

  • ปัญหาไม่มีชื่อเรื่องหากไม่มีชื่อเรื่อง แต่ละโซเชียลจะตั้งชื่อเองจากเนื้อหาในหน้าเว็บ
  • ปัญหาไม่มีคำอธิบายโซเชียลจะดึงข้อความบางส่วนจากหน้าเว็บมาแทน ซึ่งมักเลือกได้ไม่ดี
  • ปัญหาไม่มีรูปภาพลิงก์ที่ไม่มีภาพได้คลิกน้อยกว่ามาก ควรเตรียมภาพขนาด 1200 × 630 px
  • ควรปรับปรุงไม่มีที่อยู่หน้าเว็บog:url ระบุที่อยู่หลักของหน้าเว็บ เพื่อให้การแชร์ทั้งหมดถูกรวมไว้ด้วยกัน

วางโค้ดนี้ในส่วน head ของหน้าเว็บ

กรอกแบบฟอร์มเพื่อสร้างโค้ด

เกี่ยวกับเครื่องมือดูตัวอย่างการแชร์บนโซเชียล

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

ทำให้ลิงก์ดูดี

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

ความยาวที่เหมาะสม

Google ตัดชื่อเรื่องที่ประมาณ 60 ตัวอักษร และคำอธิบายที่ประมาณ 155 ตัวอักษร ภาพขนาด 1200 × 630 พิกเซล (1.91:1) แสดงผลดีทุกที่ ควรวางส่วนสำคัญไว้ตรงกลาง เพราะบางแพลตฟอร์มจะครอปภาพ ส่วน Pinterest เหมาะกับภาพแนวตั้ง

โค้ดพร้อมวาง

คัดลอกแท็ก HTML ไปวางในส่วน head ของหน้าเว็บ หรือคัดลอกออบเจ็กต์ metadata สำหรับเว็บไซต์ Next.js หลังเผยแพร่แล้ว บางโซเชียลอาจเก็บตัวอย่างเก่าไว้ในแคชอีกสองสามวัน

ไม่มีอะไรถูกอัปโหลด

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

เครื่องมือที่เกี่ยวข้อง

นักพัฒนา

ถอดรหัส JWT

อ่านส่วนหัว เพย์โหลด และวันที่ของ JWT พร้อมตรวจสอบลายเซ็น