7

私は私が私のメタタグ(og:titleog:descriptionog:image)がFacebookとの豊富なリンクを投稿する(スラックのような)他のスクレイパーのために動的に読み込まれたいhttp-serverAngularJSにFacebook OpenGraphスクレーパー用の異なるコントローラーを使用させることができますか?

を使って提供していますAngularJSアプリケーションを持っていますソーシャルメディアサイト。しかし、角が適切な値を動的に挿入する前に、それらのスクレーパーが元のHTMLページを掻き取るので、厄介です。スクレイパーはプレースホルダーの値を参照します。

この問題の解決策の1つはhereです。基本的には:スクレーパー - ボットの静的HTMLに、希望のogフィールドを入力してください。私はそれをしたいと思います。しかし、その作者とは違って、私はApacheを使用していません。 http-serverでは私は承知している何の.htaccessファイルof.m

私はこのような自分のアプリケーションに提供するURL処理するためにUI-Router$state-providerを使っありません:

$stateProvider.state('splash', 
     { 
      url: '/', 
      templateUrl: 'html/splash.html', 
      controller: 'SplashCtrl', 
      data: { 
       meta: { 
       'title': 'My Title', 
       'description': 'My Description' 
       } 
      } 
     } 
); 

は、私が作成することができますいくつかの方法がありますスクレイパーボットがウェブブラウザーを使用して通常の人間のユーザーとは異なるコントローラーに送られるような状態?どうやって?

答えて

2

Webアプリケーションのいずれかで同じ問題が発生しました。私たちは以下の変更を加えることでそれを解決しました。フロントエンドとバックエンドの両方を変更する必要があります。

この場合の最初の問題は、角度と経路を決定するための区切り文字として/#/です。 #文字を持つリンクを共有すると、それ以降の文字は無視され、サーバーに送信されません。ソーシャルサイトのメタデータを動的に生成するには、#以降の部分が必要です。したがって、/#/はすべて削除されます。

angular.module('myApp', []) 
    .config(function($locationProvider) { 
     $locationProvider.html5Mode(true); // 
    }); 

参考:この設定https://docs.angularjs.org/api/ng/provider/ $ locationProvider

URLは今だけAngularJSは今、そのルートを解釈する方法を理解を確認するためにhttp://app_host/my_url

http://app_host/#/my_urlから変更されていることを確認し、あなたがする必要がありますアプリケーションの基本パスを設定する

<html> 
    <head> 
     <base href="/"> 
    </head> 
</html> 

この設定では、あなたのシャラあなたのバックエンドサーバに着陸します。ここでは常に同じindex.htmlファイルが返されますが、受け取った余分なパスパラメータに基づいて動的なメタタグが表示されます。ここで

+0

我々はそれを使用しているところです。 ホームページ:http://arivu.org.in/ 特定のページ:http://arivu.org.in/view/5745060998021120/video/5098651508539392 をあなたが使用している場合Facebookのデバッガでは、たとえ同じアプリだとしても、これらのリンクのさまざまなメタデータを見ることができるはずです。 –

+0

これは私の質問に対する解決策ではありません。あなたはURLの '#/'を取り除く方法を説明しました。しかし、訪問者がボットであるかどうかに関わらず、リクエストを別のコントローラに送ることはどこにもありません。あなたがここでやっていることはすべて純粋にAngularJSです。フロントエンドコードです。ここではバックエンドサーバーに指示するものはありません。私は何が欠けていますか? –

+0

これは、フロントエンドで行う必要があることです。バックエンドリクエストを処理するために使用している技術を知らなくても私はコメントできません。これらの変更により、異なるページへのリクエストがバックエンドに流入します。メタタグの内容を決定し、常にindex.html(または同等のもの)を返す必要があります。フロントエンドの変更だけでダイナミックメタタグを達成することはできないことを理解する必要があります。ボットはあなたのページを実行せず、提供されているものだけを読み込むので、バックエンドは 'path'に基づいて適切なタグを置く必要があります。 –

関連する問題