Next.jsでmetaタグを出し分ける方法

まず Next.js でmetaタグを出し分ける方法ですが、next/headを利用すればサーバー側でmetaタグを生成してくれるので、OGP画像なども適切に埋め込むことができます。

参考: https://nextjs.org/docs/api-reference/next/head

設定したはずのmetaタグが表示されない

実際にnext/headを使ってtitleやog:imageを挿入したはずが、実際にレンダリングされたページを見ると挿入されていないという問題が発生しました。 そこで考えられる原因と対策を紹介しようと思います。

Headの中に2階層以上のコンポーネントを配置している

title, meta or any other elements (e.g. script) need to be contained as direct children of the Head element, or wrapped into maximum one level of <React.Fragment> or arrays—otherwise the tags won't be correctly picked up on client-side navigations.

公式ドキュメントにもあるように、Headの直下か、最大1階層のReact.Flagment、もしくは配列に記述する必要があります。

参考: https://nextjs.org/docs/api-reference/next/head

_document.js内のHeadでtitleを定義している

Adding <title> in pages/_document.js will lead to unexpected results with next/head since _document.js is only rendered on the initial pre-render.

上記のように公式ドキュメントに書いてあります。実際に僕も間違えて_document.js内にtitleタグを配置したときに上手くog:imageなどが出力されない問題が確認できました。

ドキュメントにもあるようにtitleタグをグローバルに設定したい場合は_app.jsに記述するようにしましょう。

参考: https://nextjs.org/docs/messages/no-document-title

最後に

これは、実際に僕がこのブログを実装するときに直面した問題であり、実際に解決できた方法になります。

Next.jsの公式ドキュメントは充実しているので、基本的に原因と対処法が記載されています。なので、ドキュメントをしっかり読む癖を付けましょう(自戒)