OG Image Generator — เครื่องมือสร้างภาพแชร์โซเชียล

รูป Open Graph เป็นภาพที่ปรากฏเมื่อมีการวางลิงก์ในแชท ทวีต หรือช่อง Slack — และทุกแพลตฟอร์มที่แสดงผลจะคาดหวังแคนวาสขนาดประมาณ 1200×630 พิกเซล ซึ่งเป็นขนาดที่การ์ด og:image ของ Facebook และ summary_large_image ของ Twitter ถูกออกแบบมา หากขนาดผิดไป ภาพจะออกมาถูกครอป เบลอ หรือถูกบีบอัด หากจัดวางผิด ชื่อเรื่องจะอ่านไม่ออกเพราะเป็นแถบเส้นเล็ก ๆ บนภาพที่ยุ่งเหยิง เครื่องมือนี้จัดองค์ประกอบภาพที่ความละเอียดจริงโดยใช้ Canvas 2D API ดังนั้นสิ่งที่คุณเห็นในตัวอย่างคือผังพิกเซลจริงที่ถูกส่งออกไปในไฟล์ PNG

เลือกพื้นหลัง — สีเรียบ การไล่สีแนวเส้นจากสองสีที่คุณเลือก หรือภาพถ่ายที่อัปโหลดแล้วถูกครอปให้พอดีกับกรอบขนาด 1200×630 เต็มจอ คล้ายกับที่ CSS background-size: cover ทำ แทนที่จะถูกยืดจนเสียสัดส่วน พิมพ์ชื่อเรื่องและคำบรรยายเพิ่มเติม (ไม่บังคับ) ทั้งคู่ถูกวัดทีละตัวอักษรเทียบกับฟอนต์เมตริกของแคนวาสเอง ดังนั้นหัวเรื่องที่ยาวเกินกว่าจะอยู่ในหนึ่งบรรทัดจะตัดขึ้นบรรทัดที่สองหรือสามที่ตำแหน่งคำที่เหมาะสม โดยไม่เลยขอบหรือถูกตัดทิ้งอย่างมองไม่เห็น เลือกจัดกึ่งกลางหรือชิดซ้าย เลือกสีข้อความที่อ่านออกบนพื้นหลังของคุณ และวางโลโก้ที่มุมตามขนาดที่กำหนดไว้ อ่านง่าย

ด้านล่างของแคนวาส มีการ์ดขนาดเล็กสี่ใบแสดงโดยประมาณว่าภาพที่เสร็จแล้วจะเป็นอย่างไรเมื่อแพลตฟอร์มจริงนำไปใส่ในกรอบของตัวเอง: การ์ด Twitter/X แสดงเพียงชื่อโดเมนและชื่อเรื่องตัวหนาใต้ภาพ ไม่มีบรรทัดคำอธิบาย Facebook เพิ่มแถบชื่อโดเมนตัวพิมพ์ใหญ่เหนือบล็อกชื่อเรื่องและคำอธิบาย LinkedIn วางชื่อโดเมนไว้ใต้ชื่อเรื่องโดยไม่มีคำอธิบายเลย และ Discord embed วางชื่อโดเมน ชื่อเรื่อง และคำอธิบายเหนือภาพในธีมมืดของตัวเอง ทั้งหมดนี้เป็นตัวอย่างจัดรูปแบบเพื่อการวางแผน — มีป้ายระบุอย่างชัดเจนว่าเป็นภาพประกอบ พร้อมบรรทัดชื่อโดเมนที่คุณพิมพ์เอง — ไม่ใช่การดึงข้อมูลสดหรือภาพหน้าจอจากแพลตฟอร์มจริง เพราะการแชร์ลิงก์และให้ crawler ของแต่ละแพลตฟอร์มอ่าน meta tag og:image และ og:title จริง ๆ ในหน้าเว็บของคุณต่างหากจึงจะสร้างการ์ดจริงได้

ทุกอย่างแสดงผลภายในองค์ประกอบ canvas HTML ในเบราว์เซอร์ของคุณ: ชื่อเรื่อง คำบรรยาย ภาพพื้นหลังและโลโก้ที่อัปโหลดจะไม่มีวันออกจากอุปกรณ์ของคุณ และไฟล์ที่ส่งออกเป็น PNG สะอาดที่มาจาก canvas.toBlob() มีเฉพาะสิ่งที่คุณจัดองค์ประกอบ — ไม่มีการตกแต่งจำลอง กรอบเบราว์เซอร์ปลอม หรือโลโก้แพลตฟอร์มใด ๆ ติดอยู่ในภาพที่ดาวน์โหลด หากคุณต้องการปรับขนาดหรือแปลงไฟล์ PNG ที่ได้หลังจากนั้น เครื่องมือปรับขนาดภาพและแปลงภาพของเว็บไซต์นี้พร้อมใช้งานต่อจากจุดนี้ทันที