Next.js で発生する metadataBase エラーの解決方法

metadataBase エラーとは

Next.js のプロジェクトで以下のような警告が表示されることがあります。

この警告は、例えば、ローカル開発時に、ソーシャルメディアの Open Graph 画像や Twitter カードの画像を正しく解決するために必要な metadataBase プロパティが設定されていないために発生します。

具体的には、ページをソーシャルメディアで共有した際のリンクプレビューに使用される URL が誤って localhost になってしまうことが問題です。

metadataBase の役割

metadataBase プロパティは、Open Graph 画像や Twitter カードなど、ソーシャルメディア共有に関連するリンクのベースとなる URL を設定するためのものです。これを設定することで、リンクプレビューの画像が正しく参照されるようになり、ユーザーがソーシャルメディアでシェアした際に適切なプレビューが表示されます。

この設定をしない場合、デフォルトの localhost が使われてしまい、本番環境でリンクプレビューが意図しない形で表示されてしまいます。リンクプレビューが不正確だと、ユーザーに誤解を与える可能性があり、コンバージョン率の低下にも繋がるため、正しい URL を設定することは重要です。

解決方法

layout.tsx ファイルに以下のように、具体的な URL を指定して metadataBase プロパティを設定します。

このコードを追加することで、ソーシャルメディアで共有されたときにリンクプレビューが適切に表示されるようになります。https://xxxx の部分は、あなたのウェブサイトの実際の URL に置き換えてください。これにより、リンクがユーザーにとってより信頼できるものとなり、より良いユーザー体験を提供できます。

metadataBase 設定のメリット

• 正しいリンクプレビューの表示: ソーシャルメディアでのシェア時に、適切なリンクプレビューが表示されるため、ユーザーの興味を引くことができます。
• SEO 対策の強化: 適切なメタデータを設定することで、SEO 効果が向上し、検索エンジンにより正確な情報が提供されます。
• ユーザー体験の向上: リンクプレビューの内容が正確であると、ユーザーがリンクをクリックする意欲が高まり、ウェブサイトへのトラフィックを向上させることができます。

metadataBase プロパティを設定することは、Next.js プロジェクトにおいてソーシャルメディアでの共有時に正しいリンクプレビューを表示するために非常に重要です。この設定を忘れると、デフォルトで localhost の URL が使われてしまい、本番環境で意図しないリンクプレビューが表示される可能性があります。