【Next.js+Vercel】OGP画像を動的生成したい。
2023/1/9
2023/1/9
Next.jsで作ったこのブログ（CraftTime）のOGP画像を作成したい。
本ブログはデプロイ先が「Vercel」なので、@vercel/ogというライブラリを使ってOGP画像の動的生成をしていきます。
今回は、その作業工程をまとめてみました。初回は簡単なOGP画像を生成して
目次
手順①：ライブラリをインストールする
$ npm i @vercel/og手順②：「og.tsx」を作成する
pages/apiディレクトリ内にog.tsxを作成します。
そして「OGP画像を生成するための処理」を記載していきます。このnew ImageResponse()という関数に、htmlを渡すことでそのhtmlを画像に変換してくれます。
import {ImageResponse} from '@vercel/og';
export const config = {
runtime: 'edge',
};
export default function () {
return new ImageResponse(
(
// ==========================================
// OGP画像へ描画される内容
// ==========================================
<div style={{
fontSize: 128,
background: 'white',
width: '100%',
height: '100%',
display: 'flex',
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center',
}}>
Hello world!
</div>
// ==========================================
),
{
width: 1200,
height: 600,
},
);
}
出力される画像はローカル環境でもhttp://localhost:3000/api/ogで確認できます。
手順③：metaデータを設定する
ページごとにOGP画像を設定するには、metaタグで画像指定する必要があります。
import React from "react";
import Head from "next/head";
export default function Index() {
return (
<Head>
{/* metaタグを追加 */}
<meta property="og:image" content="https://example.com/api/og" />
</Head>
)
}これで「OGP画像の生成」と「metaタグへの設定」ができました。
あとは表示させたいデザインに合わせてカスタマイズしていきます。
手順④：画像をカスタマイズする
- ページタイトルに合わせてテキストを動的に変える
- 背景画像を設定する
- テキストのフォントを変更する
タイトルに合わせて動的生成する
import {ImageResponse} from '@vercel/og';
import {NextRequest} from 'next/server';
export const config = {
runtime: 'edge',
};
export default function handler(req: NextRequest) {
try {
const {searchParams} = new URL(req.url); // URLパラメータを取得する
const hasTitle = searchParams.has('title'); // 'title'パラメータが存在するか判定
const title = hasTitle // 'title'パラメータの有無に合わせて出力
? searchParams.get('title')?.slice(0, 50)
: 'Craft Title';
return new ImageResponse(
(
// ==========================================
// OGP画像へ描画される内容
// ==========================================
<div style={{
fontSize: 128,
background: 'white',
width: '100%',
height: '100%',
display: 'flex',
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center',
}}>
{title}
</div>
// ==========================================
),
{
width: 1200,
height: 630,
},
);
} catch (e: any) {
console.log(`${e.message}`);
return new Response(`Failed to generate the image`, {
status: 500,
});
}
}
import React from "react";
import Head from "next/head";
export default function PostId({post}) {
return (
<Head>
{/* metaタグを追加 */}
<meta property="og:image" content={`https://example.com/api/og?title=${post.title}`} />
</Head>
)
}背景画像を指定する
ベースとなる背景画像（/images/og-base.png）を追加します。
追加した背景画像をbackgroundImage:で指定します。
import React from "react";
import {ImageResponse} from '@vercel/og';
import {NextRequest} from 'next/server';
export const config = {
runtime: 'edge',
};
export default function handler(req: NextRequest) {
try {
const {searchParams} = new URL(req.url); // URLパラメータを取得する
const hasTitle = searchParams.has('title'); // 'title'パラメータが存在するか判定
const title = hasTitle // 'title'お粗メータの有無に合わせて出力
? searchParams.get('title')?.slice(0, 50)
: 'Craft Title';
return new ImageResponse(
(
<div
style={{
backgroundColor: "#fff",
backgroundSize: "100% 100%",
// ベース画像を追加
backgroundImage: `url(https://example.com/images/og-base.png)`, // ベース画像
height: '100%',
width: '100%',
display: 'flex',
textAlign: "left",
alignItems: "flex-start",
justifyContent: "center",
flexDirection: "column",
flexWrap: "nowrap",
}}>
{/* テキスト部分 */}
<div
style={{
width: '85%',
margin: 'auto',
marginTop: 90,
fontSize: 70,
fontStyle: 'bold',
letterSpacing: '-0.025em',
color: '#111',
lineHeight: 1.3,
whiteSpace: 'pre-wrap',
}}>
{title}
</div>
</div>
),
{
width: 1200,
height: 630,
},
);
} catch (e: any) {
console.log(`${e.message}`);
return new Response(`Failed to generate the image`, {
status: 500,
});
}
}
こんな感じで出力されました。
フォントを指定する
今回は「Noto Sans Japanese（NotoSansJP-Bold.otf）」を使用したいと思います。
- Google Fontsのフォントページで「Noto Sans Japanese」をダウンロード
- ダウンロードしたデータ（
NotoSansJP-Bold.otf）を軽量化する（参考ページ） - プロジェクトの
/assetsフォルダに軽量化したフォントファイルに追加する
import React from "react";
import {ImageResponse} from '@vercel/og';
import {NextRequest} from 'next/server';
export const config = {
runtime: 'edge',
};
// フォントを取得する
const font = fetch(new URL('../../assets/NotoSansJP-Bold.otf', import.meta.url)).then(
(res) => 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('title'); // 'title'パラメータが存在するか判定
const title = hasTitle // 'title'お粗メータの有無に合わせて出力
? searchParams.get('title')?.slice(0, 50)
: 'Craft Title';
return new ImageResponse(
(
<div
style={{
backgroundColor: "#fff",
backgroundSize: "100% 100%",
backgroundImage: `url(${process.env.NEXT_PUBLIC_SITE_URL}/images/og-base.png)`, // ベース画像
height: '100%',
width: '100%',
display: 'flex',
textAlign: "left",
alignItems: "flex-start",
justifyContent: "center",
flexDirection: "column",
flexWrap: "nowrap",
}}
>
{/* テキスト部分 */}
<div
style={{
width: '85%',
margin: 'auto',
marginTop: 90,
fontSize: 70,
fontStyle: 'bold',
fontFamily: 'NotoSansJP', // フォントを指定
letterSpacing: '-0.025em',
color: '#111',
lineHeight: 1.3,
whiteSpace: 'pre-wrap',
}}
>
{title}
</div>
</div>
),
{
width: 1200,
height: 630,
fonts: [
{
name: 'NotoSansJP',
data: fontData,
style: 'normal',
},
],
},
);
} catch (e: any) {
console.log(`${e.message}`);
return new Response(`Failed to generate the image`, {
status: 500,
});
}
}
おまけ：OGP画像デザインのテスト用ページを作った
画像生成のデザイン（レイアウト）を調整する時に、Chromeデベロッパーツール（検証モード）などで確認しながら描画範囲を確認したかったので、一時的にテストページを作って確認していました。
（og.tsxでは画像化された状態で出力され、marginなどがどの範囲に適用されているのか確認しづらかった）
import React from "react";
import {NextRequest} from "next/server";
export default function OGP() {
const title = "OGP画像デザインのテスト用ページを作る"
return(
<div className="w-screen h-screen bg-slate-200 flex items-center mx-auto">
<div style={{display: 'flex', alignItems: 'center', textAlign: 'center', margin: 'auto', width: '1200px', height: '630px'}}>
{/* ======================================== */}
<div
style={{
backgroundColor: "#fff",
backgroundSize: "100% 100%",
backgroundImage: `url(${process.env.NEXT_PUBLIC_SITE_URL}/images/og-base.png)`,
height: '100%',
width: '100%',
display: 'flex',
textAlign: "left",
alignItems: "flex-start",
justifyContent: "center",
flexDirection: "column",
flexWrap: "nowrap",
}}>
{/* テキスト部分 */}
<div
style={{
width: '85%',
margin: 'auto',
marginTop: 100,
fontSize: 70,
fontStyle: 'bold',
letterSpacing: '-0.025em',
color: '#111',
lineHeight: 1.4,
whiteSpace: 'pre-wrap',
}}>
{title}
</div>
</div>
{/* ======================================== */}
</div>
</div>
)
}まとめ
今回初めてVercelの「OG Image Generation」を利用して、思っていた以上に簡単に実装することができました。
ブログなどOGPを生成するシーンがそこまで多くない場合は、この方法で十分そうですね。「metaタグのパスに拡張子がないけど大丈夫かな？」という点が気になるのでもう少し調べたいと思います。
最近の記事
音楽生成AI「Suno」の使い方まとめ！作詞作曲が簡単にできる？
簡単に曲が作れるAIということでよく聞く「Suno（Chirp）」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ｜GPT・DALL·E・Whisperなど
Open AIのAPI（一部）の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI（Upload file）で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。（Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12