7

angularJS でサイトを開発する場合、サイトの作業を開始する前に Web クローラーについて心配する必要がありますか?それとも、サイトが完成するまで後回しにすることができますか?

たとえば、HTML スナップショットが優れたソリューションであると読みました。これを行うことを選択した場合、サイトのコーディング後に実装できますか、またはこの種の機能に基づいてサイトを作成する必要があります.

4

2 に答える 2

2

プロジェクトの開始時に戦略を考え、プロジェクトの終わり近くにそれを実行するのは良いことだと思います。

私が働いている会社で問題が発生しました。

いずれの場合も、次のようなエンドポイントへの GET リクエストに応答する必要があります。

...?_escaped_fragment_=/home

たとえば、Google や Bing がいつページをクロールするか

...#/home

詳細については、Googleの公式ドキュメントを参照してください。

問題は、リソースのコンテンツをどのように埋めるかです

...?_escaped_fragment_=:path

異なる戦略があります：

クローラーがリソースを要求するたびに、PhantomJS で動的スナップショットを生成します

これは、実行時に PhantomJS プロセスを生成し、生成された HTML ページのコンテンツを出力にリダイレクトして、クローラーに送り返すことで構成されます。

ウェブサイトに動的なクロール可能なコンテンツがたくさんある場合、これは最も横断的で透過的なソリューションだと思います。

ビルド時または Web サイトの CMS の保存ボタンを押したときに、PhantomJS で静的スナップショットを生成します。

これは、クロール可能なコンテンツの内容がまったく変更されない場合、または時々変更される場合に適しています。

開発時または Web サイトの CMS の保存ボタンを押したときに、静的な「同等の」コンテンツ ファイルを生成します。

これは PhantomJS を使用しないため、非常に安価なソリューションです。これは、コンテンツが単純で、簡単に記述またはデータベースから生成できる場合に適しています。

コードを複製する必要があるため、コンテンツを取得するのが複雑な場合は処理が困難です (1 つのクライアント側で Angular ビューをレンダリングし、1 つのサーバー側でページ全体の「同等の」コンテンツをクローラーに生成します)。

PhantomJS ソリューションについて言及しましたが、ヘッドレス (ディスプレイを購入する余裕がある場合はそうでない) ブラウザーでも機能します。たとえば、NodeJS サーバーで JS を実行するだけで、ブラウザーを使用せずにサーバー側でビューをレンダリングできることも想像できます。

また、HTML5 スタイルの URL、ハッシュ、またはハッシュバング URL を使用するかどうかも最初に検討してください。コンテンツが検索エンジンによって索引付けされると、これを変更するのは困難な場合があります。«醜い»と見なされても、ハッシュバンスタイルをお勧めします.*

于 2013-09-12T18:32:47.687 に答える
1

Application on Angular を Google がクロールできるようにするための私のソリューション。aisel.coで使用

  1. https://github.com/localnerve/html-snapshotsが扱うスナップショット

  2. .htaccess にルールを追加する

    RewriteCond %{QUERY_STRING} ^_escaped_fragment_=(.*)$
RewriteCond %{REQUEST_URI} !^/snapshots/views/ [NC]
RewriteRule ^(.*)/?$ /snapshots/views/%1 [L]

  3. スナップショット用の node.js スクリプトを作成し、ターミナルで実行します: node snapshots.js

    var htmlSnapshots = require('html-snapshots');
    var result = htmlSnapshots.run({
    input: "array",
    source: [
            "http://aisel.dev/#!/",
            "http://aisel.dev/#!/contact/",
            "http://aisel.dev/#!/page/about-aisel"
    ],
    outputDir: "web/snapshots",
    outputDirClean: true,
    selector: ".navbar-header",
    timeout: 10000
}, function(err, snapshotsCompleted) {
    var fs = require('fs');
    fs.rename('web/snapshots/#!', 'web/snapshots/views', function(err) {
        if ( err ) console.log('ERROR: ' + err);
    });
});

  4. すべてがcurlで機能することを確認し、ターミナルに入力します

    curl http://aisel.dev/ \?_escaped_fragment_\=/page/about-aisel/ これにより、スナップショットの内容が表示されるはずです .../www/aisel.dev/public/web/snapshots/views/page/about-aisel /index.html

ゴーグルやその他のクローラーへの指示はご遠慮ください。アプリの頭にメタルールを含める必要があります。

    <meta name="fragment" content="!">

Google の完全な条件はこちら: https://developers.google.com/webmasters/ajax-crawling/docs/specification

于 2014-04-29T10:45:56.647 に答える