まだこちらのブログのOGP画像を設定していなかったので、OGP画像を動的に生成することに挑戦してみました。
使用したもの
vercel/og-image
これをforkしてvercelにデプロイするだけで動的にOGPを生成するサービスが作れる優れものです。
色々カスタマイズすることが可能ですが、今回は最小限の変更しかしていません（理由は後述）。
dev環境構築で詰む
さて、このvercel/og-image ですが、READMEに記載されている手順に従っていくだけで、簡単に動的OGP生成サービスを作成することができます。
しかし、私の環境だとvercel dev を実行した際にyarn コマンドが認識されていないというエラーが吐かれました。
このエラーを修正するために、yarnを再インストールしたり、パスを通しなおしたりと2時間近く格闘したのですが、一向に解決せず。vercel CLIに関する情報もあまり多くはないため、今回はdev環境を構築は断念しました。
幸い、vercelのデプロイは問題なく行えていたので、今回は実環境でリビルドしながら開発することにしました（ゴミ）。
こういうわけで、あまり複雑なカスタマイズは行えないと判断し、今回は日本語フォントへの対応、アイコンの変更といった最低限のカスタマイズのみ行うことに。
日本語フォントへの対応
めちゃめちゃ便利で簡単なvercel/og-image ですが、日本語フォントには対応していません。実際に何もカスタマイズしていない状態で日本語の文字を指定した場合、下の画像のようによく分からない文字が表示されてしまいます。そのため、何らかの方法で日本語フォントに対応させてあげる必要があります。
日本語フォントに対応させる方法は様々ですが、今回は最も手軽なWebフォントをURLから読み込む手法を取りました。
実装にあたって、こちらの記事を参考にさせていただきました。ありがとうございます。
実装後は下の画像のようになります。無事日本語フォントに対応させることができました。
アイコンの変更
無事日本語フォントへ対応することができましたが、vercelのアイコンのままは流石にまずいだろう、ということでアイコンの変更も行いました。
実装にあたって、こちらの記事を参考にさせていただきました。ありがとうございます。
実装後は下の画像のようになります。無事アイコンも変更することができました。
ブログのmetaタグに設定
日本語フォントの対応、アイコンの変更が終わったので、あとはブログ本体に og:image のmetaタグを追加すれば完了です。
さて、生成した画像をどのように渡すかですが、vercel/og-imageでは、URLで文字・文字の大きさなどを指定すれば、それに対応した画像を生成することができます。 なのでmetaタグのcontentに生成する画像のURLを設定すればOKです。
私のブログでの実装例を下に示しておきます。
私の場合、ページごとのメタ情報を設定するためのコンポーネントを独自で作っているため、その中でmetaタグを設定しています。
このコンポーネントには、getStaticProps で取得したtitleがpropsとして渡ってきているので、それをよしなに加工してcontentのURL内に埋め込んでいます（デフォルトではドメイン名の直後でOGP画像の文字を指定するため、今回はそこに埋め込んでいる）。
あとは各ページでこのコンポーネントを設定してあげれば完了です。
const MetaData: React.FC<MetaDataProps> = ({ title }) => {
const metaTitle: string = title
? `${title} | caltistals.dev`
: "caltistals.dev";
return (
<Head>
.
.
<meta
property="og:image"
content={`https://og-image-caltistals.vercel.app/${metaTitle}.png?
theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.
vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%
2Fvercel-triangle-black.svg`}
/>
</Head>
);
};
export default MetaData;実装後、デプロイしてチェックしたところ、無事にOGP画像が表示されるようになりました。ヨシ！
ちなみに、Twitterの場合はOGPが表示されるようになるまで結構時間がかかりました（slackとかdiscordは即表示されるようになった）。
最後に
今回は動的にブログのOGP画像を生成できるようにしました。最初は難しそうだなと思っていたのですが、vercel/og-imageのおかげで私でもなんとか実装できてよかったです。