Vercel + Next.js + PlaywrightでOGP画像をページ別に自動生成する
February 24, 2021 (almost 4 years ago)Deprecated
Twitter や Facebook など、SNS 上で Web サイトをシェアしたときに表示される OGP 画像。
あらかじめ静的ファイルとしてサーバーに配置されることも多い一方で、
画像をサーバー側で動的に生成することができれば、より自由度高く、視覚に訴える OGP 画像で PR することができます。
追記
- 2021-05-25: Vercel 内部で使用されている
@vercel/nft
の影響で playwright が利用できない状況になっています。playwrite-core support を追加した pull request がマージされているので、そのうち解決すると思われます。
- https://github.com/vercel/nft/issues/211
- https://github.com/vercel/nft/releases/tag/0.12.2
- 2023-01-07: こちらの記事を Deprecated (非推奨) に変更しました。記事内で紹介していることは
@vercel/og
パッケージで簡単に実現できるようになりました。
Playwright
Playwrightは、Headless Chrome を Node.js から手軽に扱うことができるパッケージです。
Headless Chrome とは、Window を持たない Web ブラウザです。主に E2E テストの自動化に使用されていますが、
ここでは Playwright のスクリーンショット機能を利用して、OGP 画像の生成に利用します。
Next.js の API ルート
Vercel の場合、API ルートは Serverless Function として AWS Lambda にデプロイされます。
Lambda の実行環境には様々な制約があるため、AWS Lambda 環境でも動作するように最適化された playwright-aws-lambda
パッケージを利用します。
サンプルコード
ディレクトリの構成:
OGP 画像生成の処理:
ページごとの meta
タグに OGP 画像を設定:
ポイント
- サーバーサイドでの画像生成は処理コストが高いので、アクセスされるたびに実行するのは非効率です。
そこで Vercel Edge Cache を活用し、一定期間はキャッシュからレスポンスするようにしています。