【Next.js】検索結果にサムネイル画像を設定する方法
技術約3分で読めます
この記事でわかること
- Next.js の metadata の other を使って、任意の meta タグを head に出す方法
- thumbnail タグが実際に効く範囲（プログラマブル検索エンジン向け）
- 通常の検索結果や SNS カードに画像を出すなら og:image を使うという使い分け
Next.js（App Router）で metadata をエクスポートできる構成であること。
概要
この記事ではNext.jsで作成したサイト、アプリケーションにサムネイル画像を設定する方法について説明をします。
wordpressなどを使ったサムネイル画像の設定方法はすぐに見つかったのですが、Next.jsの場合の設定方法についてはすぐに見つからなかったので共有します。
Webブラウザにおけるサムネイル画像とは
下記の画像のようにページ説明の右側に出す画像のことです。
他のページとの差別化を図ったりそのページにどんな情報があるのか視覚的にわかりやすくなります。
実装方法
layout.tsxや各page.tsxにてmetaDataのotherに下記のように指定してあげるだけです。
export const metadata: Metadata = {
other: {
thumbnail: 'サムネイル画像のURL',
},
};確認方法
検証ツールなどでHTMLのheadタグの中に thumbnail と書いてあるmetaタグがあれば問題ないと思います。
念の為metaタグのリンクに遷移し、画像が表示できるところまで確認しておくとなお良いと思います。
補足: thumbnail が効く範囲
注意
この
thumbnail メタタグは、Google のプログラマブル検索エンジン（旧カスタム検索）向けの仕組みです。サイト内検索を Google のエンジンで作っている場合はこれでサムネイルを指定できますが、通常の Google 検索結果や Discover のサムネイルは、schema.org の構造化データと og:image が使われます。X や Slack などに URL を貼ったときのカード画像も og:image です。いわゆる「シェアしたときに出る画像」を設定したいなら、Next.js の metadata では openGraph を使います。other の thumbnail と併用して問題ありません。
export const metadata: Metadata = {
openGraph: {
title: 'ページタイトル',
description: 'ページの説明',
images: [{ url: 'サムネイル画像のURL', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
},
};Tips
og:image の URL は絶対パスでなければなりません（/ogp.png のような相対パスは読まれません）。Next.js では metadataBase を設定しておくと、相対パスを書いても自動で絶対 URL に展開されます。まとめ
metadataのotherに書けば、任意の meta タグを head に出せるthumbnailが効くのはプログラマブル検索エンジン。通常の検索結果や SNS のカードはog:imageog:imageの URL は絶対パス。Next.js ならmetadataBaseを先に設定しておく
layout.tsx などに meta タグを直接埋め込んでも良いのですが、そうすると各ページごとにサムネイル画像を変えたいとき、head じゃない部分で meta タグを書くことになってしまいます。metadata 経由なら page ごとに自然に分けられます。
参考リンク
更新履歴
- thumbnail メタタグが Google のプログラマブル検索エンジン向けの仕組みであり、通常の検索結果や SNS カードでは og:image が使われることを補足として追加（元の手順はそのまま）。openGraph の設定例と metadataBase の注意点を追加。本文の誤字（thumbail→thumbnail）を修正。コードブロックにファイル名キャプションを追加。まとめを箸条書きに整理し、参考リンクを追加。
