vercel/og-imageでOGP画像の自動生成

2021-04-30

最初のブログ

VuePressとNetlifyを利用したブログを始めました🎉

なんて言っていましたが、最近Vercel (opens new window)に移行しました。理由としては

  • Netlifyより早いらしい
  • 個人アカウントでも配信量に制限がない
  • Open Graph Image as a Service(vercel/og-image)を使ってみたかった

って感じです。特に最後の項目に惹かれて移行しました。

# vercel/og-image とは

vercel/og-imageは、Vercelが公開している画像を動的に生成できるOSSです。これを使えばOGP画像を生成するサーバーを一瞬で作成できます。

大まかに仕組みを説明すると、 クエリパラメータをもとにhtmlとCSSを生成→puppeteerでそのページのスクリーンショットを撮影する→画像として返す って感じらしいです。

例えばhttps://og-image.vercel.app/**Hello** World 🌏.png?fontSize=125px&md=1 (opens new window)にアクセスすると...

vercel/og-imageのテスト

こんな画像が返ってきます。

Markdown記法が使えるのと、twemojiが使えるのが面白いです。

# フォークして自分用OGPメーカーにする

README.mdに

You'll want to fork this repository and deploy your own image generator.

とあったのでこのブログ用に自分でカスタマイズしてみました。

README.mdのデプロイ手順 (opens new window)に従えば一瞬でデプロイできます。

生成する画像をカスタマイズするにはog-image/api/以下のファイルに手を加える必要があります。

  • og-image/api/_lib/template.tsでhtmlとcssの生成をしているので、ここをいじれば細かい位置調整等ができます。
    • 背景に重ねる形でアイコンとロゴ画像を加えました。
  • 生成画像のサイズを変更する場合はog-image/api/_lib/chronium.tsawait page.setViewport({ width: 2048, height: 1170 });を変更すればOK。
  • 設定項目を増やす場合はog-image/api/_lib/types.ts/og-image/api/_lib/parser.ts/に手を加える必要があります。
    • アプリ画面での設定項目を変更する場合はog-image/web/index.ts/を変更。
    • ブログ用にデフォルトのアイコン画像とテーマの設定項目を削除し、代わりに背景パターンを変更できるようにしました。

より詳しくはリポジトリを見てください。(TypeScript初めてなのでもっといい書き方とかあったら教えていただけると助かります🙏)

# VuePressでOGP画像を設定する

で、せっかく動的に画像を生成できるようになったので早速このブログのOGP画像として利用してみました。Vuepress Plugin SEO (opens new window)を利用することで、簡単にOGP画像の設定ができます。config.jspluginsに以下のように追記。










 

 



['seo', {
    // OGPのタイトル設定
    title: ($page, $site) => $page.title ? $page.title + ' | ' + $site.title : $site.title,
    // OGPの説明設定
    description: ($page, $site) => $page.frontmatter.description || $site.description || "",
    //OGPの画像設定
    image: ($page, $site) => $page.frontmatter.image ?
        (($page.frontmatter.image.startsWith('http') ? "" : $site.themeConfig.domain) + $page.frontmatter.image)
        :$page.frontmatter.ogtitle ?
        "https://og-image.eyemono.moe/" + encodeURIComponent($page.frontmatter.ogtitle) + ".png?pattern=cross&md=1&fontSize=50px"
        : $page.title ?
        "https://og-image.eyemono.moe/" + encodeURIComponent($page.title) + ".png?pattern=cross&md=1&fontSize=50px"    
        :"https://www.eyemono.moe/OGP_main.png"
}]

frontmatterに設定したogtitleの文字を表示する画像を自動で設定するようにしています。

これでTwitterやフェイスブックでの共有時にOGP画像が表示されるようになりました🎉

# 【追記】背景画像を設定できるように

さらに設定項目を増やし、背景画像を設定できるようにしました。これまで本ブログのロゴを重ねてOGP用としていたのですが、この重ねる画像をURLで指定できるようにしました。より汎用的な利用ができるようになったことと思います。

例えばいらすとやさんの画像のURL (opens new window)を指定すると...

背景画像を設定できた

こんな感じ。便利!

# 【さらに追記】KaTeX\KaTeXで数式もイイ感じに

やっていることはhtmlとcssを生成してスクショを撮っているだけなので、そのhtml(実際はog-image/api/_lib/template.tsの中)に

<!--中略-->
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.3/dist/katex.min.css" integrity="sha384-ThssJ7YtjywV52Gj4JE/1SQEDoMEckXyhkFVwaf4nDSm5OBlXeedVYjuuUd0Yua+" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.3/dist/katex.min.js" integrity="sha384-Bi8OWqMXO1ta+a4EPkZv7bYGIes7C3krGSZoTGNTAnAn5eYQc7IIXrJ/7ck1drAi" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.3/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
  onload="renderMathInElement(document.body);"></script>
</head>
<!--中略-->
<script>
  document.addEventListener("DOMContentLoaded", function() {
  renderMathInElement(document.body, {delimiters: [
      {left: "\\[", right: "\\]", display: true},
      {left: "$", right: "$", display: false}
      ]});
  });
</script>
<!--中略-->

を追記するだけでKaTeX\KaTeXによる数式の描画ができます。で、↓こんな画像↓も生成できるようになりました。

KaTeXにより数式も良い感じに表示されるようになりました

便利!!

# 参考