SvelteKitでのOG画像
FastOG APIを使用してSvelteKitでOG画像を生成します。Dynamic APIサブスクリプション（ダッシュボードでAPIキーを作成）、サブスクリプションベース、HMACで保護されています。このガイドでは、HMAC署名付きOG画像URL用のサイナー（signer）ユーティリティを作成し、動的なOpen Graph画像をその場でレンダリングする方法を説明します。統合前にFree OG Image Testerでプレビューできます。
クイックスタート
1. 署名ユーティリティの作成
javascript
// src/lib/og-image-signer.js
import crypto from "node:crypto";
export function generateSignedOgUrl(params, options = {}) {
const {
baseUrl = "https://fastog.com/api/v1/og",
apiKey = process.env.FASTOG_API_KEY,
hmacSecret = process.env.FASTOG_HMAC_SECRET,
} = options;
if (!apiKey || !hmacSecret) {
throw new Error("Missing FASTOG_API_KEY or FASTOG_HMAC_SECRET");
}
// RFC-3986 percent-encoding: keep A-Za-z0-9-._~
const enc = (s) =>
encodeURIComponent(s).replace(
/[!'()*]/g,
(c) => "%" + c.charCodeAt(0).toString(16).toUpperCase(),
);
// Every query param except the signature, INCLUDING key
const all = { ...params, key: apiKey };
// Canonical query: sorted enc(key)=enc(value) pairs joined with &
const pairs = [];
for (const [k, v] of Object.entries(all)) {
for (const vv of Array.isArray(v) ? v : [v]) {
pairs.push(`${enc(k)}=${enc(vv)}`);
}
}
pairs.sort();
const canonical = pairs.join("&");
// Sign the exact bytes the server will verify
const signature = crypto
.createHmac("sha256", hmacSecret)
.update(`GET/api/v1/og\n${canonical}`)
.digest("hex");
// Build the URL from the same pairs so bytes match the canonical form
const url = new URL(baseUrl);
for (const [k, v] of Object.entries(all)) {
for (const vv of Array.isArray(v) ? v : [v]) {
url.searchParams.append(Array.isArray(v) ? `${k}[]` : k, vv);
}
}
url.searchParams.set("s", signature);
return url.toString();
}
2. 環境変数
bash
# .env
FASTOG_API_KEY=sk_your_full_api_key_here
FASTOG_HMAC_SECRET=your_64_char_hex_secret_here
メタデータを含むページ
svelte
<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
export let data;
$: ({ post, ogImageUrl } = data);
</script>
<svelte:head>
<title>{post.title}</title>
<meta property="og:image" content={ogImageUrl} />
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.excerpt} />
</svelte:head>
<article>
<h1>{post.title}</h1>
<p>{post.excerpt}</p>
</article>
javascript
// src/routes/blog/[slug]/+page.server.js
import { generateSignedOgUrl } from "$lib/og-image-signer";
export async function load({ params }) {
const post = await getPost(params.slug);
const ogImageUrl = generateSignedOgUrl({
template: "blog",
title: post.title,
subtitle: post.excerpt,
author: post.author.name,
});
return {
post,
ogImageUrl,
};
}
API ルート
javascript
// src/routes/api/og/+server.js
import { json } from "@sveltejs/kit";
import { generateSignedOgUrl } from "$lib/og-image-signer";
export async function GET({ url }) {
const title = url.searchParams.get("title");
const template = url.searchParams.get("template") || "default";
if (!title) {
return json({ error: "Missing title" }, { status: 400 });
}
const ogImageUrl = generateSignedOgUrl({
template,
title,
});
return json({ ogImageUrl });
}
Eコマースの例
javascript
// src/routes/products/[id]/+page.server.js
import { generateSignedOgUrl } from "$lib/og-image-signer";
export async function load({ params }) {
const product = await getProduct(params.id);
const ogImageUrl = generateSignedOgUrl({
template: "ecommerce",
title: product.name,
price: product.price,
image: product.image,
});
return { product, ogImageUrl };
}
svelte
<!-- src/routes/products/[id]/+page.svelte -->
<script>
export let data;
$: ({ product, ogImageUrl } = data);
</script>
<svelte:head>
<meta property="og:image" content={ogImageUrl} />
<meta property="og:title" content={product.name} />
</svelte:head>
<main>
<h1>{product.name}</h1>
<p>{product.price}</p>
</main>
ユーザープロフィール（ブログテンプレート）
FastOGにはprofileテンプレートはありません。プロフィール風カードにはblogを使用し、ユーザー名をtitle、自己紹介をsubtitle、名前をauthorとして渡してください。
javascript
// src/routes/users/[username]/+page.server.js
import { generateSignedOgUrl } from "$lib/og-image-signer";
export async function load({ params }) {
const user = await getUser(params.username);
const ogImageUrl = generateSignedOgUrl({
template: "blog",
title: user.name,
subtitle: user.bio,
author: user.name,
});
return { user, ogImageUrl };
}
動的OG画像を持つコンポーネント
svelte
<!-- src/lib/ShareButtons.svelte -->
<script>
import { onMount } from "svelte";
export let post;
let ogImageUrl = null;
onMount(async () => {
const res = await fetch(`/api/og?title=${encodeURIComponent(post.title)}`);
const data = await res.json();
ogImageUrl = data.ogImageUrl;
});
</script>
<div class="share-buttons">
<button on:click={() => shareToTwitter(ogImageUrl)}>
Share on Twitter
</button>
</div>
よくある落とし穴
クライアントサイドでの署名
ブラウザコード内でOG URLに署名をしないでください。HMACシークレットが露出してしまいます。
❌ 誤り:
svelte
<script>
import { generateSignedOgUrl } from "$lib/og-image-signer";
// This runs in the browser!
const ogUrl = generateSignedOgUrl({ title: post.title });
</script>
✅ 正しい:
javascript
// +page.server.js (runs on server only)
import { generateSignedOgUrl } from "$lib/og-image-signer";
export async function load({ params }) {
const ogImageUrl = generateSignedOgUrl({ title: post.title });
return { ogImageUrl };
}
送信するバイト列と異なるデータへの署名
署名はGET/api/v1/ogに改行と正規化されたクエリを加えたものを対象とします。これは、sを除くすべてのパラメータのenc(key)=enc(value)ペアをソートしたものです（keyを含みます）。最終的なURLは、それと同じエンコード済みペアから構築してください。そうしないと、サーバーは401 invalid_signatureを返します。