メタデータ

ページやレイアウトは、静的な metadata オブジェクトをエクスポートするか、ルートパラメ ータに依存する値のために非同期の generateMetadata() をエクスポートできます:

import type { Metadata } from 'murasaki'

export const metadata: Metadata = {
  title: 'Blog',
  description: 'Posts about murasaki.',
}

import type { GenerateMetadata } from 'murasaki'

export const generateMetadata: GenerateMetadata = async ({ params }) => {
  return { title: `Post: ${params.slug}` }
}

generateMetadata は { params } を受け取ります — useParams() がクライアント側で読 み取るのと同じ動的セグメントの params です — なので、CMS や API ルート、その他の非同期 処理からタイトルを取得できます。

Metadata の形

interface Metadata {
  title?: string
  description?: string
  icons?: {
    icon?: string
    shortcut?: string
    apple?: string
  }
  openGraph?: {
    title?: string
    description?: string
    images?: string[]
  }
}

レイアウトがデフォルトを設定し、ページがそれを上書きする

レイアウトの metadata(とページのそれ)はルートからリーフへとマージされます — 各祖先レイアウトのフィールドが先に適用され、その上にマッチしたページのものが適用 されます — なので、レイアウトはフォールバックの description や openGraph.images を設定でき、その配下のすべてのページは自分で設定しない限りそ れを継承します:

export const metadata: Metadata = {
  title: 'My App',
  openGraph: { images: ['/og-default.png'] },
}

export const metadata: Metadata = {
  title: 'My Post',
  // openGraph.images は引き続きレイアウトの '/og-default.png' に解決されます —
  // ページが実際に設定したフィールドだけが、その上にあるものを上書きします。
}

このマージはオブジェクト全体ではなくフィールド単位です: icons と openGraph はキーごとにマージされ(ページが openGraph.title を設定しても、レイアウトの openGraph.images は失われません)、title のようなトップレベルのフィールドは単 純に上書きされます。

ページの generateMetadata(存在する場合)は await され、この静的なチェーン全体 の上に最後にマージされます — なので、レイアウトのものを含め、静的エクスポートが 設定したどのフィールドも上書きできます。

適用される仕組み

ナビゲーションのたびに、<AppRouter> はこのチェーン全体を解決し、ドキュメントに 適用します:

• document.title(タイトルが実際に解決されたときだけ変更されます — 空にされる ことはありません)
• <meta name="description">
• Open Graph の <meta property="og:..."> タグ(openGraph フィールドが省略され た場合は title / description にフォールバックします)
• icons.icon からの <link rel="icon">

Murasaki が以前追加したタグは、新しいタグが適用される前に削除されるため、ルート 間を移動しても前のルートの古いタグが蓄積されるのではなく、きれいに置き換えられま す。applyMetadata(これを行う関数で、自分で呼び出す必要がある場合のためにエク スポートされています)は DOM 環境の外では no-op です。

次へ