テクノロジーとしてのAJAXは、2005年までにようやく形成されました。 2006年、W3Cは公式のWeb標準を作成するために、最初の予備的なXMLHttpRequestオブジェクト仕様をリリースしました。 2009年、Google は検索エンジンがAJAXページにアクセスできるようにする提案を思いつきました 。 その後、JavaScriptを解釈できなかったため、検索エンジンがAJAXアプリケーションのインデックスを作成できることを保証する多くのプラクティスが提案されました。
ウェブマスターは、サイトのHTMLバージョンを生成する必要があり、アドレスを持つページから_Escaped_fragment = page、レンダリングされたHTMLバージョンのページとJavaScriptを作成しました。 これについては、 YandexとGoogleから詳細なガイドがあります。
ただし、2015年10月以降、Googleはそのリーダーシップを非推奨としてマークしています。 Googleのブログエントリは、検索スパイダーが最新のブラウザと同じ方法でWebページを解釈できると主張しています。
練習する
そのため、AngularJSには1ページのサイトがあります。 Googleでインデックスを作成すると同時に、GoogleがすべてのJavaScriptコードを本当に実行するかどうかを確認するために、最小限の動きで必要です。
まず、UIルーターのHTML5履歴APIモードを有効にします。
angular.module('app', ['ui.router']) .config(function($locationProvider) { $locationProvider.html5Mode(true); });
次に、すべてのリクエストがindex.htmlに送信されるようにnginxを構成する必要があります。
location / { try_files $uri $uri/ /index.html =404; }
実際には、それだけです。 これで、Googleはサイトのインデックス作成を開始できます。 個人的なプロジェクトseo11.ruを証拠として引用できます。
これは、Angular 1.5上のSPAアプリケーションですが、sitemap.xmlがなくても、すべてのページにインデックスが付けられます。
ページのコンテンツはui-viewから挿入されますが、Googleスパイダーから簡単にアクセスできます。
$ stateProviderを使用して、サイトの各ページに一意のタイトルと説明が登録されます。
<title data-ng-bind="title">SEO 1:1</title> <meta name="description" content="{{description}}">
両方のオプションが機能します：
Googleは、ブラウザとまったく同じようにページを完全に処理します。 このブロック内のテキストが検索可能な範囲で：
<p ng-show="isFirefox"> Firefox...</p>
そして、このブロックでは利用できません：
<p ng-if="isFirefox"> ...</p>
違いは、ng-showはdisplay：要素を非表示にするだけであり、ng-ifはDOMから直接要素を切り取る点です。
Yandexはどうですか？
YandexロボットはJavaScriptのインデックスも作成できますが、これまでの実験の一部です。 これについては、ブログで詳しく説明しています。 残念ながら、これはすべてのサイトで機能するわけではなく、現時点では、JSサイトがインデックスに登録されることを確認できません。
残念ながら、この場合、サイトの正しいインデックス作成に提供できる唯一のソリューションは、前述のスキームに従ってHTMLコピーを使用することです。
ただし、これにかなりのリソースを費やすことはお勧めできません。 遅かれ早かれ、YandexはすべてのサイトのJSコードを完全に実行します。
現在、サイトのHTMLバージョンを生成する最も簡単な方法は、PhantomJSなどのヘッドレスブラウザーを使用してページをレンダリングすることです。 これをオンザフライで実行するか、事前にキャッシュページを提供できます（prerender.ioなどの特別なサービスもあります）。
個人的には、プロジェクトのビルドフェーズでGulpで実行されるhtml-snapshotsプラグインを使用します。