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

ITエンジニア向け
Amplify AWS Next.js

この記事は、BloomBlockが過去に公開したクラウド・Webインフラ関連の記事です。現在はAI Agentを活用した業務自動化・システム開発支援を中心に事業を行っていますが、当時の知見が今でも参考になる部分があるため、アーカイブとして公開しています。

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(“./”)とすればOKです。 

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

まとめ

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

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