サイト内検索はメタ情報の絞り込みだけで始められる
Next.jsで自作サイトに検索機能を追加したいが、Pagefindなどの全文索引ツール導入が大掛かりに感じる人向けの記事です。title・description・tags・slugのメタ情報を絞り込むだけで最初の検索は十分動くという実装ログをもとに手順を整理します。
- Next.js
- サイト内検索
- メタ情報
- Vercel
- 実装ログ
自作サイトに検索機能を追加しようとして、Pagefindのような全文検索ツールの導入方法を調べ始め、そこで手が止まった経験はないでしょうか。索引の生成、ビルドへの組み込み、依存パッケージの管理など、最初の一歩にしては検討事項が多く感じられます。
結論から言うと、最初のサイト内検索は全文索引なしでも動きます。筆者が2026-07-21にtoolarc.jpの/searchを実装した際は、記事のtitle・description・tags・slugといったメタ情報を絞り込むだけの検索ページを、まず公開しました。
今日の結論
- 最初のサイト内検索は、全文索引(Pagefind等)なしでもtitle・description・tags・slugのメタ絞り込みで足りることがある
/search?q=とヘッダーの検索入口を同じPRで繋ぐと、「仮リンク→ブログ一覧」のまま放置しにくい- 需要と計測が出てから全文検索へ引き上げれば、依存パッケージの追加を後回しにできる
なぜ最初から全文索引を入れなくてよいのか
全文検索は、記事本文の中身までインデックス化して検索対象にする仕組みです。精度は高くなりますが、索引生成の仕組みをビルドに組み込む必要があり、記事数が少ない立ち上げ期には不釣り合いなコスト。
一方、記事のtitle・description・tags・slugといったメタ情報は、記事一覧を取得する時点ですでに手元にあります。この範囲だけを対象にした部分一致フィルタなら、新しい依存パッケージを追加せずに検索ページを作れます。
メタ絞り込みだけの検索ページを作る手順
- 公開記事のメタ情報(title・description・tags・slug)を配列として取得し、クライアント側で部分一致フィルタする最小ページを作ります
- ヘッダーの「検索」リンクを、暫定的な
/blog一覧ではなく本番の/searchに本接続する sitemap.tsに/searchを追加し、本番環境で実際にページが表示されることを確認します
この3手順を1つのPRにまとめておくと、「検索リンクは置いたが実装は後回し」という状態が残りません。
ヘッダー入口を後回しにしないほうがよい理由
検索ページ自体を先に作り、ヘッダーの接続を別PRに分けたくなることがあります。しかし、ヘッダーの「検索」がとりあえず/blogに飛ぶ仮リンクのまま残ると、次のPRを出すまでその状態が続きます。仮リンクは動くように見えるため、後回しにされやすいものです。検索ページと入口の接続を同じPRに含めておくと、この状態を避けられます。
全文検索へ拡張するタイミングの目安
| 状況 | 対応の目安 |
|---|---|
| 記事数が少なく、メタ情報のキーワードで大半の意図をカバーできる | メタ絞り込みのまま様子を見る |
| 検索クエリのログから、本文中の語句で探している形跡が増えてきた | 全文索引ツールの導入を検討する |
| 記事数が増え、メタ情報だけでは該当記事が絞り込めなくなってきた | 全文索引ツールの導入を検討する |
まとめ・次に読む
検索機能は「全文検索を入れるかどうか」で止まりやすい機能ですが、最初の一歩はメタ情報の絞り込みで十分です。需要が見えてから本文検索へ引き上げる順番のほうが、依存パッケージを無駄に増やさずに済みます。
同日公開の前記事として、Obsidianのチェック操作ショートカットも整理しています。
本記事の内容は執筆時点(2026-07-24)の実装ログ(2026-07-21)に基づきます。検索ページの実装方法はサイトの技術構成によって異なるため、他サイトへ適用する際は自身の構成に合わせて調整してください。