31

Ajax で生成されたコンテンツをクロール可能にすることに関する Google のポリシー、およびこの件に関する多くの開発者のブログ投稿と Stackoverflow の Q&A スレッドを読んだ後、JavaScript/Ajax で生成されたものだけでサイトを作成する方法はないという結論に達しました。 HTML クロール可能。私が現在取り組んでいるサイトでは、かなりの量のコンテンツがインデックスに登録されていません。インデックス付けされていないコンテンツのすべてのプレゼンテーション レイヤーは、Ajax ベースの Web サービス呼び出しから返された JSON から HTML を生成することによって JavaScript で構築されています。そのため、Google はコンテンツをインデックス化していないと考えています。あれは正しいですか？

唯一の解決策は、検索エンジン (特に Google) 用のサイトの「フォールバック」バージョンを用意することです。ここでは、すべての HTML とコンテンツが従来どおりサーバー側で生成されます。JavaScript が有効になっているクライアントの場合、JavaScript を使用して、非同期にロードされた JSON から HTML を生成するという、基本的に現在と同じアプローチを使用できるようです。

読んでみると、上記のクロール可能な Ajax 生成 Web サイトを作成する際にDRY 原則を適用するための現在のベスト プラクティスは、クライアント側とサーバー側で同じテンプレートを使用できるテンプレート エンジンを使用することであると理解しています。JavaScript が有効になっているクライアントの場合、クライアント側のテンプレート エンジン ( mustache.jsなど) は、サーバーから送信された JSON データを、テンプレート ファイルのコピーで定義された HTML に変換します。また、JavaScript が無効になっている検索クローラーとクライアントの場合、同じテンプレート エンジン ( mustache.javaなど) のサーバー側実装は、まったく同じテンプレート ファイルのコピーに対して同様に動作し、HTML を出力します。

その解決策が正しければ、これは 4、5 年前にフロントエンドの重いサイトで使用されたアプローチとどう違うのでしょうか。サイトは基本的に、テンプレート コードの 2 つのコピーを維持する必要があり、JavaScript が有効になっているユーザー (ほぼ全員) のために 1 つのコピーを維持する必要がありました。 JavaScript が有効になっていない (ほとんど誰もいない) 検索エンジンとブラウザー用の別のコピー ( FreeMarkerやVelocityなど) はありますか? もっと良い方法があるはずです。

これは、クライアント側とサーバー側の 2 つのテンプレート モデル レイヤーを維持する必要があることを意味しますか? これらのクライアント側のテンプレートを、 Backbone.js、Ember.js、またはYUI App Libraryなどのフロントエンド MVC (MV/MVVC) フレームワークと組み合わせるのは、どの程度お勧めですか? これらのソリューションは保守コストにどのように影響しますか? フレームワーク (新しいテンプレート エンジンとフロントエンド MVC フレームワーク) を開発チームのテクノロジ スタックに追加せずに、これを試してみた方がよいでしょうか? これを冗長性を少なくする方法はありますか?

その解決策が正しくない場合、何か不足していて、JavaScript で既存の非同期 HTML-from-JSON 構造を維持し、それをインデックス化するために改善できるものがあるので、何か新しいものを導入する必要はありません。アーキテクチャスタックに? ビジネス ニーズが変化したときに、プレゼンテーション レイヤーの 2 つのバージョンを更新する必要はありません。

4

5 に答える 5

10

なんで今まで思いつかなかったんだ！http://phantomjs.orgを使用してください。これは、ヘッドレス Webkit ブラウザーです。UI をクロールし、必要なすべての状態で html をキャプチャする一連のアクションを作成するだけです。Phantom は、キャプチャした html を .html ファイルに変換し、Web サーバーに保存できます。

すべてのビルド/コミットが自動化されます (PhantomJS はコマンド ライン駆動です)。UI をクロールするために作成した JS コードは、UI を変更すると壊れますが、自動化された UI テストよりも悪くはありません。また、これは単なる Javascript であるため、jQuery セレクターを使用してボタンを取得してクリックすることができます。

SEO の問題を解決しなければならないとしたら、これは間違いなく私がプロトタイプを作成する最初のアプローチです。クロールして保存、ベイビー。かしこまりました。

于 2012-04-23T03:00:28.987 に答える
3

いくつかのテクノロジーと、再利用できる手動でコード化された 1 つのハックを組み合わせれば、問題は解決すると思います。これが私のクレイジーで中途半端なアイデアです。これは理論的なものであり、おそらく完全ではありません。ステップ1：

  • あなたが提案するように、クライアント側のテンプレートを使用してください。すべてのテンプレートを個別のファイルに入れます (クライアントとサーバー間で簡単に再利用できるようにするため)。
  • underscore.js テンプレートを使用するか、Mustache を再構成します。このようにして、Java の <%= %> と同じように、ERB スタイルの区切り文字をテンプレートに取得できます。
  • これらは個別のファイルであるため、curl.js や require.js などのモジュール ローダーを使用して CommonJS モジュールで開発を開始し、クライアント側のコードにテンプレートを読み込むことをお勧めします。モジュラー開発を行っていない場合、それは非常に素晴らしいことです。〜1か月前に始めました。最初は難しいように見えますが、コードをラップする別の方法です: http://addyosmani.com/writing-modular-js/

これで、テンプレートが分離されました。あとは、サーバー上でそれらからフラットなページを構築する方法を理解する必要があります。私は2つのアプローチしか見ていません。ステップ2：

  • サーバーがそれを読み取って ajax 呼び出しのデフォルト パスとそれらがリンクするテンプレートを確認できるように JS に注釈を付けると、サーバーは注釈を使用してコントローラー メソッドを正しい順序で呼び出し、フラット ページに入力できます。
  • または、テンプレートに注釈を付けて、呼び出す必要があるコントローラーを示し、呼び出しパラメーターの例を提供することもできます。これは保守が容易で、コントローラーの URL を常に検索しなければならない私のようなフロントエンド開発者にとって有益です。また、バックエンド コードに何を呼び出すかを指示します。

お役に立てれば。これに対する最良の答えを聞くことに興味があります。興味深い問題です。

于 2012-04-23T02:56:18.937 に答える
1

Distalテンプレートを使用します。あなたのウェブサイトはクロール可能な静的 HTML であり、Distal は静的 HTML をテンプレートとして扱います。

于 2012-04-24T02:10:50.800 に答える
0

Java、Node.js、または JS コード生成 Web サイトの冗長コピーを作成するその他の方法を必要としないソリューションを見つけました。また、すべてのブラウザをサポートしています。

したがって、Google にスナップショットを提供する必要があります。他の URL などをいじる必要がないため、これが最適なソリューションです。また、基本的な Web サイトに noscript を追加しないので、軽量になります。

スナップショットを作成するには？Phantomjs、HTMLUnit などには、配置して呼び出すことができるサーバーが必要です。それを構成し、u Web サイトと組み合わせる必要があります。そして、これは混乱です。残念ながら、PHP ヘッドレス ブラウザはありません。PHPの仕様から明らかです。

では、スナップショットを取得する別の方法は何ですか? ええと... ユーザーが Web サイトを開くと、JS (innerHTML) で表示されるもののスナップショットを取得できます。

だからあなたがする必要があるのは：

  • サイトのスナップショットが必要かどうかを確認します (スナップショットがある場合は、別のスナップショットを作成する必要はありません)。
  • ファイルに保存するために、このスナップショットをサーバーに送信します (PHP はスナップショットで POST 要求を処理し、ファイルに保存します)。

また、Google Bot がハッシュバン Web サイトにアクセスすると、要求されたページのスナップショットのファイルが取得されます。

解決すべきこと:

  • 安全性: ユーザーまたはユーザーのブラウザーからのスクリプト (インジェクション) をスナップショットに保存する必要はありません。おそらく、スナップショットを生成できることだけが最善の方法です (以下のサイトマップを参照)。
  • 互換性: どのブラウザからでも保存したくないが、あなたのウェブサイトを最もよくサポートするブラウザから保存したい
  • モバイルを気にしないでください: モバイル ユーザーをスナップショットの生成に使用しないでください。
  • フェイルオーバー: スナップショット出力の標準 Web サイトがない場合 - Google にとっては何のメリットもありませんが、何もないよりはましです

また、ユーザーがすべてのページにアクセスするわけではありませんが、アクセスする前に Google のスナップショットが必要です。

じゃあ何をすればいいの？これにも解決策があります：

  • Web サイトにあるすべてのページを含むサイトマップを生成します (最新の状態にするには、その場で生成する必要があります。JS を実行しないため、クローラー ソフトは役に立ちません)。
  • スナップショットを持たないサイトマップから何らかの方法でページにアクセスしてください。これにより、スナップショット コードが呼び出され、適切に生成されます
  • 定期的に（毎日？）

でもねえ、これらすべてのページにアクセスするにはどうすればよいですか? 良い。これにはいくつかの解決策があります。

  • Java、C#、またはその他の言語でアプリを作成して、サーバーからアクセスするページを取得し、組み込みのブラウザー コントロールでアクセスします。これをサーバーのスケジュールに追加します。
  • iFRAME 内の必要なページを次々と開く JS スクリプトを作成します。これをコンピューターのスケジュールに追加します。
  • サイトがほとんど静的な場合は、上記のスクリプトを手動で開くだけです

また、古いスナップを時々更新して最新の状態にすることを忘れないでください。

このソリューションについてどうお考えですか。

于 2013-11-07T15:05:35.580 に答える