AngularJSアプリケーションには、検索エンジンとSEOに関する2つの問題があります。

1）カスタムタグはどうなりますか？検索エンジンはこれらのタグ内のコンテンツ全体を無視しますか？つまり、私が持っていると仮定します

<custom>
  <h1>Hey, this title is important</h1>
</custom>

う<h1>カスタムタグ内であるにもかかわらず、インデックスを作成しますか？

2）文字通り{{}}バインドのインデックス付けを行う検索エンジンを回避する方法はありますか？すなわち

<h2>{{title}}</h2>

私は次のようなことができることを知っています

<h2 ng-bind="title"></h2>

しかし、実際にクローラーにタイトルを「表示」させたい場合はどうなりますか？サーバー側のレンダリングが唯一のソリューションですか？

2014年5月の更新

Googleクローラーがjavascriptを実行するようになりました-Googleウェブマスターツールを使用して、サイトがGoogleによってどのようにレンダリングされるかをよりよく理解できます。

元の回答
検索エンジン向けにアプリを最適化したい場合、残念ながら、事前にレンダリングされたバージョンをクローラーに提供する方法はありません。Googleのajaxおよびjavascript-heavyサイトに対する推奨事項について詳しくは、こちらをご覧ください。

これがオプションである場合は、サーバー側レンダリングでAngularのSEOを行う方法についてこの記事を読むことをお勧めします。

カスタムタグに遭遇したときにクローラーが何をするかわかりません。

PushStateと事前合成を使用する

これを行う現在（2015年）の方法は、JavaScriptのpushStateメソッドを使用することです。

PushStateは、ページをリロードせずに上部のブラウザバーのURLを変更します。タブを含むページがあるとします。タブはコンテンツを非表示および表示し、コンテンツは動的に挿入されます。AJAXを使用するか、単にdisplay：noneおよびdisplay：blockを設定して、正しいタブコンテンツを非表示および表示します。

タブがクリックされたら、pushStateを使用してアドレスバーのURLを更新します。ページがレンダリングされたら、アドレスバーの値を使用して、表示するタブを決定します。Angularルーティングはこれを自動的に行います。

事前構成

PushStateシングルページアプリ（SPA）をヒットするには2つの方法があります。

1. ユーザーがPushStateリンクをクリックし、コンテンツがAJAX処理されるPushStateを介して。
2. URLを直接押す。

サイトの最初のヒットには、URLを直接ヒットすることが含まれます。PushStateがURLを更新すると、後続のヒットはコンテンツでAJAXになります。

クローラーはページからリンクを収集し、後で処理するためにそれらをキューに追加します。つまり、クローラーの場合、サーバーへのすべてのヒットは直接ヒットであり、Pushstateを介してナビゲートすることはありません。

Precompositionはサーバーからの最初の応答に、おそらくJSONオブジェクトとして、初期ペイロードをバンドルします。これにより、検索エンジンはAJAX呼び出しを実行せずにページをレンダリングできます。

GoogleがAJAXリクエストを実行しない可能性があることを示唆する証拠がいくつかあります。詳細はこちら：

https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo

検索エンジンはJavaScriptを読み取って実行できます

Googleはしばらくの間JavaScriptを解析することができました。それが彼らが最初にChromeを開発した理由であり、Googleスパイダーのフル機能のヘッドレスブラウザーとして機能します。リンクに有効なhref属性がある場合、新しいURLにインデックスを付けることができます。これ以上行うことはありません。

さらにリンクをクリックしてpushState呼び出しをトリガーした場合、ユーザーはPushStateを介してサイトに移動できます。

PushState URLの検索エンジンサポート

PushStateは現在、GoogleとBingでサポートされています。

グーグル

以下は、SEO向けのPushStateに関するPaul Irishの質問に回答したMatt Cuttsです。

http://youtu.be/yiAF9VdvRPw

Googleがスパイダーの完全なJavaScriptサポートを発表します。

http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html

その結果、GoogleはPushStateをサポートし、PushStateのURLをインデックスに登録します。

Googleウェブマスターツールのfetch as Googlebotもご覧ください。JavaScript（Angularを含む）が実行されていることがわかります。

ビング

2013年3月付けのPushState URLのサポートに関するBingの発表は次のとおりです。

http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/

HashBangs＃は使用しないでください。

HashbangのURLは、開発者が事前にレンダリングされたバージョンのサイトを特別な場所に提供することを要求する醜い一時的なギャップでした。これらは引き続き機能しますが、使用する必要はありません。

ハッシュバングのURLは次のようになります。

domain.com/#!path/to/resource

これは次のようなメタタグとペアになります。

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

Googleはこの形式でそれらのインデックスを作成しませんが、代わりに_escaped_fragments_ URLからサイトの静的バージョンをプルして、インデックスを作成します。

Pushstate URLは通常のURLのように見えます。

domain.com/path/to/resource

違いは、Angularが、JavaScriptで処理するdocument.locationへの変更をインターセプトすることでそれらを処理することです。

PushState URLを使用したい場合（そしておそらく使用する場合）は、古いハッシュスタイルのURLとメタタグをすべて削除し、構成ブロックでHTML5モードを有効にします。

サイトをテストする

Googleウェブマスターツールには、URLをグーグルとしてフェッチし、グーグルがそれをレンダリングするときにJavaScriptをレンダリングできるツールが含まれるようになりました。

https://www.google.com/webmasters/tools/googlebot-fetch

AngularでのPushState URLの生成

＃接頭辞の付いたURLではなく、Angularで実際のURLを生成するには、$ locationProviderオブジェクトにHTML5モードを設定します。

$locationProvider.html5Mode(true);

サーバ側

実際のURLを使用しているため、すべての有効なURLについて、同じテンプレート（およびいくつかの事前構成されたコンテンツ）がサーバーから出荷されることを確認する必要があります。これを行う方法は、サーバーアーキテクチャによって異なります。

サイトマップ

アプリは、ホバーやスクロールなど、通常とは異なるナビゲーション形式を使用する場合があります。Googleがアプリを操作できるようにするには、アプリが応答するすべてのURLの簡単なリストであるサイトマップを作成することをお勧めします。これをデフォルトの場所（/ sitemapまたは/sitemap.xml）に配置するか、ウェブマスターツールを使用してGoogleに通知できます。

とにかくサイトマップを作成することをお勧めします。

ブラウザのサポート

PushstateはIE10で動作します。古いブラウザでは、Angularは自動的にハッシュスタイルのURLにフォールバックします

デモページ

次のコンテンツは、事前構成されたpushstate URLを使用してレンダリングされます。

http://html5.gingerhost.com/london

確認できるように、このリンクでは、コンテンツがインデックスに登録され、Googleに表示されています。

404および301ヘッダーステータスコードの提供

検索エンジンはすべてのリクエストに対して常にサーバーにアクセスするため、サーバーからヘッダーステータスコードを提供し、Googleにそれらを表示させることができます。

AngularJSとSEOについて決定的にしましょう

Google、Yahoo、Bing、その他の検索エンジンは、従来のクローラーを使用して従来の方法でWebをクロールします。彼らはWebページ上のHTMLをクロールするロボットを実行し、途中で情報を収集します。彼らは興味深い単語を維持し、他のページへのその他のリンクを探します（これらのリンク、それらの量、およびそれらの数はSEOに関係します）。

では、なぜ検索エンジンがJavaScriptサイトを扱わないのでしょうか。

答えは、検索エンジンロボットがヘッドレスブラウザーを介して機能し、ほとんどの場合、ページのJavaScriptをレンダリングするJavaScriptレンダリングエンジンがないことです。ほとんどの静的ページは、コンテンツがすでに利用可能であるため、JavaScriptがページをレンダリングすることを気にしないため、これはほとんどのページで機能します。

それについて何ができますか？

幸い、より大きなサイトのクローラーは、JavaScriptサイトをクロール可能にするメカニズムを実装し始めていますが、サイトへの変更を実装する必要があります。

私たちが変更した場合hashPrefixであることを#!単に代わりの#、そして現代的な検索エンジンが使用する要求変わる_escaped_fragment_の代わりに#!。（HTML5モードでは、つまり、ハッシュプレフィックスのないリンクがあるUser Agent場合、バックエンドのヘッダーを確認することで同じ機能を実装できます）。

つまり、次のような通常のブラウザからのリクエストではありません。

http://www.ng-newsletter.com/#!/signup/page

検索エンジンは次の方法でページを検索します。

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

からの組み込みメソッドを使用して、Angularアプリのハッシュプレフィックスを設定できますngRoute。

angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

また、を使用している場合はhtml5Mode、メタタグを使用してこれを実装する必要があります。

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

リマインダーは、我々が設定することができますhtml5Mode()と$locationサービス：

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

検索エンジンの取り扱い

コンテンツを静的HTMLとして検索エンジンに実際に配信する方法を決定する機会はたくさんあります。自分でバックエンドをホストしたり、サービスを使用してバックエンドをホストしたり、プロキシを使用してコンテンツを配信したりできます。いくつかのオプションを見てみましょう。

セルフホスト

phantomjsやzombiejsなどのヘッドレスブラウザーを使用して、レンダリングされたデータを含むページのスナップショットを取得し、それをHTMLとして保存して、自分のサイトのクロールを処理するサービスを作成できます。?_escaped_fragment_検索リクエストにクエリ文字列が表示されると、事前レンダリングされたページではなく、JSのみを使用して、ページから取得した静的HTMLスナップショットを配信できます。これには、中間に条件付きロジックを使用してページを配信するバックエンドが必要です。これを自分で実行するための開始点として、prerender.ioのバックエンドのようなものを使用できます。もちろん、プロキシ処理とスニペット処理を処理する必要がありますが、それは良い出発点です。

有料サービス付き

コンテンツを検索エンジンに取り込む最も簡単で最速の方法は、サービスBrombone、seo.js、seo4ajax、およびprerender.ioを使用することです。これらは、上記のコンテンツレンダリングをホストする良い例です。これは、サーバー/プロキシの実行に対処したくない場合に適したオプションです。また、通常は非常に高速です。

AngularとSEOの詳細については、http：//www.ng-newsletter.com/posts/serious-angular-seo.html で詳細なチュートリアルを書いており、本ng-bookでさらに詳しく説明しています。 AngularJSの完全な本。ng-book.comで確認してください。

moo年のブログで、SEO対応のAngularJSサイトを構築するためのチュートリアルを実際にチェックする必要があります。彼は、Angularのドキュメントで概説されているすべてのステップを説明します。http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

この手法を使用すると、検索エンジンはカスタムタグの代わりに展開されたHTMLを認識します。

これは大幅に変更されました。

http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946

使用する場合：$ locationProvider.html5Mode（true）; あなたは設定されています。

これ以上レンダリングページはありません。

この質問が出されてから、状況はかなり変化しました。GoogleがAngularJSサイトをインデックスに登録できるようにするオプションが追加されました。私が見つけた最も簡単なオプションは、http： //prerender.io無料サービスを使用することでした。ほとんどすべてのサーバー側のWebプラットフォームでサポートされています。私は最近それらを使い始めました、そして、サポートも素晴らしいです。

私は彼らとは何の関係もありません、これは幸せなユーザーから来ています。

Angular自身のWebサイトは、検索エンジンに簡略化されたコンテンツを提供します。http：//docs.angularjs.org/？_escaped_fragment _ = / tutorial / step_09

AngularアプリがのようなNode.js / Express駆動のJSON apiを使用しているとしましょう/api/path/to/resource。おそらく、JSONデータを返すのではなく、to を使用し?_escaped_fragment_てリクエストをリダイレクトし/api/path/to/resource.html、コンテンツネゴシエーションを使用して、コンテンツのHTMLテンプレートをレンダリングできます。

唯一のことは、AngularルートがREST APIと1：1で一致する必要があるということです。

編集：私はこれがREST APIを本当に混乱させる可能性があることを理解しています、そしてそれが自然に適合するかもしれない非常に単純なユースケースの外でそれを行うことはお勧めしません。

代わりに、完全に異なるルートとコントローラーのセットをロボットフレンドリーなコンテンツに使用できます。ただし、すべてのAngularJSルートとコントローラーをNode / Expressで複製しています。

私はそれが理想的ではないように思えますが、ヘッドレスブラウザーでのスナップショットの生成に落ち着きました。

良い方法はここにあります：

http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag

現在、GoogleはAJAXクロールの提案を変更しています。

時が変わった。現在、GooglebotによるJavaScriptまたはCSSファイルのクロールをブロックしていない限り、通常、最新のブラウザのようにWebページをレンダリングして理解することができます。

tl; dr：[Google]は、2009年に作成されたAJAXクロールの提案[Google]を推奨しなくなりました。

ここで他の回答で参照されているGoogleのクロール可能なAjax仕様が基本的な答えです。

他の検索エンジンやソーシャルボットが同じ問題にどのように対処するかに興味がある場合は、ここに最新情報を記述しました。http：//blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

私はhttps://ajaxsnapshots.comで働いています。これは、Crawlable Ajax Specをサービスとして実装している会社です。そのレポートの情報は、ログからの観察に基づいています。

私はあなたの拠点のほとんどをカバーするエレガントなソリューションを見つけました。私は最初にそれについてここに書いて、それを参照する別の同様のStackOverflow質問にここで答えました。

ちなみに、このソリューションには、クローラーがJavaScriptを取得しない場合に備えて、ハードコードされたフォールバックタグも含まれています。私はそれを明示的に概説しませんでしたが、適切なURLサポートのためにHTML5モードをアクティブにするべきであることは言及する価値があります。

また、これらは完全なファイルではなく、関連する重要な部分にすぎません。他の場所にあるディレクティブ、サービスなどのボイラープレートを書くのに助けが必要な場合。とにかく、ここに行く...

app.js

ここで、各ルート（タイトル、説明など）にカスタムメタデータを提供します

$routeProvider
   .when('/', {
       templateUrl: 'views/homepage.html',
       controller: 'HomepageCtrl',
       metadata: {
           title: 'The Base Page Title',
           description: 'The Base Page Description' }
   })
   .when('/about', {
       templateUrl: 'views/about.html',
       controller: 'AboutCtrl',
       metadata: {
           title: 'The About Page Title',
           description: 'The About Page Description' }
   })

metadata-service.js（サービス）

カスタムメタデータオプションを設定するか、デフォルトをフォールバックとして使用します。

var self = this;

// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
  self.title = document.title = metadata.title || 'Fallback Title';
  self.description = metadata.description || 'Fallback Description';
  self.url = metadata.url || $location.absUrl();
  self.image = metadata.image || 'fallbackimage.jpg';
  self.ogpType = metadata.ogpType || 'website';
  self.twitterCard = metadata.twitterCard || 'summary_large_image';
  self.twitterSite = metadata.twitterSite || '@fallback_handle';
};

// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
  self.loadMetadata(newRoute.metadata);
});

metaproperty.js（ディレクティブ）

ビューのメタデータサービスの結果をパッケージ化します。

return {
  restrict: 'A',
  scope: {
    metaproperty: '@'
  },
  link: function postLink(scope, element, attrs) {
    scope.default = element.attr('content');
    scope.metadata = metadataService;

    // Watch for metadata changes and set content
    scope.$watch('metadata', function (newVal, oldVal) {
      setContent(newVal);
    }, true);

    // Set the content attribute with new metadataService value or back to the default
    function setContent(metadata) {
      var content = metadata[scope.metaproperty] || scope.default;
      element.attr('content', content);
    }

    setContent(scope.metadata);
  }
};

index.html

Javascriptを取得できないクローラーの場合は、前述のハードコーディングされたフォールバックタグで完了します。

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" metaproperty="url">
  <meta property="og:title" content="Fallback Title" metaproperty="title">
  <meta property="og:description" content="Fallback Description" metaproperty="description">
  <meta property="og:type" content="website" metaproperty="ogpType">
  <meta property="og:image" content="fallbackimage.jpg" metaproperty="image">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
  <meta name="twitter:title" content="Fallback Title" metaproperty="title">
  <meta name="twitter:description" content="Fallback Description" metaproperty="description">
  <meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
  <meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>

これは、ほとんどの検索エンジンの使用例で劇的に役立つはずです。ソーシャルネットワーククローラーの完全に動的なレンダリングが必要な場合（Javascriptのサポートには不向きです）、他のいくつかの回答で言及されている事前レンダリングサービスのいずれかを使用する必要があります。

お役に立てれば！

PreRenderのようなものを使用すると、サイトの静的ページが作成されるため、検索エンジンでインデックスを作成できます。

ここでは、利用可能なプラットフォームを確認できます。https：//prerender.io/documentation/install-middleware#asp-net

Angular Universalを使用すると、完全なアプリのように見えるアプリのランディングページを生成し、その背後にAngularアプリを読み込むことができます。
Angular Universalは純粋なHTMLを生成するため、サーバーサイドにJavaScriptのないページがあり、遅延なくユーザーに提供されます。したがって、任意のクローラー、ボット、およびユーザー（すでにCPUとネットワーク速度が低いユーザー）に対処できます。次に、リンク/ボタンによって、それらの背後に既にロードされている実際の角度付きアプリにリダイレクトできます。このソリューションは公式サイトで推奨されています。-SEOとAngular Universalに関する詳細情報-

クローラー（またはボット）は、WebページのHTMLコンテンツをクロールするように設計されていますが、非同期データフェッチのAJAX操作が原因で、ページをレンダリングして動的コンテンツを表示するのに時間がかかるため、これが問題になりました。同様に、AngularJS非同期モデルを使用すると、Googleクローラーに問題が発生します。

一部の開発者は、実際のデータで基本的なhtmlページを作成し、クロール時にこれらのページをサーバー側から提供します。PhantomJSサーブ側にある同じページをレンダリングできます_escaped_fragment_（Googleが#!サイトのURLを検索し、その後のすべてを取得#!して_escaped_fragment_クエリパラメータに追加するため）。詳しくはこちらのブログをご覧ください。

クローラーは豊富な機能を備えたきれいなスタイルのGUIを必要とせず、コンテンツを表示したいだけなので、人間のために作成されたページのスナップショットを提供する必要はありません。

私の解決策：クローラーが望むものをクローラーに与えるには：

あなたはクローラーが何を望んでいるのかを考え、彼にそれだけを与えなければなりません。

ヒントは背中を台無しにしないでください。同じAPIを使用してサーバー側の小さなフロントビューを追加するだけです