web-dev-qa-db-ja.com

SPAモードのAngularJSとメタタグ？

SPAモードでAngularJSを使用してメタタグを処理する方法について、エレガントな方法をすでに理解している人はいますか？

基本テンプレートには、いくつかのデフォルトのメタタグがあります。ルートごとに、各コントローラーは異なるコンテンツで異なるビューをロードしています。非常に正常です。しかし、これらの各ページのメタタグを変更するにはどうすればよいですか？

さらに、一部のページにはメタタグを多く含める必要があり、その他のページには少なくする必要があります。たとえば、コンテンツを含むページには、ソーシャルメディア共有用の追加のメタタグが必要です。他の機密性の高いページには、ロボットがページにインデックスを付けることを禁止するために、フォローしないメタタグが必要です。

経験者がこれにどのように対処しているか興味がありますか？

angularjssocialmeta
12
Michael Heuberger

私が使用したパターンは、ngBoilerplateプロジェクトからのものです。このパターンには、メタタグを含む「グローバル」スコープを処理する全体的なアプリコントローラーがあります。

個々のページのコントローラーは、デフォルトルーターを使用している場合は、$locationChangeSuccessに移動したときにイベントを発行する可能性があります。

アプリコントローラーはこのイベントをリッスンし、ngBoilerplateの場合はそれを使用してページタイトルを更新します： https://github.com/ngbp/ngbp/blob/v0.3.2-release/src/app/ app.js＃L17-L21

ただし、好きなメタタグ情報を使用してオブジェクトを発行し、そのイベントのリスナーを作成することを妨げるものは何もありません。

// on your individual app pages goes something like this
function SomePageController($scope) {
   // the event gets fired when the page is loaded and the controller is called.
   $scope.$emit('newPageLoaded', { 'title': 'Some Page', 'description': 'blah' });
}

// your overall app controller
function AppController($scope) {
    $scope.metadata = {
        'title': 'default title',
        'description': 'default description',
    };

    // whenever a controller emits the newPageLoaded event, we update the app's metadata
    $scope.$on('newPageLoaded', function(event, metadata) {
        $scope.metadata = metadata
    });
}

次に、ヘッダーで次のようなことを行うことができます。

<html ng-app="myApp" ng-controller="AppController">
<head>
    <meta title="{{ metadata.title }}" ng-if="metadata.title" />
    <meta description="{{ metadata.description}}" ng-if="metadata.description" />
    <meta whatever="{{ metadata.whatever}}" ng-if="metadata.whatever" />
</head>

私はこのコードをテストしていないので、エラーがあるかもしれませんが、一般的な原則は健全だと思います。

注：ソーシャルメディアの共有

あなたの質問では、ソーシャルメディア共有のためにタグを組み込むユースケースについて言及しています。オープングラフやツイッターなどの意味だと思います。

この場合、現在これらのサイト（facebook、Twitter、pinterestなど）が使用するクローラーはJavaScriptを実行しないので、JavaScriptを実行することを知っておくことが重要です。 Angularjsで動的に入力するメタタグを読み取ることができません。

私はこの問題についてブログ投稿を書き、解決策を提案しました： http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app /

23
Michael Bromley