next-seoはdivタグで囲むと上書きされない

next-seoはNextJSで使うSEO対策用の便利なライブラリですが、なぜかFacebookのシェアデバッガーを使ってメタ情報を確認すると正常に認識しませんでした。

問題

子ページでベースのメタ情報を上書きするための記述をしたものの、シェアデバッガーで確認したところ全体のデフォルト設定のまま表示されてします。

原因

<NextSeo>のコンポーネントをdivタグで囲ってしまっていたことが原因でした。恐らく、ライブラリの仕様的にbody内のコンポーネントとして認識されてしまい、ビルド時にデフォルトのデータが残ってしまったのかと思います。

対策

divタグを外してReactフラグメント（空タグ）で囲ってあげればOKです。

NGコード

return (
<div>
  <NextSeo
    title={props.title}
    description={props.description}
  />
  <div>
    <p>page<p>
  </div>
</div>
)

OKコード

return (
<>
  <NextSeo
    title={props.title}
    description={props.description}
  />
  <div>
    <p>page<p>
  </div>
</>
)

まとめ

こういうのでもパッと情報が出てこないとprppsが正常に届いているかとか、一つ一つ確認して進めるしかないの嫌ですね。個人開発自体は少しずつ進んできてて良きです。