ブログ記事用の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でレンダリングされます。

あなたのブログに合うテンプレート

FAQ

FastOGはブログ記事でいくらかかりますか？

一意の画像につき1回のレンダリングです。同一のURLはエッジキャッシュに永続的に保存され、月間クォータにはカウントされません。

記事を編集した場合、画像を再生成する必要がありますか？

タイトル、抜粋、または著者が変更された場合のみです。URLはコンテンツに依存するため、コンテンツが変更されると新しいURLと新しいレンダリングが生成されます。変更されていないURLはキャッシュされたままとなり、クォータにはカウントされません。

既存のブログフレームワークでFastOGを使用できますか？

はい。Next.js、React、SvelteKit、Vue/Nuxt、Astro、Express、Vanilla Node.js、JavaScript、PHP/Laravel、Python、Ruby/Rails用のドロップインサイナー（signer）が用意されています。SDKページを参照してください。

関連情報

• APIリファレンス
• SDK — ダウンロードと利用方法
• OG画像サイズ：1200×630の解説
• og:imageが表示されないのはなぜですか？