サイト内検索は、サイトに検索機能を追加することで、訪問者が探している情報を見つけることができ、その体験のルック＆フィールをコントロールすることができます。
また、チェックボックスをクリックするだけで、特定の要素、ページ、コレクション全体のコンテンツを簡単に検索から除外することができます。
サイト検索は、CMSホスティング以上のすべてのサイトで利用可能です。CMSホスティングとStandard Ecommerceホスティングでは、手動による再インデックス作成は24時間に1回利用可能です。それ以上のホスティング層では、手動による再インデックス作成は1時間に1回です。
このレッスンでは
- 検索コンポーネントを追加し、スタイルを設定する
- 検索結果ページのスタイル設定
- インデックス作成と "検索可能なもの "の制御
- よくある質問
について説明しています。
1.検索コンポーネントを追加し、スタイルを設定する
検索コンポーネントは、Designerの左側にあるAddパネルにあります。
以下の画像でのように、検索コンポーネントには3つのパーツがある事が分かります。
- Search (wrapper): 親要素で、検索フォームと送信ボタンが含まれます。
- 検索入力: ユーザーが検索結果を入力する場所
- 送信ボタン（オプション）: 検索を送信するためのボタン。
検索コンポーネントのデフォルトの構造。
検索コンポーネントをサイトに追加すると、Webflow サイトの他の要素と同じようにスタイルを設定することができます。
また、プレースホルダー(デフォルトに表示される文字)のテキストをカスタマイズしたり、検索バーをオートフォーカスに設定し、ページロード時に訪問者のカーソルを自動的に検索フィールドに配置することもできます。
2.検索結果ページのスタイル設定
検索コンポーネントをサイトに追加すると、「ページ」タブの「ユーティリティページ」セクションに検索結果ページが表示されるようになります。
検索結果ページの構造
検索結果ページを初めて開いたとき、すでにいくつかの基本的な構造があることに気がつくでしょう。コンテナ要素によってすべてが保持され、その中にオプションの検索コンポーネント（探しているものが見つからない場合に新しい検索を試みるためのもの）と、結果リストがあります。
このページの構成は、スタイルと一緒に自由に変更することができます。
検索結果のスタイル設定
検索結果のスタイリングは、Collection リストのスタイリングによく似ており、ある結果アイテムに適用されたスタイルが、そのリスト内の他のすべての結果アイテムに適用されます。しかし、検索結果には基本的な開始構造があり、その他にいくつかの新しいコントロールがあります。
知っておきたいこと:ホスティングされていないサイトとベーシックホスティングのサイトでは、公開されたサイト上に検索結果のサンプルが表示されます。実際の検索結果を表示するには、サイトにCMSまたはBusinessホスティングを追加する必要があります。
検索結果の構造
まず、検索結果には基本的な構成要素があり、それらを自由に並べ替えたり、再構成したり、削除したりすることができます。
- 検索タイトル（リンク）。検索タイトル（リンク）：「ページ設定」の「検索」セクションで検索結果のタイトルとして設定したもので、そのページのタイトルです。このタイトルは、デフォルトでそのページへのリンクとして機能します。
- ページのURL (テキストブロック): そのページのスラッグです。
- スニペット(段落)。検索された用語が表示されるページのコンテキストです。このスニペットの長さは、「検索結果設定」でコントロールできます。また、この段落を、ページ設定で設定できるカスタム記述につなげることもできます。
サイトのすべての静的ページとコレクションページのページ設定で、検索タイトルに表示するコンテンツを制御できます。コレクションページの場合、このコンテンツは、SEOやOpen Graphの設定と同様に、任意のフィールドから引き出すことができます。
コンテンツの "種類 "を表示する
検索説明フィールドを使用して、検索結果に追加情報を追加することができます。例えば、検索結果の横にブログ記事のカテゴリーを表示することで、特定の検索結果がどのような種類のコンテンツであるかを訪問者に示したいとします。
検索説明欄にカテゴリー名を追加し、検索結果レイアウトのテキストフィールドを検索説明欄につなげるだけで、お好みのスタイルに仕上がります。
検索結果のサムネイルを追加する
OG画像と同じように、ページ設定で検索画像を設定することもできます。検索画像を追加したら、その検索画像フィールドに画像要素を接続することで、この画像を検索結果に追加することができます。また、検索画像をdivの背景画像のソースとして設定することもできます。
スニペットのスタイル設定
スニペットのテキストを他のテキストと同様にスタイル設定できるほか、スニペットの長さ（文字数）やハイライト（スニペット内の検索語が太字になる）のオン／オフを制御することができます。
スニペット内のハイライトにスタイルを設定するには、スタイルガイド・ページのリッチテキスト要素で「すべての太字」のベースタグにスタイルを設定すると、検索結果ページでハイライトされた用語にこのスタイルが適用されます。
「空の状態」（または「検索結果なし」）のスタイリング
フォームにエラーや送信の状態があるように、検索結果ページにも「結果がない」状態があり、ユーザーがあなたのサイトで利用できないものを検索したときの影響を和らげるために、カスタマイズすることができます。(たとえば、ここにイラストを追加したり、ホームページへのリンクを貼ったりして、ユーザーの方向転換を促すことができます）。
フォームにエラーや送信の状態があるように、検索結果ページにも「結果がない」状態があり、ユーザーがあなたのサイトで利用できないものを検索したときの影響を和らげるために、カスタマイズすることができます。(たとえば、ここにイラストを追加したり、ホームページへのリンクを貼ったりして、ユーザーの方向転換を促すことができます）。
検索結果をプレビューする
検索結果のスタイルを設定する際に、検索結果設定セクションの「結果のプレビュー」フィールドで検索語を変更することで、表示結果を変更することができます。これにより、さまざまなクエリに対して検索結果がどのように表示されるか、より明確に把握することができます。
CMSまたはビジネスホスティングを追加し、サイトを公開するまでは、サイトの実際の結果ではなく、サンプル結果が表示されます。実際の検索結果をプレビューして表示するには、サイトを公開して検索インデックスを作成します。
3.インデックス、そして "検索可能なもの "を制限する
インデックスとは、検索エンジンのコンテンツとページのことで、人々があなたのサイトで検索をかけたときに、どのようなコンテンツを検索できるかを制御するものです。たとえば、特定のページを検索で発見できるようにしたくない場合は、インデックスから削除することができます（この方法については後述します）。
現時点では、サイトは1つの検索エンジンに制限されています。好きなだけ多くのページに検索バーを設置することができますが、すべて同じコンテンツを横断的に検索することになります。
CMSまたはBusinessホスティングを追加し、初めてサイトを公開した後、検索インデックスが作成されます。
インデックスを作成する前（またはホスティングを追加する前）に、サンプル結果を参考にしながら検索結果を設計することができます。
検索結果に表示されるコンテンツが、サイトコンテンツの最新の更新状況と一致するようにインデックスを更新するには、2つの方法があります。
- 手動でインデックスを更新する
- 自動インデックス更新
CMSホスティングでは、24時間に1回、手動でインデックスを更新することができます。ビジネス向けホスティングでは、手動による再インデックス付けは1時間に1回利用できます。CMSホスティングでは、自動再インデックス付けは72時間に1回、ビジネスホスティングでは、自動再インデックス付けは12時間に1回行われます。
手動による再インデックス付け
手動でインデックスを更新すると、検索エンジンのコンテンツを意図的にリフレッシュすることができます。これは、コンテンツの重要な更新をプッシュしたときや、検索エンジンのコンテンツに大規模な変更を加えたときに最適です（下記の「検索インデックスの絞り込み」参照）。
手動でサイトのインデックスを再作成するには、Designerの左側にある「設定」パネルを開き、「検索」セクションで "Index now "をクリックします。インデックスの作成は、大規模なサイトでは最大30分かかることがあります。
手動によるインデックス再作成は、CMSホスティングでは24時間に1回、Businessホスティングでは1時間に1回可能です。
自動的な再インデックス作成
継続的に、検索インデックスを更新し、検索エンジンのコンテンツをお客様のサイトの最新の変更に対応させます。CMSホスティングでは72時間に1回、ビジネスホスティングでは12時間に1回、自動再インデックス作成が行われます。
サイト内検索の対象からコンテンツを除外しても、Googleや他の検索エンジンがあなたのサイトをインデックスする方法には影響しません。サイト設定で、特定のページをインデックスしないように検索エンジンに依頼することができます。
検索インデックスの絞り込み
デフォルトでは、検索を追加すると、サイト上のすべてのコンテンツ（シンボル、コレクションリスト、ユーティリティページ、パスワードで保護されたコンテンツを除く）がインデックス化され、ユーザーは何かを検索したときにこのコンテンツを発見することができます。ほとんどの場合、インデックスを改良して、ユーザーが検索で発見できる内容をより細かく制御したり、発見されたくないコンテンツを非表示にしたりすることができます。
静的なページを除外する
例えば、非公開にしたい社内のスタイルガイドや、サイトの入り口としてしか機能していないホームページなどです。このような場合、これらの静的ページを検索から完全に除外することができます。
静的ページを除外するには、ページ設定に向かい、Open Graph設定の下にある新しい検索設定セクションまでスクロールダウンしてください。このセクションの上部に、"サイトの検索結果からこのページを除外する "というチェックボックスがあります。一度チェックすると、再インデックスでこのページがインデックスから削除されます。
パスワードで保護されたページとユーティリティーのページは、デフォルトで検索対象から除外されます。
コレクション・ページの除外
同様に、タグ、カテゴリー、または興味深いコレクション・ページがないその他の情報など、サイトのコンテンツの中心でない場合、特定のコレクションを検索対象から除外したい場合があります。
コレクションページを検索対象から除外するには、そのコレクションページのページ設定に向かい、「検索設定」セクションまでスクロールダウンします。サイト内検索結果からこれらのページを除外する」をチェックすると、次にサイトがインデックスされたときに、これらのページが検索エンジンから除外されます。
コレクションページを除外すると、すべてのテンプレートページが検索結果から除外されますが、他のページのコレクションリストでこのコレクションのコンテンツが表示されても、そのページのコンテンツからインデックスされるため、発見することは可能です。この場合、これらのCollectionリストに対して、要素レベルの除外を適用するとよいでしょう（以下を参照）。
現在のところ、個々のコレクションアイテムを検索対象から除外することはできません。
要素の除外
繰り返し表示される要素（ナビバー、フッター、サイドバー、フォームなど）は、サイト全体に表示され、検索結果を「混乱させる」可能性があるため、検索対象から除外することをお勧めします。(たとえば、ある人が「ブログ投稿」を検索したときに、「ブログ投稿」という言葉がナビゲーションにあった場合、サイト上のすべてのページがその検索に関連しているとみなされます)。
このため、シンボルとコレクションリストは
デフォルトで検索結果から除外されていますが、シンボルの親要素でこの設定を上書きすることができます。
ナビバー、フッター、サイドバーなど、繰り返し表示される要素を除外して、検索結果をすっきりさせることができます。(シンボルはデフォルトで除外されることに注意してください）。
親レベルで設定された除外ルールは、子要素にも適用されます。
4.よくある質問
・コードをエクスポートした場合、検索はどうなりますか？
→検索エンジンは Webflow でホストされている必要があるため、エクスポートされたサイトでは検索は機能しません。
・ユーザーが何を検索しているかを確認するにはどうすればよいですか？
→サイト訪問者が何を検索しているかを確認するには、Webflowサイト内検索とGoogle Analyticsを統合します。
・異なる内容の検索エンジンを複数持つことはできますか？
→現時点では、サイトの検索エンジンは1つに制限されています。好きなだけ多くのページに検索バーを設置することができますが、すべて同じコンテンツを横断的に検索することになります。
・エディターで検索はできますか？
→エディタでは、検索は機能しません。検索をテストするには、シークレットリンクでサイトを開くか、デザイナーから検索結果の設定結果プレビュー入力で結果をテストしてください。