🌈

Vercelのog-imageで表示されるアイコン画像を変更する

2022/01/01に公開

Next.js

概要

Vercelが用意してくれているog-imageは、Vercelにホスティングして、そのURLを指定することでOGP画像を動的に生成するコンテンツサーバーを建てることができるものである。

githubのレポジトリは以下である。
https://github.com/vercel/og-image

上記のレポジトリをForkして使用する形になる。

使用するときにテンプレートだと以下のようにVercelのアイコン画像になっている。

本記事ではこの画像を変更する方法を紹介する。

説明

書き換えるファイルは/api/_lib/templeate.tsである。

以下のようにimgを動的に読み込んでいる部分がある。

<div class="logo-wrapper">
	${images.map((img, i) =>
	    getPlusSign(i) + getImage(img, widths[i], heights[i])
	).join('')}
</div>

ここの部分を以下のように特定の画像を読み込むように書き換える。

<div class="logo-wrapper">
	<img
		class="logo"
		alt="Generated Image"
		src="data:image/png;base64,${icon}"
		width="${sanitizeHtml('auto')}"
		height="${sanitizeHtml('auto')}"
	/>
</div>

ここでsrcで読み込む部分はbase64形式でエンコードしたものをURL形式に変更して読み込んでいる。
base64形式へのエンコードはコードの一番上の方でfontを読み込んでいる部分があるので、そこに追記する

const rglr = readFileSync(`${__dirname}/../_fonts/Inter-Regular.woff2`).toString('base64');
const bold = readFileSync(`${__dirname}/../_fonts/Inter-Bold.woff2`).toString('base64');
const mono = readFileSync(`${__dirname}/../_fonts/Vera-Mono.woff2`).toString('base64');
// 以下を追記する
const icon = readFileSync(`${__dirname}/{画像があるディレクトリへの相対パスをここに入れる}`).toString('base64');

ここまで書き換えるだけで良いのだが、eslintでエラーが出るため、上記コードの下の行に記述されているgetPlusSign()関数とgetImage()関数を削除orコメントアウトする

// function getImage(width ='auto', height = '225') {
//     return `<img
//         class="logo"
//         alt="Generated Image"
//         src="https://avatars.githubusercontent.com/u/32574936?v=4"
//         width="${sanitizeHtml(width)}"
//         height="${sanitizeHtml(height)}"
//     />`
// }

// function getPlusSign(i: number) {
//     return i === 0 ? '' : '<div class="plus">+</div>';
// }

ここまで書き換えて再度、実行すると、iconが以下のように指定した画像になる。(実行方法などはGithubのリポジトリを参考してほしい)

概要

説明

Discussion