SvelteKit 中的 OG 图片
使用 FastOG API 在 SvelteKit 中生成 OG 图片——通过 Dynamic API 订阅（在仪表盘中创建你的 API 密钥），基于订阅，HMAC 安全。本指南将向你展示如何创建一个签名工具，用于生成 HMAC 签名的 OG 图片 URL，并动态渲染 Open Graph 图片。在集成之前，请使用免费的 OG 图片测试工具进行预览。
快速开始
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 });
}
电子商务示例
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。