Head

Headを使うと、ページや子コンポーネントからHTMLのheadへ要素を追加できます。ここではページ（レイアウトでも可能）に説明文やHTMLの属性を追加します。

Table of Contents

ページごとのhead要素を追加する

Headをminista/headからimportし、追加したい要素を子要素として記述します。pluginSsg()を設定した構成で利用でき、追加のプラグインは不要です。

src/pages/news/hello.tsx
import type { Metadata, PageProps } from "minista/types"
import { Head } from "minista/head"

export const metadata: Metadata = { title: "サイトを公開しました" }

export default function Article({ title }: PageProps) {
  return (
    <>
      <Head>
        <meta name="description" content="サイト公開のお知らせです。" />
      </Head>
      <h1>{title}</h1>
    </>
  )
}

Headは、その場所にHTMLを出力するコンポーネントではありません。ページの描画時に要素を集め、レイアウトのheadへ追加します。この例では、既存のtitleやmetaに説明文が加わります。

dist/news/hello.html（headの抜粋）
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>サイトを公開しました</title>
  <meta name="description" content="サイト公開のお知らせです。" />
</head>

title、charset、viewportがレイアウトと重複する場合は、Head側が優先されます。

同じkeyの要素を上書きする

同じkeyを持つ要素をHeadへ指定すると、後から登場した要素が採用されます。例えば、次の二つのmetaはどちらもkey="desc"を持つため、後の説明文だけが出力されます。

src/pages/news/hello.tsx（抜粋）
<Head>
  <meta name="description" content="共通の説明文です。" key="desc" />
  <meta name="description" content="このページの説明文です。" key="desc" />
</Head>
出力されるHTML
<meta name="description" content="このページの説明文です。" />

複数のHeadに分かれていても、描画時に同じkeyの要素が後から登場すると上書きされます。

keyは要素を識別するための指定で、HTMLの属性には出力されません。descriptionはnameが同じというだけでは上書きされないため、差し替えたい要素には同じkeyを指定してください。

title charset viewportは、keyなしでも種類ごとに後の要素が優先されます。

htmlとbodyの属性を指定する

htmlAttributesとbodyAttributesで、レイアウトのhtml bodyへ属性を追加できます。同じ属性を指定した場合は、後の値が優先されます。

src/pages/news/hello.tsx（抜粋）
<Head htmlAttributes={{ lang: "ja" }} bodyAttributes={{ class: "news-page" }} />

この例では<html lang="ja">と<body class="news-page">になります。bodyAttributesでは、HTMLの属性名であるclassを使います。

公開APIはpluginSsgのHeadを参照してください。

次はpublicのファイルで、faviconやPDFをそのまま公開します。

前のページレイアウト
次のページpublicのファイル