Discourseをクロールする際のGooglebotの表示

開発
1

TL:DR、DiscourseのクロールをGooglebotで半人間的に再現することは可能です。始め方は以下の通りです…

Googlebotと一体になる

  1. シークレットウィンドウを開く（常に新規から始める）
  2. DevToolsを開く
  3. DevToolsでNetwork Conditionsを開く
  4. 「ブラウザのデフォルトを使用」のチェックを外す
  5. セレクトメニューでGooglebot Smartphoneを選択する
  6. 次に https://meta.discourse.org にアクセスする（見た目が大きく異なりますが、Googlebotやボットは気にしないので問題ありません）
  7. 表示 > 開発者 > ソースを表示 に移動する
  8. コピーして、ある.htmlファイルに貼り付ける

これで、Googlebotがクロールしキャッシュしたものを確認するためのファイルが作成されました。

Googlebotの仕事は終わりです。次に、キャッシュされたファイルをブラウザでレンダリングする時間です。

Chromeと一体になる

  1. ターミナルを開き、npx http-server を実行する
  2. ファイルに移動する
  3. Chrome DevToolsを開く
  4. Elementsパネルで、<html>... を右クリックし、「OuterHTMLをコピー」を選択する
  5. これがインデックスされるコンテンツであり、キャッシュされるものではなく、インデックスされるものです。

要約すると、GooglebotがHTMLを取得し、Chromeがそれをレンダリングします。レンダリングされたHTMLが重要です。貴重なコンテンツとリンクが表示されていることを確認してください。

「いいね！」 2
2

「Chromeと一体になる」の下にある手順の目的は何ですか？

最初のリストのステップ7の代わりに「OuterHTMLをコピー」の手順を実行できませんか？

3

curlでも取得できると思います。

curl -s https://meta.discourse.org/ > page.html

（これには"crawler"クラスが含まれます。）

次に、ブラウザでpage.htmlファイルを開きます。

または、エディタでコードを検査するには次のようにします。

curl -s https://meta.discourse.org/ | vim -
「いいね！」 2
4

キャッシュされたHTMLはChrome（ヘッドレス）でレンダリングされます。レンダリング時に、JavaScriptを介して補足的なコピーやリンクがDOMに挿入される場合があります。Googleは、レンダリングされた情報をインデックス作成のために考慮します。

これが、GooglebotがJavaScriptを多用するアプリケーションからコンテンツを取得する方法です。Googleにアクセスし、JavaScriptでのみコンテンツをレンダリングするものを検索して、3つの点アイコンをクリックし、キャッシュ済みボタンをクリックし、ソースを表示をクリックし、それをコピーしてChromeでレンダリングすると、DOMに表示されるコンテンツを確認できます。

注意：Chromeでレンダリングする前に、相対パス（CSSおよびJSリソース）を絶対パスに更新してください^^

5

curl を使うと、より簡単になりますね！

Googlebot ユーザーエージェント文字列を含めるようにしてください。例: Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)。サーバーは Googlebot に異なる HTML を送信する場合があります。

6

同じ出力だと思いますが、ユーザーエージェントを追加しても害はありません。Chromeについてはよくわかりませんが、Firefoxではネットワークタブのリクエストを右クリックして「curlとしてコピー」を選択すると、ブラウザのリクエストを模倣する完全なヘッダーセットを取得できます。