Next.jsのテンプレートを使っていると、OGP画像がデフォルトのNext.jsロゴのままになっています。
これを独自の画像に変更したので、その手順を備忘録として残します。
<h2 id="%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%AEogp%E7%94%BB%E5%83%8F%E3%81%AE%E5%95%8F%E9%A1%8C%E7%82%B9" data-line="5" class="code-line"><a class="header-anchor-link" href="#%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%AEogp%E7%94%BB%E5%83%8F%E3%81%AE%E5%95%8F%E9%A1%8C%E7%82%B9" aria-hidden="true"></a> デフォルトのOGP画像の問題点</h2>
SNSでシェアした時やLINEでリンクを送った時に表示されるOGP画像が、Next.jsのデフォルト画像のままだと以下の問題があります。
<ul data-line="9" class="code-line">
<li data-line="9" class="code-line">ブランディングができていない</li>
<li data-line="10" class="code-line">他のNext.jsサイトと区別がつかない</li>
</ul>
デフォルトでは以下のようなVercelのOGP画像生成サービスのURLが設定されています。
<div class="code-block-container"><pre class="language-typescript"><code class="language-typescript code-line" data-line="14">export const HOME_OG_IMAGE_URL =
 'https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&amp;md=1&amp;fontSize=100px&amp;images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg'
</code></pre></div><h2 id="%E7%8B%AC%E8%87%AA%E7%94%BB%E5%83%8F%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B" data-line="19" class="code-line"><a class="header-anchor-link" href="#%E7%8B%AC%E8%87%AA%E7%94%BB%E5%83%8F%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B" aria-hidden="true"></a> 独自画像に変更する</h2>
<h3 id="%E7%94%BB%E5%83%8F%E3%81%AE%E6%BA%96%E5%82%99" data-line="21" class="code-line"><a class="header-anchor-link" href="#%E7%94%BB%E5%83%8F%E3%81%AE%E6%BA%96%E5%82%99" aria-hidden="true"></a> 画像の準備</h3>
まず、OGP用の画像を準備します。推奨サイズは1200×630pxですが、正方形の画像でも問題ありません。
今回は例としてプロフィール画像（<code>/public/assets/about/myicon.png</code>）を使用します。
適宜自分のサイトに合った画像とパスに変更してください。
<h3 id="constants.ts%E3%81%AE%E4%BF%AE%E6%AD%A3" data-line="29" class="code-line"><a class="header-anchor-link" href="#constants.ts%E3%81%AE%E4%BF%AE%E6%AD%A3" aria-hidden="true"></a> constants.tsの修正</h3>
<code>lib/constants.ts</code>ファイルを開いて、<code>HOME_OG_IMAGE_URL</code>を変更します：
<div class="code-block-container"><div class="code-block-filename-container"> lib/constants.ts</div><pre class="language-ts"><code class="language-ts code-line" data-line="33">export const HOME_OG_IMAGE_URL = 'https://yourdomain.com/assets/about/myicon.png'
</code></pre></div>これで、OGP画像が独自のものに変更されます。
<h4 id="%E6%B3%A8%E6%84%8F%E7%82%B9" data-line="39" class="code-line"><a class="header-anchor-link" href="#%E6%B3%A8%E6%84%8F%E7%82%B9" aria-hidden="true"></a> 注意点</h4>
<ul data-line="40" class="code-line">
<li data-line="40" class="code-line">画像は公開URLでアクセス可能である必要があります。ローカルパスでは動作しません。</li>
<li data-line="41" class="code-line">画像は適切なサイズ（1200x630px推奨）であることを確認してください。</li>
</ul>
<h2 id="ogp%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA" data-line="43" class="code-line"><a class="header-anchor-link" href="#ogp%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA" aria-hidden="true"></a> OGPテキストのカスタマイズ</h2>
画像だけでなく、説明文もカスタマイズすることをおすすめします。
<h3 id="next-seo.config.ts%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="47" class="code-line"><a class="header-anchor-link" href="#next-seo.config.ts%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> next-seo.config.tsの設定</h3>
next-seoを使っている場合、<code>next-seo.config.ts</code>でOGPの設定を行います。
<div class="code-block-container"><div class="code-block-filename-container"> next-seo.config.ts</div><pre class="language-ts"><code class="language-ts code-line" data-line="50">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;
</code></pre></div><h3 id="meta.tsx%E3%81%AE%E4%BF%AE%E6%AD%A3" data-line="73" class="code-line"><a class="header-anchor-link" href="#meta.tsx%E3%81%AE%E4%BF%AE%E6%AD%A3" aria-hidden="true"></a> meta.tsxの修正</h3>
<code>components/meta.tsx</code>の説明文も忘れずに更新します。
<div class="code-block-container"><div class="code-block-filename-container"> components/meta.tsx</div><pre class="language-tsx"><code class="language-tsx code-line" data-line="77">&lt;meta
 name="description"
 content="サイトのキャッチコピー"
/&gt;
</code></pre></div><h2 id="%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95" data-line="84" class="code-line"><a class="header-anchor-link" href="#%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 確認方法</h2>
変更後、以下の方法でOGP画像が正しく設定されているか確認できます。
SNSプラットフォームは一度取得したOGP情報をキャッシュします。
変更後は各プラットフォームのデバッガーツールでキャッシュをクリアしてください。
<h3 id="ogp%E3%83%87%E3%83%90%E3%83%83%E3%82%AC%E3%83%BC%E3%83%84%E3%83%BC%E3%83%AB" data-line="92" class="code-line"><a class="header-anchor-link" href="#ogp%E3%83%87%E3%83%90%E3%83%83%E3%82%AC%E3%83%BC%E3%83%84%E3%83%BC%E3%83%AB" aria-hidden="true"></a> OGPデバッガーツール</h3>
<ul data-line="94" class="code-line">
<li data-line="94" class="code-line"><a href="https://developers.facebook.com/tools/debug/" target="_blank" rel="nofollow noopener noreferrer">Facebook Sharing Debugger</a></li>
<li data-line="95" class="code-line"><a href="https://cards-dev.twitter.com/validator" target="_blank" rel="nofollow noopener noreferrer">Twitter Card Validator</a></li>
<li data-line="96" class="code-line"><a href="https://poker.line.naver.jp/" target="_blank" rel="nofollow noopener noreferrer">LINE OGP Checker</a></li>
</ul>
<h3 id="%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E3%81%AE%E7%A2%BA%E8%AA%8D" data-line="98" class="code-line"><a class="header-anchor-link" href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E3%81%AE%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> ローカルでの確認</h3>
ブラウザの開発者ツールで、以下のメタタグが正しく設定されているか確認：
<div class="code-block-container"><pre class="language-html"><code class="language-html code-line" data-line="102">&lt;meta property="og:image" content="https://yourdomain.com/assets/about/myicon.png" /&gt;
</code></pre></div>無事確認できればNext.jsのOGP画像を独自のものに変更する手順は完了です。
これで、SNSでのシェア時により目を引くことができます。

Next.jsのOGP画像をデフォルトから独自画像に変更する方法