หัวข้อ

สร้างรูปภาพ Twitter Card ด้วย API

รูปภาพ Twitter (X) card คือภาพตัวอย่างขนาดใหญ่ที่แสดงเมื่อมีการแชร์ลิงก์บน X FastOG จะสร้างรูปภาพดังกล่าวแบบไดนามิกที่ขนาด 1200×630 และส่งสัญญาณ summary_large_image เพื่อให้ทุกหน้าได้รับ X card ที่ถูกต้องโดยไม่ต้องสร้างรูปภาพด้วยตนเอง

สิ่งที่รูปภาพ Twitter card ต้องการ

X อ่านแท็ก Open Graph และแสดงผลการ์ด summary_large_image เมื่อหน้าเว็บมีลิงก์ twitter:card = summary_large_image รูปภาพจะแสดงผลที่ขนาด 1200×630 FastOG สร้างขนาดนั้นได้พอดี และคุณชี้ twitter:image ไปที่ URL แบบไดนามิกเดียวกันกับ og:image

วิธีเชื่อมต่อ Twitter card แบบไดนามิก

สร้าง URL ของ FastOG หนึ่งครั้ง จากนั้นตั้งค่า meta tags ทั้ง OG และ Twitter ให้ชี้ไปที่ URL นั้น

html

<meta property="og:image" content="https://fastog.com/api/v1/og?template=default&title=My+Post&key=sk_...&s=...">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Post">
<meta name="twitter:image" content="https://fastog.com/api/v1/og?template=default&title=My+Post&key=sk_...&s=...">

URL เดียวกันนี้ใช้ได้กับทั้งสองแท็ก X จะใช้ค่า og:image เป็นตัวสำรองหากไม่มี twitter:image แต่การตั้งค่าทั้งสองไว้ก็ไม่เสียหายและชัดเจนดี

เคล็ดลับสำหรับตัวตรวจสอบการ์ด X

รายการตรวจสอบ	รายละเอียด
URL สาธารณะ	รูปภาพต้อง能被 X ดึงข้อมูลได้โดยไม่ต้องมีการยืนยันตัวตน
ขนาดไฟล์ / รูปแบบ	เก็บให้ต่ำกว่า 5 MB; PNG เหมาะที่สุดสำหรับการ์ดที่มีข้อความ
แคช	X แคชข้อมูลอย่างจริงจัง — ใช้ตัวตรวจสอบการ์ด (Card Validator) เพื่อบังคับให้รีเฟรช
URL ที่ลงนาม	URL ที่ลงนามเนื้อหาของ FastOG จะจำกัดเฉพาะการเรนเดอร์ครั้งแรกเท่านั้น; การ์ดที่ถูกแคชแล้วจะยังคงใช้งานได้

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

ฉันจำเป็นต้องมีรูปภาพแยกสำหรับ X และ Open Graph หรือไม่?

ไม่จำเป็น X อ่านรูปภาพขนาด 1200×630 เดียวกันได้ หน้านี้มีขึ้นเพราะแท็ก twitter:card ที่ถูกต้องนั้นง่ายที่จะทำผิดพลาด

ทำไมการ์ด X ของฉันไม่อัปเดตหลังจากที่ฉันเปลี่ยนชื่อเรื่อง?

X แคชการ์ดเก่าไว้ เปิด X Card Validator วาง URL แล้วทำการ re-scrape ใหม่

FastOG จัดการแท็ก meta ของ twitter ด้วยหรือไม่?

FastOG สร้างรูปภาพเท่านั้น คุณยังต้องเพิ่มแท็ก meta twitter:card และ twitter:image ลงในหน้าเว็บของคุณเอง (ตามที่แสดงด้านบน) เครื่องมือฟรีของเรา Open Graph Meta Tag Generator จะเขียนแท็กทั้งหมดให้คุณ

ลองใช้ฟรี — ไม่ต้องสมัครสมาชิก

ดูตัวอย่างและทดสอบภาพ OG แบบไดนามิกได้ในไม่กี่วินาที

เปิดตัวทดสอบภาพ OG ฟรี