コンテンツセレクター

コンテンツセレクターを使うと、クロールしたページのどの部分をインデックスするかを制御できます。各エントリは URL の glob パターンと CSS セレクターを組み合わせます。ページ URL が glob パターンに一致すると、対応する CSS セレクターに一致する要素とその子孫だけを抽出し、Markdown に変換してインデックスします。

リストは順序付きで、最初に一致したパスが優先 されます。ページ URL が複数の glob パターンに一致する場合、最初の一致のセレクターだけが適用されます。エントリは、具体的なものから順に並べます。

デフォルトの動作

コンテンツセレクターがない場合、AI Search はデフォルトの処理パイプラインを適用し、<header>、<footer>、<head> などの要素を除いてから、残りのコンテンツを Markdown に変換します。HTML の処理方法の詳細は、How HTML is processed を参照してください。

ダッシュボードで設定する

Cloudflare ダッシュボードで AI Search ↗ ページを開きます。
AI Search を開く ↗
AI Search インスタンスを選択するか、Create を選択して Website データソースで新しいインスタンスを作成します。
データソース設定の Content selectors セクションを探します。
Add selector を選択します。
Path フィールドに、ページ URL に一致する glob パターンを入力します。たとえば **/blog/** です。
Selector フィールドに、一致するページからコンテンツを抽出する CSS セレクターを入力します。たとえば article .post-body です。
エントリを追加するには、もう一度 Add selector を選択します。エントリは上から下の順に評価されます。

API で設定する

コンテンツセレクターは、AI Search インスタンスの作成または更新時に source_params.web_crawler.parse_options.content_selector フィールドで設定します。このフィールドは、それぞれ path と selector プロパティを持つオブジェクトの配列を受け取ります。

curl -X POST "https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/ai-search/namespaces/default/instances" \
  -H "Authorization: Bearer <API_TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{
    "id": "my-ai-search",
    "source": "https://example.com",
    "type": "web-crawler",
    "source_params": {
      "web_crawler": {
        "parse_options": {
          "content_selector": [
            {
              "path": "**/blog/**",
              "selector": "article .post-body"
            },
            {
              "path": "**/docs/**",
              "selector": "main .content"
            }
          ]
        }
      }
    }
  }'

フィールド	型	説明
`path`	string	ページの完全な URL に対する glob パターンです。パスのフィルタリングと同じ glob 構文を使います。`` はセグメント内で一致し、`*` はディレクトリをまたぎます。最大 200 文字です。
`selector`	string	パスパターンに一致するページからコンテンツを抽出する CSS セレクターです。要素、クラス、ID、属性セレクターを含む標準の CSS セレクターに対応しています。最大 200 文字です。

例

ブログページから本文を抽出する

ブログページでは記事本文だけをインデックスし、ナビゲーション、サイドバー、フッターを無視するには次を使います。

Path	Selector
`/blog/`	`article .post-body`

ドキュメントのコンテンツを対象にする

ドキュメントサイトのメインコンテンツ領域をインデックスするには次を使います。

Path	Selector
`/docs/`	`main .content`

セクションごとに異なるセレクターを使う

複数のエントリを定義し、サイトの異なる部分に異なるセレクターを適用できます。最初に一致したパスが優先されるので、より具体的なパターンを先に置きます。

Path	Selector
`/blog/releases/`	`.release-notes`
`/blog/`	`article .post-body`
`/docs/`	`main .content`

この例では、https://example.com/blog/releases/v2 のページは最初のパターンに一致し、.release-notes セレクターを使います。https://example.com/blog/my-post のページは最初のパターンをスキップし、2 番目に一致します。

他の機能との関係

パスのフィルタリング: パスのフィルタリングはコンテンツセレクターより優先されます。パスフィルターで除外されたページはクロールされないため、コンテンツセレクターは適用されません。
レンダリングモード: コンテンツセレクターは、AI Search が受け取った HTML に適用されます。JavaScript でコンテンツを描画するサイトでは、Rendered sites モードを使い、完全に描画された DOM をセレクターの対象にします。
自動再インデックス: コンテンツセレクターを更新すると、すぐに新しい同期ジョブが起動し、変更がインデックス済みのすべてのページに適用されます。

上限

コンテンツセレクターに適用される上限は、Website を参照してください。