หัวข้อ

เอกสารอ้างอิง OG Image API

เอกสารอ้างอิง OG image API ครอบคลุม endpoint พารามิเตอร์ และแค็ตตาล็อกเทมเพลตสำหรับการสร้างภาพ Open Graph แบบไดนามิกด้วย FastOG API นี้ต้องมีแพ็กเกจการใช้งาน — จำเป็นต้องมีแพ็กเกจ Dynamic API ที่ใช้งานอยู่ แต่ การเรนเดอร์เองไม่ถูกนับเป็นปริมาณการใช้งาน: ไม่มีโควตาการเรนเดอร์รายเดือนและไม่มีค่าใช้จ่ายส่วนเกิน URL ที่ลงนามด้วย HMAC ช่วยรักษาความปลอดภัยของแต่ละคำขอ สมัครสมาชิก เลือกแพ็กเกจ Dynamic API จากนั้นสร้าง API key และ HMAC secret ในแดชบอร์ด การเรนเดอร์ผ่าน API แบบชำระเงินไม่มีค่าใช้จ่ายแอบแฝง สัญญา OpenAPI ที่สร้างขึ้นเป็นรายการพารามิเตอร์ รหัสข้อผิดพลาด และ slug ของเทมเพลตที่อ่านได้ด้วยเครื่องและถือเป็นแหล่งอ้างอิงหลัก

Base URL

https://fastog.com/api/v1/og

การยืนยันตัวตน

ทุกคำขอจำเป็นต้องยืนยันตัวตนด้วยลายเซ็น HMAC-SHA256 โดย key สาธารณะและลายเซ็น s เป็นพารามิเตอร์ใน query ส่วนการยืนยันตัวตนผ่าน header ยังไม่รองรับในขณะนี้ ดูรายละเอียดได้ที่ เอกสาร HMAC

Endpoint

GET `/api/v1/og`

สร้างภาพ Open Graph แบบไดนามิกตามพารามิเตอร์ที่ระบุ

พารามิเตอร์ Query

พารามิเตอร์	ชนิด	จำเป็น	คำอธิบาย
`template`	string	ไม่	ชื่อเทมเพลต (ค่าเริ่มต้น: `default`)
`title`	string	ใช่	หัวข้อหลัก จำเป็น — ภาพปกที่ไม่มีหัวข้อไม่ใช่ตัวอย่างที่มีประโยชน์
`subtitle`	string	ไม่	ข้อความคำอธิบายรองหรือคำอธิบาย
`key`	string	ใช่	API key แบบเต็ม
`s`	string	ใช่	ลายเซ็น HMAC-SHA256 (64 ตัวอักษร hex)

พารามิเตอร์เฉพาะเทมเพลต

ทุกเทมเพลตยอมรับพารามิเตอร์ที่ใช้ร่วมกันด้านล่าง รวมถึง พารามิเตอร์เฉพาะเทมเพลตของตน (ดูตารางดัชนี) พารามิเตอร์ query template ใช้เลือกเลย์เอาต์ที่จะใช้ (ค่าเริ่มต้น: default)

พารามิเตอร์ที่ใช้ร่วมกัน (ทุกเทมเพลต)

พารามิเตอร์	ชนิด	คำอธิบาย
`title`	string	ข้อความหัวข้อหลัก
`subtitle`	string	ข้อความสนับสนุน
`tags`	list	ป้ายกำกับแท็กคั่นด้วยเครื่องหมายจุลภาค
`theme`	string	`dark` \| `light` \| `glass` \| `solid` \| `midnight` \| `vivid` \| `paper` \| `glass_light` \| `custom`
`gradient_preset`	string	พรีเซ็ตไล่ระดับสีแบบมีชื่อ (เช่น `indigo`, `ocean`, `sunset`, `cosmic`)
`gradient_direction`	number	มุมไล่ระดับสีเป็นองศา (ค่าเริ่มต้น `135`)
`bg_color`	hex	สีพื้นหลังทึบ
`pattern`	string	ลวดลายพื้นหลัง (`grid`, `dots`, `noise`, `none`, …)
`pattern_color`	hex	สีลวดลาย
`pattern_intensity`	number	ความทึบของลวดลาย (1–30)
`font_family`	string	`font-sans`, `font-jakarta`, `font-dm`, `font-outfit`, `font-space`, `font-playfair`, `font-merriweather`, `font-instrument`, `font-jetbrains`, `font-fira`
`accent_color`	hex	สีเน้นสำหรับไฮไลต์
`auto_text_color`	bool	สีข้อความที่ได้มาจากพื้นหลัง (ค่าเริ่มต้น `true`)
`title_color`	hex	แทนที่สีหัวข้อ
`subtitle_color`	hex	แทนที่สีคำอธิบายรอง
`brand_name`	string	ข้อความแบรนด์/โลโก้ (ค่าเริ่มต้น `FastOG`)
`brand_logo`	string	URL รูปภาพโลโก้แบรนด์
`layout_mode`	string	`split` \| `centered` \| `banner` (ใช้ตัวแปรเฉพาะเทมเพลต)

ดัชนีเทมเพลต — 67 slug ที่เรนเดอร์ได้, 48 ที่เลือกได้ ตารางด้านล่างอธิบายลุคที่ใช้มากที่สุดและพร็อพเฉพาะของแต่ละเทมเพลต รายการแบบครบถ้วนที่สร้างขึ้น (label, หมวดหมู่, สถานะ retired และทุก slug ที่รองรับ) อยู่ใน /openapi.json ภายใต้ x-template-catalogue และฟิลด์ในตัวแก้ไขของทุกเทมเพลต (key, label, type, default, options และรูปแบบ URL) อยู่ใน x-template-fields slug ที่ retired ยังคงเรนเดอร์ได้เพื่อให้ URL ที่มีอยู่แล้วยังใช้งานได้ แต่ตัวเลือกจะไม่แสดงใน picker

`template`	เทมเพลต	หมวดหมู่	พารามิเตอร์เพิ่มเติม
`default`	Default	แบรนด์	—
`blog`	Blog Post	เนื้อหา	`author`, `date`, `domain`
`ecommerce`	E-commerce	พาณิชย์	`price`, `original_price`, `rating`, `rating_total`, `features`, `badge`, `cta`, `image`, `domain`
`company`	Company	แบรนด์	`domain`, `logo`, `tag`
`launch`	Product Launch	แบรนด์	`kicker`, `version`, `tag`, `cta`, `domain`
`saaslaunch`	SaaS Launch	แบรนด์	`kicker`, `cta`, `domain`
`devtool`	Developer Tool	นักพัฒนา	`version`, `badge`, `domain`
`game`	Game	เนื้อหา	`price`, `rating`, `image`, `domain`
`event`	Event	โซเชียล	`location`, `host`, `date`, `domain`
`quote`	Quote	โซเชียล	`quote`, `author_name`, `author_title`
`job`	Job Posting	โซเชียล	`location`, `department`, `salary`, `job_type`, `domain`
`stats`	Stats	ข้อมูล	`metric`, `metric_label`, `delta`
`pricing`	Pricing	พาณิชย์	`price`, `period`, `cta`
`podcast`	Podcast	สื่อ	`episode_number`, `guest_name`, `guest_role`, `duration`
`video`	Video	สื่อ	`duration`, `channel`, `views`
`editorial`	Editorial	เนื้อหา	`kicker`, `author`, `date`, `domain`
`minimal`	Minimal	แบรนด์	`domain`
`changelog`	Changelog	นักพัฒนา	`version`, `tag`
`corporate`	Corporate	แบรนด์	`kicker`, `tag`, `domain`
`hero`	Hero	แบรนด์	`kicker`, `cta`, `status`, `domain`
`imageright`	Image Right	พาณิชย์	`kicker`, `price`, `original_price`, `rating`, `rating_total`, `badge`, `cta`, `image`, `domain`
`specgrid`	Spec Grid	พาณิชย์	`specs` (รายการของ `Label
`logos`	Logo Wall	แบรนด์	`kicker`, `brand_logos`, `domain`
`notice`	Notice	โซเชียล	`notice_status`, `notice_icon`, `notice_text`, `date`, `domain`
`testimonial`	Testimonial	โซเชียล	`quote`, `author_name`, `author_title`, `company`, `author_avatar`, `rating`, `rating_total`, `quote_style`
`logofocus`	Logo Focus	เนื้อหา	`kicker`, `domain`
`xheader`	X Header	โซเชียล	`size`, `handle`, `followers`, `location`, `website`, `avatar`
`bento`	Bento	ข้อมูล	`kicker`, `tiles`, `domain`
`comparison`	Comparison	พาณิชย์	`kicker`, `left_label`, `left_desc`, `left_points`, `right_label`, `right_desc`, `right_points`, `verdict`
`timeline`	Timeline	เนื้อหา	`kicker`, `milestones`, `domain`
`countdown`	Countdown	แบรนด์	`kicker`, `target_date`, `cta`, `domain`
`news`	News	เนื้อหา	`headline`, `byline`, `author`, `date`, `source`, `image`
`code`	Code	นักพัฒนา	`code`, `language`, `terminal_title`, `author`, `domain`
`testimonialpro`	Testimonial Pro	โซเชียล	`quote`, `author_name`, `author_title`, `company`, `author_avatar`, `rating`, `rating_total`, `cta`
`product`	Product	พาณิชย์	`badge`, `title`, `price`, `original_price`, `rating`, `rating_total`, `features`, `cta`, `image`, `layout_mode`
`promo`	Promo	แบรนด์	`brand_name`, `benefits`, `title`, `subtitle`, `domain`, `layout_mode`
`devblog`	Dev Blog	เนื้อหา	`category`, `title`, `subtitle`, `tags`, `author`, `author_title`, `date`, `read_time`, `views`, `likes`, `comments`, `code`, `language`, `file_path`
`codepost`	Code Post	เนื้อหา	`category`, `date`, `title`, `subtitle`, `author`, `read_time`, `code`, `file_path`, `language`
`statsbar`	Stats Bar	ข้อมูล	`kicker`, `metric`, `metric_label`, `delta`, `stats`, `domain`
`changelogpro`	Changelog Pro	นักพัฒนา	`version`, `tag`, `title`, `changes`, `features`, `domain`
`quotecta`	Quote CTA	โซเชียล	`quote`, `author_name`, `author_title`, `company`, `cta`, `domain`
`appscreenshot`	App Screenshot	สื่อ	`badge`, `title`, `subtitle`, `app_name`, `rating`, `screenshot`, `domain`
`realestate`	Real Estate	พาณิชย์	`title`, `subtitle`, `price`, `beds`, `baths`, `sqft`, `cta_text`, `status`, `image_url`, `domain`
`autorental`	Auto Rental	พาณิชย์	`title`, `subtitle`, `rate_badge`, `cta_text`, `fleet_tag`, `image_url`, `domain`
`restaurant`	Restaurant	พาณิชย์	`kicker`, `title`, `subtitle`, `price`, `cta_text`, `badge`, `image_url`, `domain`
`hospitality`	Hospitality	สื่อ	`kicker`, `title`, `subtitle`, `rate`, `cta_text`, `image_url`, `domain`
`saasspend`	SaaS Spend	แบรนด์	`status_pill`, `title`, `subtitle`, `cta_text`, `stat_callout`, `dashboard_image`, `domain`
`brutalist`	Brutalist	แบรนด์	`agency_tag`, `title`, `subtitle`, `cta_text`, `footer_note`, `domain`
`training`	Training	โซเชียล	`track`, `dates`, `title`, `subtitle`, `cta_text`, `location`, `image_url`, `domain`
`ecosystem`	Ecosystem	นักพัฒนา	`kicker`, `title`, `subtitle`, `apps_list`, `dock_label`, `domain`

glassproduct รองรับ cta เช่นกัน เทมเพลต ecommerce, product, glassproduct และ imageright จะแสดง “Shop now” เป็นค่าเริ่มต้น ตั้งค่า cta เป็นค่าว่างเพื่อซ่อนปุ่มที่แสดง

ประเภทพารามิเตอร์แบบมีโครงสร้าง

ประเภท	รูปแบบ	ตัวอย่าง
`list`	ค่าคั่นด้วยเครื่องหมายจุลภาค	`features=Fast,Cheap,Secure`
`tiles`	คู่ `label\|value` คั่นด้วยบรรทัด	`tiles=Requests\|12.4M\nUptime\|99.99%`
`milestones`	`date\|title\|description` คั่นด้วยบรรทัด	`milestones=Q3 2026\|Alpha\|Invite-only`
`changes`	`type\|text` คั่นด้วยบรรทัด (`added`,`fixed`,`improved`,`removed`)	`changes=added\|Bento templates`

การตอบกลับ

200 OK — ส่งคืนข้อมูลภาพ PNG
401 Unauthorized — การยืนยันตัวตนไม่ถูกต้องหรือไม่มี
422 Unprocessable — พารามิเตอร์ของเทมเพลตไม่ถูกต้อง

การตอบกลับข้อผิดพลาด

รหัสข้อผิดพลาด	สถานะ HTTP	คำอธิบาย
`missing_signature`	401	ไม่มีพารามิเตอร์ `key` หรือ `s`
`invalid_signature`	401	การตรวจสอบลายเซ็นล้มเหลว

ตัวอย่างคำขอ

GET /api/v1/og?template=blog&title=Hello%20World&subtitle=A%20test%20post&key=sk_quick_123abc&s=a1b2c3...

ตัวอย่าง cURL

bash

curl "https://fastog.com/api/v1/og?template=blog&title=Hello%20World&key=sk_quick_123abc&s=<signature>"

ราคาและขีดจำกัด

FastOG ถูกจำกัดด้วยการสมัครสมาชิก: จำเป็นต้องมีแพ็กเกจ Dynamic API ที่ใช้งานอยู่ การเรนเดอร์ไม่ถูก คิดตามปริมาณ — ไม่มีโควตาการเรนเดอร์รายเดือนและไม่มีการเรียกเก็บเงินส่วนเกิน แพ็กเกจคือเงื่อนไขการเข้าใช้งาน และ ทุกระดับสามารถเรนเดอร์ได้โดยไม่มีตัวนับ ดู ราคา สำหรับระดับและราคาปัจจุบัน

รูปภาพที่แคชไว้ไม่มีค่าใช้จ่าย: คำขอที่ให้บริการจากแคช edge ของ Cloudflare (เทมเพลต + พารามิเตอร์เดียวกัน โดยไม่คำนึงถึงลายเซ็น s บน URL ที่แคชไว้ก่อนหน้า) จะไม่ไปถึงต้นทาง ดังนั้น URL ที่เหมือนกัน จึงไม่ใช้การเรนเดอร์เพิ่มอีก

สะอาดโดยค่าเริ่มต้น: ทุกการเรนเดอร์สะอาด — ไม่มีลายน้ำในทุกแพ็กเกจ และไม่มีใน OG Image Tester ฟรี, ตัวอย่างใน Studio หรือการส่งออกจาก Studio พร็อพการเรนเดอร์ fastog_watermark ยังคง รองรับสำหรับผู้เรียกที่ร้องขอป้าย "Made with FastOG" อย่างชัดเจน แต่ไม่มีสิ่งใดตั้งค่าโดยอัตโนมัติ

เอกสารประกอบ — คู่มือและเอกสารอ้างอิงทั้งหมดของ FastOG
เครื่องมือทดสอบ OG Image ฟรี— ดูตัวอย่างได้โดยไม่ต้องมีบัญชี
คู่มือเริ่มต้นอย่างรวดเร็ว — รวมถึงลำดับสถาปัตยกรรม (ลงนามขณะเรนเดอร์)
คู่มือลายเซ็น HMAC
การตรวจสอบ HMAC
บทแนะนำ JavaScript

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

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

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