Vercel


<p>Next.jsで作ったこのブログ（CraftTime）のOGP画像を作成したい。</p>



<p>本ブログはデプロイ先が「Vercel」なので、<strong><code>@vercel/og</code>というライブラリを使ってOGP画像の動的生成</strong>をしていきます。</p>



<p>今回は、その作業工程をまとめてみました。初回は簡単なOGP画像を生成して</p>



<ul>
<li><a href="https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation"> OG Image Generation – Vercel Docs</a></li>
</ul>



<p></p>



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">手順①：ライブラリをインストールする</a></li><li><a href="#ogtsx">手順②：「og.tsx」を作成する</a></li><li><a href="#meta">手順③：metaデータを設定する</a></li><li><a href="#i-2">手順④：画像をカスタマイズする</a><ul><li><a href="#i-3">タイトルに合わせて動的生成する</a></li><li><a href="#i-4">背景画像を指定する</a></li><li><a href="#i-5">フォントを指定する</a></li></ul></li><li><a href="#OGP">おまけ：OGP画像デザインのテスト用ページを作った</a></li><li><a href="#i-6">まとめ</a></li></ul></div>
<h2><span id="i">手順①：ライブラリをインストールする</span></h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>$ npm i @vercel/og</code></pre></div>



<h2><span id="ogtsx">手順②：「og.tsx」を作成する</span></h2>



<p><code>pages/api</code>ディレクトリ内に<code>og.tsx</code>を作成します。</p>



<p>そして「OGP画像を生成するための処理」を記載していきます。この<code>new ImageResponse()</code>という関数に、htmlを渡すことでその<strong>htmlを画像に変換</strong>してくれます。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="/pages/api/og.tsx" data-lang="TSX"><code>import {ImageResponse} from &#39;@vercel/og&#39;;

export const config = {
	runtime: &#39;edge&#39;,
};

export default function () {
	return new ImageResponse(
		(
			// ==========================================
			// OGP画像へ描画される内容
			// ==========================================
			&lt;div style={{
				fontSize: 128,
				background: &#39;white&#39;,
				width: &#39;100%&#39;,
				height: &#39;100%&#39;,
				display: &#39;flex&#39;,
				textAlign: &#39;center&#39;,
				alignItems: &#39;center&#39;,
				justifyContent: &#39;center&#39;,
			}}&gt;
				Hello world!
			&lt;/div&gt;
			// ==========================================
		),
		{
			width: 1200,
			height: 600,
		},
	);
}
</code></pre></div>



<p>出力される画像はローカル環境でも<code>http://localhost:3000/api/og</code>で確認できます。</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/01/og-1-1024x512.png" alt="" class="wp-image-2567" width="512" height="256" srcset="https://craft-time.jp/wp-content/uploads/2023/01/og-1-1024x512.png 1024w, https://craft-time.jp/wp-content/uploads/2023/01/og-1-300x150.png 300w, https://craft-time.jp/wp-content/uploads/2023/01/og-1-768x384.png 768w, https://craft-time.jp/wp-content/uploads/2023/01/og-1-304x152.png 304w, https://craft-time.jp/wp-content/uploads/2023/01/og-1-282x141.png 282w, https://craft-time.jp/wp-content/uploads/2023/01/og-1.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /><figcaption class="wp-element-caption">出力される画像</figcaption></figure>



<h2><span id="meta">手順③：metaデータを設定する</span></h2>



<p>ページごとにOGP画像を設定するには、<strong>metaタグで画像指定する必要があります</strong>。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-file="pages/index.js" data-lang="JSX" data-line="8"><code>import React from &quot;react&quot;;
import Head from &quot;next/head&quot;;

export default function Index() {
	return (
		&lt;Head&gt;
			{/* metaタグを追加 */}
			&lt;meta property=&quot;og:image&quot; content=&quot;https://example.com/api/og&quot; /&gt;
		&lt;/Head&gt;
	)
}</code></pre></div>



<p>これで「OGP画像の生成」と「metaタグへの設定」ができました。</p>



<p>あとは表示させたいデザインに合わせてカスタマイズしていきます。</p>



<h2><span id="i-2">手順④：画像をカスタマイズする</span></h2>



<ol>
<li>ページタイトルに合わせてテキストを動的に変える</li>



<li>背景画像を設定する</li>



<li>テキストのフォントを変更する</li>
</ol>



<h3><span id="i-3">タイトルに合わせて動的生成する</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="pages/api/og.tsx" data-lang="TSX" data-line="8,9,10,11,12,13,14,31,40,41,42,43,44,45"><code>import {ImageResponse} from &#39;@vercel/og&#39;;
import {NextRequest} from &#39;next/server&#39;;

export const config = {
	runtime: &#39;edge&#39;,
};

export default function handler(req: NextRequest) {
	try {
		const {searchParams} = new URL(req.url);    // URLパラメータを取得する
		const hasTitle = searchParams.has(&#39;title&#39;); // &#39;title&#39;パラメータが存在するか判定
		const title = hasTitle                      // &#39;title&#39;パラメータの有無に合わせて出力
			? searchParams.get(&#39;title&#39;)?.slice(0, 50)
			: &#39;Craft Title&#39;;

		return new ImageResponse(
			(
			// ==========================================
			// OGP画像へ描画される内容
			// ==========================================
			&lt;div style={{
				fontSize: 128,
				background: &#39;white&#39;,
				width: &#39;100%&#39;,
				height: &#39;100%&#39;,
				display: &#39;flex&#39;,
				textAlign: &#39;center&#39;,
				alignItems: &#39;center&#39;,
				justifyContent: &#39;center&#39;,
			}}&gt;
				{title}
			&lt;/div&gt;
			// ==========================================
			),
			{
				width: 1200,
				height: 630,
			},
		);
	} catch (e: any) {
		console.log(`${e.message}`);
		return new Response(`Failed to generate the image`, {
			status: 500,
		});
	}
}
</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-jsx" data-file="pages/posts/[id].js" data-lang="JSX" data-line="8"><code>import React from &quot;react&quot;;
import Head from &quot;next/head&quot;;

export default function PostId({post}) {
	return (
		&lt;Head&gt;
			{/* metaタグを追加 */}
			&lt;meta property=&quot;og:image&quot; content={`https://example.com/api/og?title=${post.title}`} /&gt;
		&lt;/Head&gt;
	)
}</code></pre></div>



<h3><span id="i-4">背景画像を指定する</span></h3>



<p>ベースとなる背景画像（<code>/images/og-base.png</code>）を追加します。</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/01/og-base-1024x538.png" alt="" class="wp-image-2629" width="512" height="269" srcset="https://craft-time.jp/wp-content/uploads/2023/01/og-base-1024x538.png 1024w, https://craft-time.jp/wp-content/uploads/2023/01/og-base-300x158.png 300w, https://craft-time.jp/wp-content/uploads/2023/01/og-base-768x403.png 768w, https://craft-time.jp/wp-content/uploads/2023/01/og-base-304x160.png 304w, https://craft-time.jp/wp-content/uploads/2023/01/og-base-282x148.png 282w, https://craft-time.jp/wp-content/uploads/2023/01/og-base.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /><figcaption class="wp-element-caption">画像サイズ: 1200px × 630px</figcaption></figure>



<p>追加した背景画像を<code>backgroundImage:</code>で指定します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-lang="TSX" data-line="24"><code>import React from &quot;react&quot;;
import {ImageResponse} from &#39;@vercel/og&#39;;
import {NextRequest} from &#39;next/server&#39;;

export const config = {
	runtime: &#39;edge&#39;,
};

export default function handler(req: NextRequest) {
	try {
		const {searchParams} = new URL(req.url);          // URLパラメータを取得する
		const hasTitle = searchParams.has(&#39;title&#39;);       // &#39;title&#39;パラメータが存在するか判定
		const title = hasTitle                            // &#39;title&#39;お粗メータの有無に合わせて出力
			? searchParams.get(&#39;title&#39;)?.slice(0, 50)
			: &#39;Craft Title&#39;;

		return new ImageResponse(
			(
				&lt;div
					style={{
						backgroundColor: &quot;#fff&quot;,
						backgroundSize: &quot;100% 100%&quot;,
						 // ベース画像を追加
						backgroundImage: `url(https://example.com/images/og-base.png)`, // ベース画像
						height: &#39;100%&#39;,
						width: &#39;100%&#39;,
						display: &#39;flex&#39;,
						textAlign: &quot;left&quot;,
						alignItems: &quot;flex-start&quot;,
						justifyContent: &quot;center&quot;,
						flexDirection: &quot;column&quot;,
						flexWrap: &quot;nowrap&quot;,
					}}&gt;

					{/* テキスト部分 */}
					&lt;div
						style={{
							width: &#39;85%&#39;,
							margin: &#39;auto&#39;,
							marginTop: 90,
							fontSize: 70,
							fontStyle: &#39;bold&#39;,
							letterSpacing: &#39;-0.025em&#39;,
							color: &#39;#111&#39;,
							lineHeight: 1.3,
							whiteSpace: &#39;pre-wrap&#39;,
						}}&gt;
						{title}
					&lt;/div&gt;

				&lt;/div&gt;
			),
			{
				width: 1200,
				height: 630,
			},
		);
	} catch (e: any) {
		console.log(`${e.message}`);
		return new Response(`Failed to generate the image`, {
			status: 500,
		});
	}
}
</code></pre></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/01/og-2-1024x538.png" alt="" class="wp-image-2639" width="512" height="269" srcset="https://craft-time.jp/wp-content/uploads/2023/01/og-2-1024x538.png 1024w, https://craft-time.jp/wp-content/uploads/2023/01/og-2-300x158.png 300w, https://craft-time.jp/wp-content/uploads/2023/01/og-2-768x403.png 768w, https://craft-time.jp/wp-content/uploads/2023/01/og-2-304x160.png 304w, https://craft-time.jp/wp-content/uploads/2023/01/og-2-282x148.png 282w, https://craft-time.jp/wp-content/uploads/2023/01/og-2.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /><figcaption class="wp-element-caption">出力される画像</figcaption></figure>



<p>こんな感じで出力されました。</p>



<h3><span id="i-5">フォントを指定する</span></h3>



<p>今回は「<strong>Noto Sans Japanese（NotoSansJP-Bold.otf）</strong>」を使用したいと思います。</p>



<ul>
<li><a href="https://fonts.google.com/noto/specimen/Noto+Sans+JP?query=noto">Google Fontsのフォントページ</a>で「Noto Sans Japanese」をダウンロード</li>



<li>ダウンロードしたデータ（<code>NotoSansJP-Bold.otf</code>）を軽量化する（<a href="https://pecopla.net/web-column/weight-saving-webfont">参考ページ</a>）</li>



<li>プロジェクトの<code>/assets</code>フォルダに軽量化したフォントファイルに追加する</li>
</ul>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="pages/api/og.tsx" data-lang="TSX" data-line="9,10,11,12,16,49,63,64,65,66,67,68,69"><code>import React from &quot;react&quot;;
import {ImageResponse} from &#39;@vercel/og&#39;;
import {NextRequest} from &#39;next/server&#39;;

export const config = {
	runtime: &#39;edge&#39;,
};

// フォントを取得する
const font = fetch(new URL(&#39;../../assets/NotoSansJP-Bold.otf&#39;, import.meta.url)).then(
	(res) =&gt; res.arrayBuffer(),
);

export default async function handler(req: NextRequest) {
	try {
		const fontData = await font;

		const {searchParams} = new URL(req.url);          // URLパラメータを取得する
		const hasTitle = searchParams.has(&#39;title&#39;); // &#39;title&#39;パラメータが存在するか判定
		const title = hasTitle                            // &#39;title&#39;お粗メータの有無に合わせて出力
			? searchParams.get(&#39;title&#39;)?.slice(0, 50)
			: &#39;Craft Title&#39;;

		return new ImageResponse(
			(
				&lt;div
					style={{
						backgroundColor: &quot;#fff&quot;,
						backgroundSize: &quot;100% 100%&quot;,
						backgroundImage: `url(${process.env.NEXT_PUBLIC_SITE_URL}/images/og-base.png)`, // ベース画像
						height: &#39;100%&#39;,
						width: &#39;100%&#39;,
						display: &#39;flex&#39;,
						textAlign: &quot;left&quot;,
						alignItems: &quot;flex-start&quot;,
						justifyContent: &quot;center&quot;,
						flexDirection: &quot;column&quot;,
						flexWrap: &quot;nowrap&quot;,
					}}
				&gt;
					{/* テキスト部分 */}
					&lt;div
						style={{
							width: &#39;85%&#39;,
							margin: &#39;auto&#39;,
							marginTop: 90,
							fontSize: 70,
							fontStyle: &#39;bold&#39;,
							fontFamily: &#39;NotoSansJP&#39;,   // フォントを指定
							letterSpacing: &#39;-0.025em&#39;,
							color: &#39;#111&#39;,
							lineHeight: 1.3,
							whiteSpace: &#39;pre-wrap&#39;,
						}}
					&gt;
						{title}
					&lt;/div&gt;
				&lt;/div&gt;
			),
			{
				width: 1200,
				height: 630,
				fonts: [
					{
						name: &#39;NotoSansJP&#39;,
						data: fontData,
						style: &#39;normal&#39;,
					},
				],
			},
		);
	} catch (e: any) {
		console.log(`${e.message}`);
		return new Response(`Failed to generate the image`, {
			status: 500,
		});
	}
}
</code></pre></div>



<figure class="wp-block-image size-large is-resized"><img decoding="async" loading="lazy" src="https://craft-time.jp/wp-content/uploads/2023/01/og-3-1024x538.png" alt="" class="wp-image-2651" width="512" height="269" srcset="https://craft-time.jp/wp-content/uploads/2023/01/og-3-1024x538.png 1024w, https://craft-time.jp/wp-content/uploads/2023/01/og-3-300x158.png 300w, https://craft-time.jp/wp-content/uploads/2023/01/og-3-768x403.png 768w, https://craft-time.jp/wp-content/uploads/2023/01/og-3-304x160.png 304w, https://craft-time.jp/wp-content/uploads/2023/01/og-3-282x148.png 282w, https://craft-time.jp/wp-content/uploads/2023/01/og-3.png 1200w" sizes="(max-width: 512px) 100vw, 512px" /><figcaption class="wp-element-caption">出力される画像</figcaption></figure>



<p></p>



<h2><span id="OGP">おまけ：OGP画像デザインのテスト用ページを作った</span></h2>



<p>画像生成のデザイン（レイアウト）を調整する時に、<strong>Chromeデベロッパーツール（検証モード）などで確認しながら描画範囲を確認したかった</strong>ので、一時的にテストページを作って確認していました。</p>



<p>（<code>og.tsx</code>では画像化された状態で出力され、marginなどがどの範囲に適用されているのか確認しづらかった）</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-tsx" data-file="/pages/og-test.tsx" data-lang="TSX"><code>import React from &quot;react&quot;;
import {NextRequest} from &quot;next/server&quot;;

export default function OGP() {
	const title = &quot;OGP画像デザインのテスト用ページを作る&quot;

	return(
		&lt;div className=&quot;w-screen h-screen bg-slate-200 flex items-center mx-auto&quot;&gt;
			&lt;div style={{display: &#39;flex&#39;, alignItems: &#39;center&#39;, textAlign: &#39;center&#39;, margin: &#39;auto&#39;, width: &#39;1200px&#39;, height: &#39;630px&#39;}}&gt;

				{/* ======================================== */}
				&lt;div
					style={{
						backgroundColor: &quot;#fff&quot;,
						backgroundSize: &quot;100% 100%&quot;,
						backgroundImage: `url(${process.env.NEXT_PUBLIC_SITE_URL}/images/og-base.png)`,
						height: &#39;100%&#39;,
						width: &#39;100%&#39;,
						display: &#39;flex&#39;,
						textAlign: &quot;left&quot;,
						alignItems: &quot;flex-start&quot;,
						justifyContent: &quot;center&quot;,
						flexDirection: &quot;column&quot;,
						flexWrap: &quot;nowrap&quot;,
					}}&gt;

					{/* テキスト部分 */}
					&lt;div
						style={{
							width: &#39;85%&#39;,
							margin: &#39;auto&#39;,
							marginTop: 100,
							fontSize: 70,
							fontStyle: &#39;bold&#39;,
							letterSpacing: &#39;-0.025em&#39;,
							color: &#39;#111&#39;,
							lineHeight: 1.4,
							whiteSpace: &#39;pre-wrap&#39;,
						}}&gt;
						{title}
					&lt;/div&gt;

				&lt;/div&gt;
				{/* ======================================== */}

			&lt;/div&gt;
		&lt;/div&gt;
	)
}</code></pre></div>



<h2><span id="i-6">まとめ</span></h2>



<p>今回初めてVercelの「OG Image Generation」を利用して、思っていた以上に簡単に実装することができました。</p>



<p>ブログなどOGPを生成するシーンがそこまで多くない場合は、この方法で十分そうですね。「metaタグのパスに拡張子がないけど大丈夫かな？」という点が気になるのでもう少し調べたいと思います。</p>



<ul class="references">
<li><a href="https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation">OG Image Generation – Vercel Docs</a></li>



<li><a href="https://www.newt.so/docs/tutorials/vercel-og-image-generation">VercelのOG Image Generationを利用して、動的にOG画像を作成する</a></li>



<li><a href="https://zenn.dev/monicle/articles/f02e4a12da960b">エッジで動的にOG画像を生成できる@vercel/ogを触ってみた</a></li>
</ul>


「Vercel」の記事一覧