สร้างภาพ Open Graph
ออกแบบภาพแชร์โซเชียลขนาด 1200x630 พร้อมชื่อเรื่อง โลโก้ และพื้นหลัง แล้วดาวน์โหลดเป็น PNG ทำงานทั้งหมดในเบราว์เซอร์ของคุณ
ประมวลผลในเบราว์เซอร์ของคุณ ไฟล์ของคุณไม่ถูกอัปโหลด
เครื่องมือนี้ทำอะไรได้
ภาพ Open Graph คือภาพที่ปรากฏเมื่อมีการแชร์ลิงก์บนเครือข่ายโซเชียล แอปแชท และตัวอย่างในผลการค้นหา เครื่องมือนี้เรนเดอร์ภาพ PNG ขนาด 1200x630 ซึ่งเป็นขนาดที่แพลตฟอร์มส่วนใหญ่แนะนำ จากชื่อเรื่อง คำบรรยายรอง โลโก้ (ไม่บังคับ) และพื้นหลังที่คุณเลือก ได้แก่ สีทึบ ไล่สีสองสีที่ปรับมุมได้ หรือรูปถ่ายของคุณเองพร้อมชั้นเงามืดเพื่อให้ข้อความอ่านง่าย
ข้อความจะตัดบรรทัดอัตโนมัติและย่อให้พอดีกับเลย์เอาต์เมื่อชื่อเรื่องยาว คุณจึงไม่ต้องจัดการขึ้นบรรทัดใหม่เอง การตัดบรรทัดใช้ได้กับอักษรที่ไม่มีเว้นวรรค เช่น จีนและญี่ปุ่น (ตัดระหว่างตัวอักษร) และข้อความที่เขียนจากขวาไปซ้ายจะแสดงในทิศทางที่ถูกต้อง คุณควบคุมแบบอักษรจากรายการที่ปลอดภัยสำหรับระบบ ขนาด น้ำหนัก สี และระยะห่างบรรทัดได้
มีเทมเพลตเริ่มต้นหกแบบ ภาพถูกวาดบน canvas ในเบราว์เซอร์ของคุณและไม่ถูกอัปโหลด
วิธีใช้งาน
- 1เลือกเทมเพลตเป็นจุดเริ่มต้น หรือเริ่มจากค่าเริ่มต้น
- 2พิมพ์ชื่อเรื่องและคำบรรยายรอง ปรับการจัดแนว แบบอักษร ขนาด และสี
- 3เลือกพื้นหลัง ได้แก่ สีทึบ ไล่สี หรือภาพที่อัปโหลด สำหรับรูปถ่าย ให้เพิ่มชั้นเงามืดจนข้อความอ่านง่าย
- 4เพิ่มโลโก้ได้ตามต้องการ และเลือกมุมที่จะวาง
- 5ดาวน์โหลด PNG แล้วอ้างอิงในหน้าเว็บด้วยแท็ก meta og:image
รูปแบบที่รองรับ
อินพุต: PNG, JPG, WebP หรือ SVG สำหรับโลโก้และพื้นหลัง เอาต์พุต: PNG ขนาด 1200x630
ความเป็นส่วนตัว
เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณ ข้อมูลที่คุณป้อนจะถูกประมวลผลบนอุปกรณ์ของคุณและไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา
ข้อจำกัด
- ใช้ได้เฉพาะแบบอักษรที่ติดตั้งในอุปกรณ์ของผู้ดู (รายการที่ปลอดภัยสำหรับระบบ) ดีไซน์เดียวกันจึงอาจดูต่างออกไปเล็กน้อยบนระบบปฏิบัติการอื่น ดาวน์โหลด PNG เพื่อตรึงผลลัพธ์ไว้
- ชื่อเรื่องที่ยาวมากจะถูกย่อลงถึงขนาดต่ำสุด แล้วตัดด้วยจุดไข่ปลาแทนที่จะล้นออกนอกภาพ
- อีโมจิและอักษรที่พบน้อยขึ้นอยู่กับแบบอักษรที่ติดตั้งในอุปกรณ์ของคุณ
- แต่ละแพลตฟอร์มอาจครอบตัดหรือแคชภาพต่างกัน ควรวางเนื้อหาสำคัญให้ห่างจากขอบ (เลย์เอาต์เว้นขอบไว้ 72 px อยู่แล้ว)
คำถามที่พบบ่อย
ภาพ Open Graph ควรมีขนาดเท่าไร
1200x630 พิกเซล (ประมาณ 1.91:1) ใช้ได้กับ Facebook, LinkedIn, Slack, Discord และเป็นการ์ดขนาดใหญ่บน Twitter/X ควรให้มีขนาดไม่เกินประมาณ 5 MB โดยทั่วไป PNG จากเครื่องมือนี้เล็กกว่านั้นมาก
จะใช้ภาพนี้บนเว็บไซต์ของฉันอย่างไร
อัปโหลดภาพไปยังเว็บไซต์ แล้วเพิ่ม <meta property="og:image" content="https://example.com/og.png"> พร้อมแท็ก meta twitter:card ที่มีค่า summary_large_image ใน head ของหน้า ควรใช้ URL แบบเต็ม (absolute)
มีเทมเพลตอะไรให้ใช้บ้าง
เที่ยงคืน, แสงกลางวัน, ออโรรา, พระอาทิตย์ตก, นิตยสาร และ เทอร์มินัล คุณยังสร้างสไตล์ใดก็ได้เองด้วยตัวควบคุมต่าง ๆ
รองรับข้อความภาษาจีน ญี่ปุ่น หรืออาหรับหรือไม่
รองรับ ตราบใดที่อุปกรณ์ของคุณมีแบบอักษรสำหรับอักษรนั้น ข้อความ CJK จะตัดบรรทัดระหว่างตัวอักษร และข้อความอาหรับ/ฮีบรูจะแสดงจากขวาไปซ้าย
เครื่องมือที่เกี่ยวข้อง
สร้างม็อกอัปภาพหน้าจอ
ใส่ภาพหน้าจอลงในกรอบเบราว์เซอร์ แล็ปท็อป โทรศัพท์ หรือแท็บเล็ต พร้อมพื้นหลังและเงาที่กำหนดเอง แล้วส่งออกเป็น PNG
สร้าง Favicon
เปลี่ยนรูปภาพเดียวให้เป็นชุด favicon ครบถ้วน ทั้ง favicon.ico ไอคอน PNG หลายขนาด Apple touch icon ไอคอน Android เว็บแมนิเฟสต์ และแท็ก HTML
สร้างจานสี
สร้างชุดสีที่เข้ากันจากสีหลัก ล็อกสีที่ชอบ ตรวจสอบคอนทราสต์ WCAG และส่งออกเป็น CSS, Tailwind, JSON หรือ PNG
ดึงจานสีจากรูปภาพ
ดึงสีเด่นจากรูปภาพใดก็ได้ คัดลอกรหัส hex เลือกสีจากพิกเซลที่ต้องการด้วยเครื่องมือหยดสี และส่งออกจานสี