設置コード

設置コードの種類

このページでは、検索結果ページをお客様サイトに設置する「埋め込み型」の設置方法を説明します。検索結果ページをneodigが配信する方式については、neodigでホスティングをご覧ください。

埋め込み型では、検索結果ページと検索フォームの2つのコードを設置します。設置方法については、ダッシュボードの手順をご確認ください。

• 検索結果ページ: 実際の検索結果を表示するページです。search.htmlなどの名前で単体のHTMLファイルとして設置します。
• 検索フォーム: 検索フォームは、シンプルな入力フォームとサジェスト機能から構成されています。Webサイトの共通ヘッダーなどに、全ページに組み込む形で設置してください。

Google Analytics連携

お客様サイトにGoogle Analytics（GA4）が設置されていれば、サイト内検索の実行時にneodigが view_search_results イベント（検索キーワード付き）を自動送信します。GA4の「検索キーワード」レポートで検索語句を確認できます。追加の設定は不要です。GA4の拡張計測「サイト内検索」を有効にしている場合、このイベントと二重計上になります。

検索結果の設定オプション

検索結果ページのコード内に、neodig-search-config というクラスを持つ <script> タグがあります。この中のJSON設定を変更することで、検索結果の表示内容をカスタマイズできます。SPAフレームワーク（Vue.js、React等）で利用する場合は、<script> タグの代わりに <div hidden> を使用することもできます。

おすすめコンテンツの設定

"recommend": {
  "maxSize": 3,
  "messages": {
    "header": "おすすめコンテンツ"
  }
}

FAQの設定

"faq": {
  "scoreThreshold": 0.7,
  "messages": {
    "header": "FAQからの検索結果",
    "badge": "FAQ",
    "detailLink": "続きを読む"
  }
}

FAQセクションは、FAQサイト構築機能で登録されたFAQがサイト内検索結果に表示されます。

AI検索の設定（AI Overview / 0件代替提案）

検索結果の上部にAIが生成した要約と引用元（参考にした情報）を表示する機能です。ダッシュボードの「AI検索設定」で動作モードを切り替えます。

検索結果ページのHTMLには、AI検索の表示先となる <div class="neodig-ai-search-section"> を .neodig-result-contents の中（推奨: 最上部）に配置します。

<div class="neodig-result-contents">
    <div class="neodig-ai-search-section"></div>
    <div class="neodig-faq-section"></div>
    <div class="neodig-recommendations-section"></div>
    <div class="neodig-results-section"></div>
</div>

メッセージ等のカスタマイズはJSON設定で行います。

"aiSearch": {
  "enableMarkdown": true,
  "messages": {
    "badge": "AI",
    "header": "AIによる回答",
    "loading": "AIが回答を生成中…",
    "citationsHeader": "参考にした情報",
    "disclaimer": "※生成AIによる回答は誤りを含むことがあります"
  }
}

回答が生成できないとき（プラン未契約、モードoff、検索結果が1件以上あるときのmode=fallback、NGワード検出など）はセクション全体が非表示になります。

検索結果の設定

"result": {
  "size": 10,
  "scoreThreshold": 0.7,
  "enableMarkdown": true,
  "lastModifiedDateFormat": "yyyy/MM/dd",
  "messages": {
    "header": "検索結果",
    "notFound": "検索結果が見つかりませんでした",
    "showNext": "さらに表示",
    "limitReached": "検索結果の表示上限に達しました。検索キーワードを変えて検索して下さい",
    "expandDetails": "続きを表示",
    "collapse": "折りたたむ",
    "scrollTop": "",
    "error": "エラーが発生しました。時間を空けて再度お試しください。",
    "rateLimitError": "リクエストが多すぎます。しばらく待ってから再度お試しください",
    "retry": "再試行"
  }
}

更新日時フィルタ

検索結果ページのHTMLには、更新日時フィルタ（<select class="neodig-freshness-dropdown">）が含まれています。選択肢は「24時間以内」「1週間以内」「1ヶ月以内」「1年以内」です。選択すると自動的に再検索が実行され、選択状態はURLパラメータ（後述）に保存されます。フィルタが不要な場合は、.neodig-freshness 要素ごとHTMLから削除してください。

入力・表示の制限

• 検索キーワードは50文字までです。超過すると「検索キーワードは50文字以内で入力してください」と表示され、検索は実行されません
• サジェスト（入力補完）は25文字を超えると候補を表示しません
• 検索結果は最大100件まで表示できます。limitReachedのメッセージは、この上限に達したときに表示されます

検索結果ページのURLパラメータ

検索結果ページは、検索条件をURLパラメータとして保持します。

• q: 検索キーワード
• freshness: 更新日時フィルタの選択値（day / week / month / year）
• c_<カテゴリキー>: カテゴリの選択状態（カンマ区切り）

独自のリンクから検索結果ページへ直接遷移させたい場合は、これらのパラメータを付与してください。

結果ページのデザインカスタマイズ

検索結果の表示内容・表示順序の変更

検索結果ページでは、<template> 要素を使用して、おすすめコンテンツと検索結果の表示レイアウトをカスタマイズできます。SPAフレームワーク（Vue.js、React等）で利用する場合は、<template> タグの代わりに <div hidden> を使用することもできます。

テンプレートの種類

検索結果ページには3種類のテンプレートが用意されています。

利用可能な表示要素

各テンプレート内で使用できる要素を以下のクラス名で指定します。これらのクラスを持つ要素に、自動的にデータが挿入されます。

おすすめコンテンツテンプレート

FAQテンプレート

FAQはアコーディオン形式で表示されます。デフォルトでは <details> / <summary> を使った折り畳み構造でレンダリングされ、回答エリアには detailUrl がある場合に「続きを読む」リンクが表示されます。

検索結果テンプレート

カスタマイズの自由度

テンプレートを編集することで、以下のようなカスタマイズが可能です。

• 不要な要素のクラスを削除して、その情報を非表示にできます
• タイトル、画像、要約などの表示順序を自由に変更できます
• 独自のラッパー要素やグリッドレイアウトを追加して、サイトのデザインに合わせた構造を構築できます

注意事項

• 表示したい情報のクラス名を持つ要素を必ずテンプレート内に含めてください
• クラス名は正確に指定してください（スペルミスがあるとデータが挿入されません）
• テンプレート全体のHTML構造は自由ですが、データ挿入用のクラス名を持つ要素は必須です

検索結果のCSS変更

サンプルCSSは参考として提供されています。実際のデザインは、お客様のサイト側のCSSで自由にカスタマイズしてください。

検索フォームのCSSクラス

音声入力のCSSクラス

対応ブラウザ（Chrome、Edge）では、検索入力フィールド内に音声入力ボタンが自動的に表示されます。Firefox等の非対応ブラウザやiOS端末ではボタンは表示されません。音声入力の認識言語は日本語（ja-JP）固定です。ブラウザ側でマイクの使用が恒久的にブロックされている場合、検索キーワード入力欄の下（.neodig-validation-error）に「マイクがブロックされています。ブラウザのサイト設定から許可してください。」と表示されます。音声入力ボタンが表示されない場合は、トラブルシューティングをご確認ください。

検索結果のCSSクラス

AI検索のCSSクラス

トラブルシューティング

音声入力ボタンが表示されない

音声入力ボタンが表示されない場合、以下の点を確認してください。

1. ブラウザの対応状況

音声入力は Web Speech API に対応したブラウザ（Chrome、Edge）でのみ利用可能です。Firefox等の非対応ブラウザではボタンは表示されません。また、iOSでは全てのブラウザがWebKitエンジンを使用しており、Web Speech APIが正常に動作しないためボタンは表示されません。

2. HTTPS の使用

音声入力にはHTTPS接続が必要です（localhost を除く）。HTTP環境では音声入力は利用できません。

3. Permissions-Policy ヘッダーの確認

サーバーの Permissions-Policy HTTPレスポンスヘッダーで microphone がブロックされていると、音声入力ボタンは自動的に非表示になります。ブラウザのDevToolsコンソールに以下のメッセージが表示されている場合、この設定が原因です。

Voice input button is hidden because microphone access is blocked. Please check that the Permissions-Policy header allows microphone.

対処方法: サーバーの Permissions-Policy ヘッダーで microphone を許可してください。

Permissions-Policy: microphone=(self)

WAFやCDN、セキュリティモジュール（例: helmet、nuxt-security）がデフォルトで microphone=() を設定している場合があります。