Puppeteer on The Edge: Cloudflare の新しいレンダリング API (ベータ版) を使用した SEO ユースケース

公開: 2022-11-23

検索エンジン最適化エンジニアリングでは、自動化されたテストは、安定したオーガニック検索のプレゼンスにとって重要です。 Puppeteerのようなフレームワークの有用性にもかかわらず、ライブラリを適切に実行する前に構成する必要がある驚くべき量のフープがあります。

Cloudflare は最近、Workers Browser Rendering API の一部としてCloudflare Worker 内で Puppeteerを実行する機能を発表しました。これは現在クローズド ベータ版ですが、新しいクライアントは待機リストを介して受け付けています

これにより、エキサイティングなさまざまな可能性への扉が開かれます。私を含む多くの開発者は、アプリケーションの一部としてフル Web ブラウザーの肥大化を処理するために、Google Cloud Functions、AWS Lambda、または専用の仮想マシンを既に使用しています。

現在、Cloudflare Worker からクラウド関数 (Google Cloud、AWS、DO、Heroku など) へのフェッチ呼び出しを行うことができます。これは、応答するのに 30 秒かかるためです。これは、通常は十分な時間であり、スケジュールされた Cloudflare では最大 15 分です。ワーカー。

コミュニティ Cloudflare の興奮と革新

一歩下がって、この機能を望んでいたのは私だけではなかったようです:

TailwindCSS の Adam Wathan はボット/クローラーが検出されたときに SPA の事前レンダリングを提供することで、Cloudflare が構築できるキラー機能としてこれを呼び出しました。 Cloudflare は、 IndexNowSigned exchange (SXG)の統合など、このようなさまざまな統合をすでに提供しています

発表後、これが Puppeteer の上に構築されたツールにどのように大きな影響を与える可能性があるかについて、さらに議論がありました。

Repeat.devは、タスクをスケジュールして PDF を生成するための Webhook を提供します。これは、Cloudflare が呼びかける正確なユースケースであり、すぐにソリューションを統合したいと考えています。

このツイートのタイミングは完璧で、数日後に発表されました。

Cloudflare Puppeteer 統合の例

早期アクセスをリクエストしましたが、Cloudflare が提供するものと、それがどれほど簡単に統合できるかについて、私たちが知っていることを以下に示します。

Puppeteer は、Cloudflare 専用にビルドされたパッケージとして簡単にインポートできます。

「@cloudflare/puppeteer」から操り人形師をインポート

操り人形師のスクリプトと同じように、ブラウザ インスタンスを作成してページを起動できます。 Cloudflare 固有のメソッドや、通常の Puppeteer パッケージにないメソッドがあるかどうかを確認するのは興味深いことです。

const browser = await puppeteer.launch({
browserBinding: env.MY_BROWSER
}))
const page = await browser.newPage()

await page.goto(“https://example.com/”)
const img = await page.screenshot() をバッファとして
await browser.close()'

Cloudflare が提供するこのコード例は、AWS S3 や Google Cloud Storage と同様に、Cloudflare オブジェクト ストレージ ソリューションである R2 ストレージにスクリーンショットをアップロードする方法を示しています。

試す {
await env.MY_BUCKET.put(“screenshot.jpg”, img);
return new Response(`Success!`);
}キャッチ(e){
return new Response(”, { status: 400 })
}

Puppeteer には Cloudflare に対してどのような制限がありますか?

Cloudflare は CDN であり、ワーカーはエッジで動作するため、これがスクレイピングの世界にどのような制限やバックドアを開くかを知りたいです。

Cloudflare ワーカーは、別のサーバーからリクエストを行っている場合、通常はブロックされるサイトへのアクセスを既に許可しています。 Cloudflare ワーカーは Edge にあるため、ブロックされる可能性は低くなります。

私が最近遭遇した 1 つの制限は、 subrequests に関するものでした。 オンザフライでデータをレンダリングする 50 個の個別のリクエストをクライアントに作成させるのではなく、クライアントに Cloudflare ワーカーに 1 つのリクエストを作成させました。これにより、50 個のリクエストがラップされ、最終結果が返されます。

これにより、クライアントに送り返す前に一意の値をフィルター処理したり、配列を並べ替えたりするなどの重労働が可能になります。 そのため、そのビジネス ロジックはすべてフロント エンドでは必要ありませんが、ペイロードを取得してビューをレンダリングできます。

Puppeteer on the Edge の可能なプロジェクトは何ですか?

明らかな使用例は、ページをクロールし、コンテンツを解析して SEO の洞察を得ることです。

  • ページタイトル
  • メタタグ
  • 見出し (H1-H6)
  • テキストの抽出
  • リンクの抽出

Puppeteer の上に構築されたビジネスはすでにたくさんあります。

  • API & E2E モニタリング
  • PDF/Gif/スクリーンショットのレンダリング
  • 製品モニタリング

特にSEOコミュニティにとって、私が興奮している機会のリストは次のとおりです。

  • Edge Crawling – R2 ストレージにエクスポートする Cloudflare 上に構築された Screaming Frog クローラー。 サーバーもローカル マシンもありません。Edge だけです。
  • クロール + AI – SERP を取得し、コンテンツを解析し、コンテンツを使用して新しいコンテンツを生成し、サイトにアップロードします。
  • SEO アラート– クライアントのサイトをクロールして、変更を監視し、問題を報告します。
  • SEO + NLP – サイトをクロールし、テキストを抽出し、NLP を処理して、より良い洞察と機会を得ることができます。

壊れたリンクやリダイレクトの問題を見つけるためのステータス コードの監視と同じくらい単純なものを構成することもできます。

Puppeteer on the Edge で何を構築しますか、または構築したいですか? Twitterで@johnmurchまでご意見をお寄せください。

iPullRank が SEO 監視の自動化を使用して組織をセットアップする方法を知りたいですか? 高度な SEO チームを支援する方法を確認し、立ち上げたいプロジェクトについてお問い合わせください。