ろぼいんブログ
更新：

CloudflareのCrawler HintsでSEOを効率化する

Webサイトに新しいコンテンツを投稿しても、検索エンジンにいち早くインデックスされなければ、その価値を最大限に活かし切ることができません。そこで注目したいのが、Cloudflareの提供する「Crawler Hints」です。

この記事では、Crawler Hintsの仕組みやメリット、具体的な使い方について解説します。

(window.powerTag.Init = window.powerTag.Init || []).push(function () { window.powerAPITag.display("pw_41759"); });

Crawler Hintsとは？

Crawler Hintsについてのヘルプページのスクリーンショット
画像： Crawler Hintsについてのヘルプページ

CloudflareのCrawler Hintsは、Webサイトに対する検索エンジンのクローリングをより効果的にし、同時にサーバーへの負荷を軽減するための機能です。

具体的には、コンテンツが更新された際に検索エンジンにその情報を通知することで、クローラーが必要なタイミングでサイトを訪れ、最新のコンテンツをインデックスできるよう促します。

Crawler Hintsは、IndexNowと呼ばれる仕組みを活用しています。IndexNowはBingやYandexに対応していますが、Googleは対応していないようです。

Web上のコンテンツは常に変化しており、検索エンジンのクローラーは、いつサイトを訪れてコンテンツをチェックすればよいのかを推測しています。

Crawler Hintsを使うと、Cloudflareがクローラーに対し、インデックスに最適なタイミングやコンテンツの変更をプロアクティブに通知できるようになります。

Crawler Hintsは、Free、Pro、Business、Enterpriseプランのすべてで利用可能です。

Crawler Hintsのメリット

Crawler Hintsを利用することで、次のようなメリットが得られます。

IndexNowとは？

Crawler HintsはIndexNowを利用していると説明しましたが、ではIndexNowとは具体的に何でしょうか？

IndexNowの仕組みに興味がない場合は、 Crawler Hintsを有効化する方法 までスキップして構いません。

IndexNowとは、Webサイトのコンテンツの変更を検索エンジンに即時通知するためのシンプルな方法です。コンテンツが追加、更新、削除された際にその情報を検索エンジンにpingすることで、検索エンジンは迅速にその変更を検索結果に反映させられます。

(window.powerTag.Init = window.powerTag.Init || []).push(function () { window.powerAPITag.display("pw_41759"); });

IndexNowにURLを送信する方法

前述のとおり、IndexNowは技術的には単純なpingに過ぎません。特定の形式でHTTPリクエストを発行することで、URLを検索エンジンに送信します。

基本的なフォーマットは次のとおりです。

try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}
https://<searchengine>/indexnow?url=url-changed&key=your-key

より詳細な仕様や複数のURLを送信する方法などは、 公式ドキュメント を参照してください。

このように、IndexNowは検索エンジンに対して、コンテンツの変更を通知するための非常にシンプルな方法です。

しかし、実際に利用するには、検索エンジンに対してこのようなリクエストを送信するための仕組みが必要です。Webサイトの所有権を証明するキーを設定しなければなりませんし、そのキーを使ってリクエストを送信するためのプログラムを書くか手動でリクエストを送信する必要があります。

(window.powerTag.Init = window.powerTag.Init || []).push(function () { window.powerAPITag.display("pw_41759"); });

CloudflareのCrawler Hintsは、設定をオンにするだけでIndexNowを気軽に利用できるようにしたものです。

Crawler Hintsを有効化する方法

  1. Cloudflareのダッシュボードにログインします
  2. 対象のドメインを選択します
  3. メニューの［Caching］から［構成］を選択します
  4. ［Crawler Hints］のスイッチをオンにします

この手順により、Crawler Hintsが有効化され、Cloudflareは検索エンジンに対してコンテンツをクロールするのに最適なタイミングを伝え始めます。

特定のページのインデックスを防ぐ方法

Crawler Hintsは、Webサイト全体に対してグローバルに設定されます。特定のページをインデックスから除外したい場合は次のような方法があります。

これにより、特定のページが検索エンジンにインデックスされるのを防ぐことができます。

注意点

Crawler Hintsを使うと、 検索エンジンにアクセス情報が漏れているように見える現象 が発生します。しかし、通常は問題になることはありません。

また、これはアクセス情報が漏れているというよりは、

  1. アクセスによってCloudflareがそのページを認識する
  2. 前回のアクセス時から内容が更新されている場合は、Crawler Hints機能によって検索エンジンにpingが送信される
  3. 検索エンジンがクロールに来る

という状態です。アクセスしたページに即座にクローラーが訪問することから、アクセス情報が漏れているように見えてしまいますが、実際にはこのようになっています。

noindexが設定されているページは対象から除外されますし、検索エンジンにはどのページが変更されたか通知されるだけなので「誰がアクセスしたか」という情報は送信されません。

そのため、noindexを適切に設定しているサイトでこの挙動が問題になることはないでしょう。

まとめ

SEOは、多角的なアプローチが必要です。Crawler Hintsは、その一環として非常に価値の高いツールです。Webサイトのコンテンツ更新が検索エンジンによって迅速に認識され、適切にインデックスされることは重要です。

Crawler Hints（が使っているIndexNow）がGoogleに対応していないのは残念ですが、インデックスのリクエストについて気にする必要のある検索エンジンが減るだけでも大きなメリットです。

参考

#Web開発#HowTo#解説#Cloudflare

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。

このサイトを支援する

Buy Me a CoffeeまたはGitHub Sponsorsで支援していただけると、サイトの運営やコンテンツ制作の励みになります。定期的な支援と一度限りの支援がありますので、お間違いのないようにお願いします。

Buy me a coffee

著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

関連記事

注目記事

最新記事