AWS AmplifyにデプロイしたNext.jsアプリでOGPが表示されない場合の対処法

AWS AmplifyはWebアプリケーションを簡単にホスティングできるサービスです。 Next.js App Routerと組み合わせて使うことでRSC(React Server Component)の処理とSSRを行うこともできます。

Next.jsでは、opengraph-imageやtwitter-imageという名前でファイルを配置するだけでOGPを生成してくれますが、Amplifyでホスティングした場合にOGPが表示されない事象が発生しました。

OGPが表示されない原因

OGPでは、<meta property=”og:image”>タグに記載されているURLの画像が表示されます。

AmplifyでホスティングしているHTMLの中身を見てみると次のようになっていました。

<meta property="og:image" content="http://localhost:3000/opengraph-image.png?3822ab94b4cc4489">

localhost:3000を指してしまっているため、OGPの画像が取得できず表示されていないことが分かりました。

解決策

layout.tsx内のmetadataにmetadataBaseを追加することで解決しました。

metadataBaseは、OGPで使われるBase URLを指定できるため、ここにホスティングするドメインを記載することで解決しました。

例えば、このブログのドメインでホスティングする場合は、URL(“https://www.bloomblock.net”)とすればOKです。

export const metadata: Metadata = {
  title: "ページタイトル",
  description: "Next.js App",
  metadataBase: new URL("https://<your domain>"),
};

まとめ

AmplifyでNext.jsのアプリをホスティングした際に、OGPを正常に表示する方法を紹介しました。

解決してしまえば単純ですが、原因に気づきにくいため本記事が参考になれば幸いです。