OG Image Generator - เครื่องมือสร้างภาพแบ่งปันทางสังคม

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

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

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

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