概要

この記事ではNext.jsで作成したサイト、アプリケーションにサムネイル画像を設定する方法について説明をします。

wordpressなどを使ったサムネイル画像の設定方法はすぐに見つかったのですが、Next.jsの場合の設定方法についてはすぐに見つからなかったので共有します。

Webブラウザにおけるサムネイル画像とは

下記の画像のようにページ説明の右側に出す画像のことです。

他のページとの差別化を図ったりそのページにどんな情報があるのか視覚的にわかりやすくなります。

実装方法

layout.tsxや各page.tsxにてmetaDataのotherに下記のように指定してあげるだけです。

export const metadata: Metadata = {
  other: {
    thumbnail: `サムネイル画像のURL`,
  },
};

確認方法

検証ツールなどでHTMLのheadタグの中にthumbailと書いてあるmetaタグがあれば問題ないと思います。

念の為metaタグのリンクに遷移し、画像が表示できるところまで確認しておくとなお良いと思います。

まとめ

方法が意外と楽な割にネット上に情報が少なかったので困りました。

layout.tsxなどにmetaタグを直接埋め込んでも良いのですが、そうすると各ページごとサムネイル画像を変えたい時に、headじゃない部分でmetaタグを書くことになってしまうので記述が変になります。

今回の方法は覚えておこうと思います。