yuheijotaki.com

satoriとsharpで記事ごとにog:imageを生成する

目次

はじめに

satorisharpを使用して記事ページごとのog:image画像を作成する。

手順

インストール

satori sharp をインストール。
Reactのインテグレーションも行う。

画像ファイルのエンドポイントを作成

src/pages/og/[slug].png.ts

画像を生成

src/components/OgImage.tsx

HTML/CSSをsatoriでSVGへ書き出し、sharpでPNGに変換。
Vercel OG Image Playgroundなどを使うと便利かも。

画像指定の変更

og:imagetwitter:image のパス指定を変更する。

結果

この記事のog:imageは次のようになる。

記事タイトルが入った生成画像

ひとこと

  • 背景画像を用意して下に敷いたほうがよいデザインの場合もある
  • フォントの指定はWebフォント or ローカルに置いたものを指定する
  • -webkit-line-clamp での行数制限がうまく効かなかったため、文字数で切り取っている