IT-Q

ページごとのタイトルや OGP は、どう設定しますか。

page や layout から metadata を export します。注意点はマージが浅いことです。子で openGraph を一部だけ書くと、親の openGraph は補われず丸ごと置き換わります。

面接官が見ているのはMetadata API を知っているか。head を手で書いていないか。

よくある答えと、面談でどう見られるか

  • page や layout から metadata を export する。動的なら generateMetadata
    layout と page でマージされますが、入れ子は上書きされる点に注意が要ります。
  • layout の中で head タグを自分で書く
    重複の整理もマージも効かなくなります。用意されている仕組みを使います。
  • next.config で一括設定する
    ページごとの設定はできません。
  • react-helmet のようなライブラリを入れる
    標準の仕組みがあるので不要です。

模範解答

page.tsx や layout.tsx から metadata を export します。固定値ならオブジェクトを、データによって変わるなら generateMetadata という関数をexport します。

注意が要るのはマージの仕方です。公式が明記している通り、これは浅いマージで、同じキーは後のセグメントで置き換えられます。title のような単純な値なら期待通りですが、openGraph のような入れ子は「page 側で openGraph を書いた時点で、layout 側の openGraph が丸ごと消えます」。

たとえば layout に openGraph の title と description を書き、page で openGraph の title だけを上書きすると、description は出力から消えます。共通部分を別ファイルの変数に切り出して各ページで展開するのが、公式の回避策です。