Pagefindの検索結果（タイトル）が想定のものと異なっていた

問題

Lume のプラグインで提供されているPagefind¹において検索ボックスにキーワードを入力すると、検索結果に表示されるページのタイトルが個々のページのタイトルではなく、すべて同じタイトルで表示されていました。

原因・解決

原因

最終的に生成された HTML において、検索結果のタイトルとして表示してほしいテキスト（ページの主要な<h1>タグ）よりも上部にヘッダ内でサイト名を<h1>タグを使って記述していたことが原因でした。
Pagefind はデフォルトでページ内の最初の<h1>タグをメタデータとしてインデックスするため、ヘッダの<h1>が検索結果のタイトルとして表示されていました。

これを解決するためには、以下の解決方法があります。

1. ページのタイトルテキスト以外で<h1>タグを使わない

最も簡単な解決方法は、ページのページのタイトルテキスト以外で<h1>タグを使わないことです。<h1>タグから別のタグ（<p>など）に変更することで、ページの主要な<h1>タグが最初の<h1>となり、Pagefind がこれをタイトルとして正しくインデックスします。

2. data-pagefind-meta属性を使う

もう一つの解決方法は、Pagefind のdata-pagefind-meta="title"属性を使用して、ページのタイトルとしてインデックスすべき要素を明治的に指定することです。
この方法では、ページ内の最初の<h1>タグをそのままにしつつ、各ページの主要な<h1>タグにdata-pagefind-meta="title"を追加します。また、コンテンツをインデックスする範囲を指定するために、主要なコンテンツ領域にdata-pagefind-body属性を追加します。

<main className="main">
  <div data-pagefind-body>
    <article className="my-8">
      <div className="mb-4">
        <p data-pagefind-meta="title">タイトル</p>
        {/* 他のメタデータ */}
      </div>
      <div className="prose">
        <p>コンテンツ</p>
      </div>
    </article>
  </div>
</main>

まとめ

Pagefind の検索結果でページタイトルが正しく表示されない問題は、検索結果のタイトルとして表示してほしいテキストよりも前に<h1>タグを使用していたことが原因でした。
また、この問題が起きた根本的な原因は僕が Pagefind のドキュメントを読まずに使っていたことでした。
ちゃんとドキュメントを読もう。