部落格文章的 OG 圖片
部落格文章的 OG 圖片是指當有人在 X、LinkedIn、Facebook、Slack 或 WhatsApp 分享你的文章時,所顯示的 1200×630 社群預覽圖片。FastOG 會根據你的文章標題、摘要和作者,動態地按需生成這張圖片——無需設計工作、無需上傳、無需訂閱,也不需要登入即可開始使用。
為什麼每篇部落格文章都需要自己的 OG 圖片
沒有卡片或使用過時通用卡片的連結分享,會與其他貼文混在一起。每篇文章搭配包含實際標題與簡潔版面的專屬卡片,能獲得更多分享與點擊。手動為每篇文章生成一張圖片的成本,正是多數部落格只使用單一預設圖片的原因——而這正是 FastOG 要解決的問題。
如何為部落格文章取得動態 OG 圖片
您在頁面渲染時使用 template=blog、文章標題、摘要和作者來簽署 URL。社交爬蟲會抓取該 URL,FastOG 會渲染 PNG 一次,而 Cloudflare 會快取它,因此之後每次分享都是即時且免費的。
// Next.js App Router — app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
openGraph: {
images: [generateOgImageUrl({
template: "blog",
title: post.title,
subtitle: post.excerpt,
author: post.author.name,
})],
},
};
}
使用
template=blog取得包含作者和標題的專屬部落格卡片,或使用default取得更簡潔的純標題版面。所有範本皆以 1200×630 渲染。
哪個範本適合您的部落格
| 如果您的部落格… | 使用範本 | 額外優勢 |
|---|---|---|
| 顯示作者與摘要 | blog |
包含作者列 |
| 以標題與標語為主 | default |
極簡、以品牌為核心 |
| 使用照片或封面圖 | editorial / image-right |
以照片為主導的版面 |
| 發布上市或產品文章 | launch |
包含版本與網域欄位 |
常見問題
使用 FastOG 產生部落格文章圖片需要多少費用?
每張獨特圖片只需一次渲染;相同的 URL 會永久快取於邊緣節點,且不會計入您的每月配額。
編輯文章後,是否需要重新產生圖片?
只有在標題、摘要或作者變更時才需要——URL 取決於內容,因此內容變更會產生新的 URL 與新的渲染。未變更的 URL 會持續快取,且不會計入您的配額。
我可以將 FastOG 與我現有的部落格框架搭配使用嗎?
可以。我們提供現成的簽署器(signer),支援 Next.js、React、SvelteKit、Vue/Nuxt、Astro、Express、Vanilla Node.js、JavaScript、PHP/Laravel、Python 及 Ruby/Rails。請參閱 SDK 頁面。