前々から課題として感じていた、このブログの OGP 画像の自動生成を実装しました。 OGP 画像は Twitter などの SNS にシェアするときに表示される画像です。

この記事では自動生成の実装や、skia-canvas や budoux といったライブラリを利用して、タイトルの自動改行や高速な生成を実現したので、それらについても解説します。

OGP

Twitter などの SNS にシェアするときに表示されるタイトルや画像・説明文を指定するための仕様として、 OGP (Open Graph Protocol) というものがあります。 HTML の <meta> タグを使ってこれらの情報を指定するもので、例えばこのブログのトップページであれば、次のような HTML タグが追加されています。

<meta property="og:title" content="makenowjust-labs/blog" />
<meta property="og:url" content="https://makenowjust-labs.github.io/blog/" />
<meta property="og:description" content="MakeNowJust Laboratory Tech Blog" />
<meta property="og:site_name" content="makenowjust-labs/blog" />
<meta property="og:type" content="blog" />
<meta
  property="og:image"
  content="https://makenowjust-labs.github.io/blog/cover.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@make_now_just" />
<meta name="twitter:creator" content="@make_now_just" />

そして、これらの情報を元にこんな表示がされるわけです。

別にアクセス数を稼ぐことを目的としていないブログなのでどうでもいいのですが、このような表示があると親切なことは間違いないです。

それと、背景の画像は Unsplash からそれっぽいのを探してきました。ありがとうございます。

OGP 画像の自動生成

OGP を設定するにあたって問題となるのが OGP 画像の生成です。さきほどの例はトップページだからいいのですが、個々のブログ記事に対していちいち OGP 画像を用意するのは骨が折れます。そこで OGP 画像を自動生成することを検討するわけですが、主に次の 2 つのような方法が考えられます。

OGP 画像を動的に生成するサーバーを用意して、そちらで生成する。
ブログのビルド時に OGP 画像を生成して、静的に配信する。

今回は 2 の方法を取ることにしました。その理由は、Lambda などを使っても静的に配信するよりは面倒なことになりがちだからです。

また、1 の方法の実装としては vercel/og-image などが有名です。

自動生成の実装

自動生成は Next.js のビルドとは統合せずに、別のスクリプトとして実装して、npm scripts として実行するようにしています。実装はこのスクリプトとなります。

実装には次のライブラリなどを使用しました。

それぞれについて解説します。

あとがき

課題だった OGP 画像の自動生成を実現できてよかったです。完全に自己満足なのですが、Twitter などに記事をシェアするモチベーションが高まります。

記事を書いていて気付いたのですが、使用しているライブラリが Google にどっぷりな気がします。 Google に足を向けて眠れない‥‥。

というわけで、最後まで目を通していただきありがとうございました。

makenowjust-labs/blog

OGP 画像の自動生成をする

OGP

OGP 画像の自動生成

自動生成の実装

zx

skia-canvas

fontsource

budoux

あとがき