2. 記事一覧
  3. @vercel/ogを使ってogp画像の表示

@vercel/ogを使ってogp画像の表示

twitter-white.svgツイート
f_logo_RGB-Blue_144.pngFacebookでシェア
LINE_Brand_icon.pngLineでシェア
    nextjs
    ogp

OGPとは

下記に貼ってある画像のようにTwitter上でサイトの宣伝をしてくれる画像になります。
"image"

通常、画像は静的なファイルをサーバーにdeployをしておいてmetaタグで指定されれば画像がSNS上で表示されることになります。

しかし、ブログによっては記事ごとにOGP画像を生成したい場合はあり、そのようなサイトでは静的ファイルでは対応できなくなります。

そこで、vercelではOGP画像を動的に生成してくれる@vercel/ogというpackgeが提供されています。

こちらのpackageを使用すれば画像のカスタマイズも自由できendpointを一つ追加するだけOGP画像を用意時間を短縮できます。

packageの追加

まずは、packageの追加を行います。

npm i @vercel/og

yarn add @vercel/og

opg画像生成apiの作成

endpointを追加します。
作成するディレクトリはpages/api/og.tsxになります。
拡張子がtsではなくtsxになっているので注意してください。

pages/api/og.tsx

import { ImageResponse } from '@vercel/og'

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

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

記述が完了したら、http://localhost:3000/api/og にアクセスしてみてください。
以下のようにHello world!の画像が表示されれば成功しています。

"image"

header meta情報を追加

metaタグに先ほど作成したog画像の作成用endpointを指定してあげましょう。

<Head>
  <meta
    key="og:image"
    property="og:image"
    content="http://localhost:3000/api/og"
  />
</Head>

OGP画像の確認

vercelにdeploy後、発行されたPreviewURLなどをコピーしてください。

確認する方法としては以下のようなサイトがあります。

  1. Twitter公式
    https://cards-dev.twitter.com/validator
    画像のように表示されるかと思います。
    2022年12月現在、Logなどは表示されますがCardのPreviewの取得ができない状態となっています。
    "image"

  2. Web ToolBox
    https://web-toolbox.dev/tools/ogp-checker
    URLの入力後、OGPチェックを入力するとPCサイズモバイルサイズなどの様々なOGP画像のPreviewが確認できます。
    また、使用されているmeta情報なども確認できるのでこちらを参考にmeta情報の調整もされるといいかと思います。

"image"

  1. ラッコツールズ
    こちらははてなブックマークなどの確認もできるので日本のSNS系も確認したい場合に有効かと思います。
    metaタグなどの細かい情報は表示されないので注意。
    "image"

処理の流れを表示

筆者自身、実装をしてTwitterなどのSNSに表示されたのはよかったのですが
正直どういった流れでOGP画像が表示されているのか分からなかったので図にまとめてみました。

"image"