เครื่องมือสร้างและดูตัวอย่างภาพ Open Graph

สร้างและดูตัวอย่างภาพ Open Graph (OG Image) ฟรี | We.Inc

สร้างภาพ Open Graph ขนาด 1200 x 630 ในเบราว์เซอร์ ใส่ title, subtitle สีแบรนด์ และโลโก้ แล้วดาวน์โหลดเป็น PNG ดูตัวอย่างการ์ดแชร์ Facebook, LinkedIn และ X พร้อมคัดลอก meta tag ฟรี

เครื่องมือสร้างและดูตัวอย่างภาพ Open Graph

ออกแบบภาพที่แสดงเมื่อมีคนแชร์ลิงก์ของคุณ พิมพ์ title และ subtitle เลือกสีและเลย์เอาต์ เพิ่มโลโก้ แล้วดาวน์โหลด PNG ขนาด 1200 x 630 จากนั้นดูตัวอย่างการ์ดแชร์บน Facebook, LinkedIn และ X แล้วคัดลอก meta tag ไปใส่หน้าเว็บ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ไม่มีการส่งสิ่งที่พิมพ์หรืออัปโหลดไปยัง We.Inc หรือบุคคลอื่น

พิมพ์ title, subtitle และชื่อเว็บไซต์ (ไม่บังคับ) title ยาวจะขึ้นบรรทัดใหม่ได้สูงสุด 3 บรรทัด
เลือกเลย์เอาต์ สีพื้นหลังและสีข้อความ หรือเลือกชุดสีสำเร็จรูป
อัปโหลดโลโก้ได้ตามต้องการ (PNG, JPG, SVG หรือ WebP) ระบบวาดไว้ที่มุมภาพและไฟล์ไม่ออกจากอุปกรณ์
กดดาวน์โหลด PNG เพื่อบันทึกภาพขนาด 1200 x 630 ซึ่งเป็นขนาดที่ Facebook, LinkedIn และ X ใช้กับตัวอย่างลิงก์ขนาดใหญ่
อัปโหลดภาพไปยังเว็บไซต์ วาง URL แบบเต็มในช่อง Image URL แล้วคัดลอก meta tag ที่สร้างขึ้นไปใส่ในส่วน head ของหน้า

พยายามให้ title ต่ำกว่าประมาณ 60 ตัวอักษรและใหญ่พออ่านบนโทรศัพท์ ซึ่งแสดงการ์ดแชร์ขนาดเล็ก
เว้นขอบรอบข้อความ แอปบางตัวครอบขอบหรือแสดงภาพเป็นสี่เหลี่ยมจัตุรัส
ใช้คอนทราสต์สูงระหว่างข้อความกับพื้นหลัง ใช้เครื่องมือตรวจคอนทราสต์สียืนยันได้
หลังเผยแพร่ แอปโซเชียลอาจเก็บภาพเก่าไว้ในแคช Facebook Sharing Debugger และ LinkedIn Post Inspector ใช้รีเฟรชได้
ทำภาพแยกให้แต่ละหน้าสำคัญ การ์ดที่มีแต่โลโก้ทั่วไปได้คลิกน้อยกว่าการ์ดที่ระบุชื่อหน้า

คำถามที่พบบ่อย

ภาพ Open Graph ควรมีขนาดเท่าไร

1200 x 630 พิกเซล (อัตราส่วน 1.91:1) เป็นขนาดมาตรฐานสำหรับการ์ดขนาดใหญ่ใน Facebook, LinkedIn และ X เครื่องมือนี้ส่งออกภาพขนาดดังกล่าวเสมอ

เครื่องมือสร้าง OG image นี้ใช้ฟรีไหม

ฟรี ไม่ต้องสมัครสมาชิกและไม่มีลายน้ำ วาดภาพบน canvas ในเบราว์เซอร์และดาวน์โหลดไปยังอุปกรณ์ของคุณโดยตรง

โลโก้ของฉันถูกอัปโหลดไปที่ใดไหม

ไม่ เบราว์เซอร์อ่านโลโก้และวาดลงบนภาพในเครื่อง ไม่มีการส่งข้อมูลไปยัง We.Inc

เพิ่มภาพลงในเว็บไซต์อย่างไร

อัปโหลด PNG ไปยังเว็บไซต์ให้มี URL สาธารณะ จากนั้นเพิ่ม <meta property="og:image" content="that URL"> และ twitter:image tag ในส่วน head ของหน้า วาง URL ในเครื่องมือแล้วระบบจะสร้างแท็กให้

ทำไมยังเห็นภาพเก่าเมื่อแชร์ลิงก์

เครือข่ายสังคมเก็บตัวอย่างไว้ในแคช ใช้ Facebook Sharing Debugger หรือ LinkedIn Post Inspector ดึง URL ใหม่ หรือรอให้แคชหมดอายุ

เครื่องมืออ่านแท็กจากหน้าเว็บที่เปิดใช้งานอยู่ได้ไหม

ไม่ได้ เบราว์เซอร์ไม่อนุญาตให้เว็บไซต์หนึ่งอ่านอีกเว็บไซต์ คุณจึงกรอก title, description และ URL ภาพเอง แล้วเครื่องมือจะแสดงตัวอย่าง

ภาพ Open Graph ทำอะไร

เมื่อวางลิงก์ใน Facebook, LinkedIn, X, Slack หรือแอปส่งข้อความ แอปจะอ่าน Open Graph tag ของหน้าเว็บแล้วแสดงการ์ดที่มีภาพ title และ description สั้น ๆ ภาพเป็นส่วนใหญ่ที่สุดของการ์ด จึงเป็นตัวกำหนดว่าคนจะสังเกตเห็นลิงก์หรือไม่
หากไม่มี og:image แอปอาจไม่แสดงภาพหรือสุ่มเลือกจากหน้า ภาพเรียบง่ายที่มีชื่อหน้าและแบรนด์ของคุณก็เพียงพอให้ดูตั้งใจออกแบบ

หลัก 3 ข้อสำหรับภาพ OG ที่ดี

บอกใจความของหน้าในไม่กี่คำด้วยตัวอักษรขนาดใหญ่ ใช้สีแบรนด์เพื่อให้คนจำคุณได้เมื่อเห็นภาพแชร์ และเว้นเนื้อหาสำคัญจากขอบ เพราะบางแอปครอบภาพเป็นสี่เหลี่ยมจัตุรัสหรือตัดมุม

สำหรับเว็บไซต์ We.Inc

เว็บไซต์ที่สร้างด้วย We.Inc มี title description และภาพแชร์ให้ตั้งค่าได้ในแผง SEO ระบบจึงเขียน tag ให้ เครื่องมือนี้ใช้ได้กับเว็บไซต์ทุกแบบและใช้สร้างภาพแชร์โดยตรงได้

เริ่มต้นฟรี · ไม่ต้องใช้บัตรเครดิต

Product

AI Website Builder: Describe a site in plain English; it's live in minutes
White Label Platform: Your brand, your domain, your margin
Enterprise: SSO, custom SLAs, and dedicated support
Developer API: Embed site generation into your SaaS

Who It's For

For Agencies: Resell under your brand
For Freelancers: Your own branded builder
For Hosting Providers: Add a builder to your stack
For SaaS Platforms: Embed site creation via API
For Startups
For Financial Services
For Healthcare

Features

Resources

Company

View Sitemap