単一ページの angularjs Web アプリがあります。検索エンジンがクロールできるようにしようとしています。これを実現するために、ajax ページをレンダリングするための phantomjs ブラウザーを備えた nodejs Web サーバーである prerender.io を使用しています。
次の要点に基づいてnginx構成を作成しています: https://gist.github.com/Stanback/6998085
これはほとんどの場合機能します。アプリをカールして正しい応答を得ることができます:curl -o test.html domain.com/?_escaped_fragment=/path
リクエストは prerender.io プロキシにリダイレクトされ、プロキシは次の URL で単一のリクエストを作成します。domain.com/#!/path
他のすべてのリクエスト (js、img、css、および xhr) は、通常どおり nginx を通過します。Phantomjs は、次の JS 変数が true に設定されるのを待った後、問題なくプロキシ リクエストをレンダリングします。window.prerenderReady = false;
これは素晴らしいことです... Google は私のウェブサイトをクロールできます! フェイスブックに入る。
Facebookのいいねボタン（iFrame）が使えるようにOGのメタタグをいくつか設定しています。各ページには、次のメタタグが設定されています。
<link rel="canonical" href="http://domain.com/#!/asset">
<meta property="og:url" content="http://domain.com/#!/asset">
<meta property="og:type" content="website">
<meta property="og:image" content="http://domain.com/image.jpg">
<meta property="fb:app_id" content="xxx">
<meta property="og:description" content="foo">
<meta property="og:title" content="bar">
<meta property="og:site_name" content="domain.com">
これらのメタタグは各アセットの angularjs によって正しく更新され、phantomyjs プロキシはそれらが更新されるのを正しく待ってから応答を返します。
http://domain.com/#!/assetただし、Facebook URL リンターでURL をテストすると、いくつかの問題が発生します。
- Facebook は正規の URL と og:url が異なると主張していますが、「スクレイパーがあなたの URL について見ているものを正確に見る」をクリックすると、それらは同一です
- 「スクレイパーがあなたの URL に対して何を見ているかを正確に見る」をクリックすると、canonical と og:url が次のように置き換えられました。
domain.com/?fb_locale=en_GB#!/asset - プロキシは 3 つの要求を受け取ります。アセットの最初のものは、正規および og:url に従っているようです
- ユーザーがこのページのように iFrame をクリックすると、私の Web サイトに戻るリンクは次のようになります
domain.com/?_escaped_fragment_=/asset
4 番目は、契約を破る問題です。ユーザーが私の投稿のページを気に入ると、Facebook アクティビティ ストリームに入ります。そのユーザーが自分のストリームで私のサイトに戻るリンクをクリックすると、プロキシを介してリダイレクトされ、phantomjs を介してページがレンダリングされます!
Facebook を介してハッシュバンとリンクを共有するべきではないと思います。リンクを共有し、 canonical / og:url を のようなものに設定する必要があると思いますdomain.com/static/asset。useragent = Facebookまたはparamsに_escaped_fragment_が含まれている場合は、nginx 構成を更新して/staticURL を取得する必要があります。プロキシに直接送信しない場合は、ユーザーを#!/asset にリダイレクトします。
変更されたnginx構成をこれで動作させるために考えることができるすべてに疲れましたが、それは私を打ち負かしました。これらの URL をインターセプト/staticしてプロキシ ランダム イメージに書き換えると、css および js アセットがプロキシを介して要求され、phantomjs がクラッシュします。
このnginx構成を変更して、Webクローラーリクエストをプロキシに転送し、Facebookがサイトから正しいogタグをスクレイピングできるようにし、ユーザーがFacebookでコンテンツを共有するときに正しいリンクバックURLを指定できるようにするのを手伝ってくれませんか?