vercel/og

バーセル/オージー

vercel/og を分かりやすく

vercel/og は、Vercel が提供するサービスで、動的に Open Graph イメージを生成することが可能です。Open Graph イメージとは、ウェブサイトが SNS などに共有された際に表示されるサムネイル画像のことを指します。Twitter や Facebook のリンクを貼り付けたときに出る画像ですね。

このサービスは、ウェブサイトの各ページに固有のイメージを設定したいという要望に応えるために作られました。vercel/og を使用することで、ウェブサイトの訪問者がページを SNS などで共有する際に、そのページの内容を反映したユニークなイメージを表示することが可能になります。これにより、ウェブサイトの各ページが SNS 上で個別に認識され、共有されやすくなります。

JSX で簡単に画像が作れるなんて夢のようですね！

サポートされている機能は次のとおり

flexbox や絶対位置付けを含む基本的な CSS レイアウト
カスタムフォント、テキストの折り返し、中央揃え、ネストされた画像
Google Fonts からフォントのサブセット文字をダウンロードする能力
Vercel でデプロイされた任意のフレームワークやアプリケーションと互換性

vercel/og を使うメリット

動的生成

vercel/og を使用すると、ページのコンテンツに基づいて動的に Open Graph イメージを生成することが可能になります。これにより、手動でイメージを作成し、それぞれのページに設定するという手間が省けます。

パフォーマンス

画像生成に必要なコード量が少ないため、Edge Functions はほぼ瞬時に開始することができます。これにより、画像生成プロセスが迅速に行われ、Open Graph Debugger のようなツールによって認識されます。

使いやすさ

HTML と CSS を使用して画像を定義し、ライブラリはマークアップから動的に画像を生成します。

コスト効果

@vercel/og は、エッジで計算済みの画像をキャッシュするための適切なヘッダーを自動的に追加し、コストの削減と再計算の軽減に寄与します。

SEO 対策

Open Graph イメージは、ウェブページの SEO 対策にも役立ちます。具体的には、SNS 上での共有時に表示されるイメージは、そのページがクリックされる確率を高めるため、SEO に直結します。

vercel/og を実装

公式サイトから抜粋します。/pages/api ルートに og.tsx を追加して API エンドポイントを作るだけです。簡単ですね！

import { ImageResponse } from '@vercel/og'

export const config = {
  runtime: 'edge',
}

export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  )
}

そして、meta タグに埋め込めば OK です。

<head>
  <title>Hello world</title>
  <meta property="og:image" content="https://og-examples.vercel.sh/api/static" />
</head>

このコードは、Next.js を使用して、単純な "Hello world!" メッセージを含む静的テキストから画像を生成します。

Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel

Next.js を学ぶ一覧へ