目次
Next.jsのテンプレートを使っていると、OGP画像がデフォルトのNext.jsロゴのままになっています。
これを独自の画像に変更したので、その手順を備忘録として残します。
デフォルトのOGP画像の問題点
SNSでシェアした時やLINEでリンクを送った時に表示されるOGP画像が、Next.jsのデフォルト画像のままだと以下の問題があります。
- ブランディングができていない
- 他のNext.jsサイトと区別がつかない
デフォルトでは以下のようなVercelのOGP画像生成サービスのURLが設定されています。
export const HOME_OG_IMAGE_URL =
'https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg'
独自画像に変更する
画像の準備
まず、OGP用の画像を準備します。推奨サイズは1200×630pxですが、正方形の画像でも問題ありません。
今回は例としてプロフィール画像（/public/assets/about/myicon.png）を使用します。
適宜自分のサイトに合った画像とパスに変更してください。
constants.tsの修正
lib/constants.tsファイルを開いて、HOME_OG_IMAGE_URLを変更します：
lib/constants.ts
export const HOME_OG_IMAGE_URL = 'https://yourdomain.com/assets/about/myicon.png'
これで、OGP画像が独自のものに変更されます。
注意点
- 画像は公開URLでアクセス可能である必要があります。ローカルパスでは動作しません。
- 画像は適切なサイズ（1200x630px推奨）であることを確認してください。
OGPテキストのカスタマイズ
画像だけでなく、説明文もカスタマイズすることをおすすめします。
next-seo.config.tsの設定
next-seoを使っている場合、next-seo.config.tsでOGPの設定を行います。
next-seo.config.ts
import { DefaultSeoProps } from 'next-seo';
const config: DefaultSeoProps = {
titleTemplate: '%s | サイト名',
defaultTitle: 'サイト名',
description: 'サイトのキャッチコピー',
openGraph: {
type: 'website',
locale: 'ja_JP',
url: 'https://yourdomain.com/',
siteName: 'サイト名',
description: 'サイトのキャッチコピー',
},
twitter: {
site: '@yourhandle',
cardType: 'summary_large_image',
},
};
export default config;
meta.tsxの修正
components/meta.tsxの説明文も忘れずに更新します。
components/meta.tsx
<meta
name="description"
content="サイトのキャッチコピー"
/>
確認方法
変更後、以下の方法でOGP画像が正しく設定されているか確認できます。
SNSプラットフォームは一度取得したOGP情報をキャッシュします。
変更後は各プラットフォームのデバッガーツールでキャッシュをクリアしてください。
OGPデバッガーツール
ローカルでの確認
ブラウザの開発者ツールで、以下のメタタグが正しく設定されているか確認：
<meta property="og:image" content="https://yourdomain.com/assets/about/myicon.png" />
無事確認できればNext.jsのOGP画像を独自のものに変更する手順は完了です。
これで、SNSでのシェア時により目を引くことができます。