検索エンジンによるajaxサイトのインデックス作成に関する別の記事

現在、AJAXでサイトを作成するのはスタイリッシュでファッショナブルな若者です。ユーザーの観点からすれば、迅速かつ便利であり、そのようなサイトの検索ロボットには問題があります。



最も正しい解決策は、通常のリンクを使用することですが、コンテンツにajaxをロードし、無効なJS（あなたは決して知らない）とロボットを持つユーザーのために通常のリンク経由でコンテンツを取得する機能を残します。 つまり、通常のリンク、レイアウト、ビューshksを使用して昔ながらの方法で開発する必要があります。次に、javascriptを使用してすべてのリンクを処理し、href属性からのリンクを使用してajaxを介してコンテンツの読み込みをハングアップし、タグaを非常に単純化した形式で次のようになります。

$(document).on('click', 'a.ajaxlinks', 'function(e) { e.stopPropagation(); e.preventDefault(); var pageurl = $(this).attr('href'); $.ajax({ url: pageurl, data: { ajax: 1 }, success: function( resp ) { $('#content').html(resp); } }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、同じページをロードしますが、ajaxを使用し、バックエンドで特別なajax GETパラメーターを処理し、可能であれば、失礼な場合はレイアウトなしでページを指定する必要があります。



しかし、アーキテクチャはこのために常に設計されているわけではなく、さらに、angularjsなどのサイトは少し複雑に動作し、ロードされたhtmlテンプレートのコンテンツを変数で置き換えます。 そのようなサイト（または、すでにアプリケーションと呼ぶことができます）については、検索エンジンがHashBangテクノロジー、つまり、検索ロボットが＃！を見つけたときにexample.com/#!/cats/grumpy-catのようなリンクを作成しました。 example.com/?_escaped_fragment_=/cats/grumpy-catのサーバーにリクエストを送信します 。 「＃！」を「？_escaped_fragment_」に置き換え、サーバーは生成されたhtmlを、ユーザーが元のリンクに表示するものと同じ検索エンジンに渡す必要があります。 ただし、アプリケーションがHTML5 History APIを使用し、＃！のようなリンクが適用されていない場合、特別なメタタグをheadセクションに追加する必要があります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このタグを見ると、検索ロボットはサイトがajaxで実行されていることを理解し、サイトコンテンツに対するすべてのリクエストをリンクにリダイレクトします： example.com/cats/grumpy-の代わりにexample.com/?_escaped_fragment_=/cats/grumpy-cat猫 。



使用されるフレームワークを使用してこれらのリクエストを処理できますが、angularjsを使用する複雑なアプリケーションでは、これは冗長なコードの束です。



これから進むパスは、Googleの次の図で説明されています。





これを行うには、_escaped_fragment_からのすべての要求をキャッチし、サーバー上のphantom.jsに送信します。サーバー上のphantom.jsは、サーバーwebkitを使用して、要求されたページのhtmlスナップショットを生成し、クローラーに渡します。 ユーザーはそのまま作業を続けます。



まず、必要なソフトウェアをインストールします（まだインストールされていない場合）。

 yum install screen npm instamm phantomjs ln -s /usr/local/node_modules/phantomjs/lib/phantom/bin/phantomjs /usr/local/bin/phantomjs
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、HTMLキャストを行うサーバー側のjs-script（server.js）を作成します（まあ、または既製のものを使用します）。

 var system = require('system'); if (system.args.length < 3) { console.log("Missing arguments."); phantom.exit(); } var server = require('webserver').create(); var port = parseInt(system.args[1]); var urlPrefix = system.args[2]; var parse_qs = function(s) { var queryString = {}; var a = document.createElement("a"); a.href = s; a.search.replace( new RegExp("([^?=&]+)(=([^&]*))?", "g"), function($0, $1, $2, $3) { queryString[$1] = $3; } ); return queryString; }; var renderHtml = function(url, cb) { var page = require('webpage').create(); page.settings.loadImages = false; page.settings.localToRemoteUrlAccessEnabled = true; page.onCallback = function() { cb(page.content); page.close(); }; // page.onConsoleMessage = function(msg, lineNum, sourceId) { // console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")'); // }; page.onInitialized = function() { page.evaluate(function() { setTimeout(function() { window.callPhantom(); }, 10000); }); }; page.open(url); }; server.listen(port, function (request, response) { var route = parse_qs(request.url)._escaped_fragment_; // var url = urlPrefix // + '/' + request.url.slice(1, request.url.indexOf('?')) // + (route ? decodeURIComponent(route) : ''); var url = urlPrefix + '/' + request.url; renderHtml(url, function(html) { response.statusCode = 200; response.write(html); response.close(); }); }); console.log('Listening on ' + port + '...'); console.log('Press Ctrl+C to stop.');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、 phantomjsを使用して画面で実行します ：

 screen -d -m phantomjs --disk-cache=no server.js 8888 http://example.com
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、nginx（同じ方法でApache）を構成して、実行中のデーモンの要求をプロキシします。

 server { ... if ($args ~ "_escaped_fragment_=(.+)") { set $real_url $1; rewrite ^ /crawler$real_url; } location ^~ /crawler { proxy_pass http://127.0.0.1:8888/$real_url; } ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、 example.com / cats / grumpy-catをリクエストすると、検索ロボットはリンクexample.com/?_escaped_fragment_=cats/grumpy-catに移動します 。これは、nginxによってインターセプトされ、phantomjsが送信され、ブラウザエンジンを介してhtmlが生成されますロボットに渡します。



Google、Yandex、Bingの検索ロボットに加えて、これはFacebook経由でリンクを共有するためにも機能します。



参照：

https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

https://help.yandex.ru/webmaster/robot-workings/ajax-indexing.xml



UPD（2.12.16） ：

kot-ezhvaの apache2の設定 ：



html5modeが使用される場合：

 RewriteEngine on RewriteCond %{QUERY_STRING} (.*)_escaped_fragment_= RewriteRule ^(.*) 127.0.0.1:8888/$1 [P] ProxyPassReverse / 127.0.0.1:8888/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バー付きのURLの場合：

 RewriteEngine on RewriteCond %{QUERY_STRING} _escaped_fragment_=(.*) RewriteRule ^(.*) 127.0.0.1:8888/$1 [P] ProxyPassReverse / 127.0.0.1:8888/