検索エンジンと SEO に関して、AngularJS アプリケーションには 2 つの問題があると思います。
1) カスタムタグでは何が起こりますか？検索エンジンはそれらのタグ内のコンテンツ全体を無視しますか？例えば、
<custom>
<h1>Hey, this title is important</h1>
</custom>
<h1>カスタムタグ内にあるにもかかわらずインデックスに登録されますか?
2) 検索エンジンが{{}}を文字通りインデックスしないようにする方法はありますか？
<h2>{{title}}</h2>
私はこんなこともできるとわかっている
<h2 ng-bind="title"></h2>
しかし、実際にクローラーにタイトルを「見せる」ようにしたい場合はどうすればよいでしょうか? サーバー側レンダリングが唯一の解決策でしょうか?
ベストアンサー1
（2022）可能であればサーバーサイドレンダリングを使用し、PushstateでURLを生成する
Google は現在 JavaScript を実行できるため、適切な URL 構造を作成すれば、JavaScript のみを使用してサイトを構築することは十分に可能です。ただし、ページ速度はますます重要なランキング要因になってきており、通常、クライアント側で構築されたページは最初のレンダリングでパフォーマンスが低下します。
サーバーサイド レンダリング (SSR) を使用すると、ページをサーバー上で事前に生成できるようになります。HTML にはページ ルートとして使用される div が含まれていますが、これは空の div ではなく、JavaScript の実行が許可された場合に生成される HTML が含まれています。
クライアントは HTML をダウンロードしてレンダリングし、非常に高速な初期読み込みを行います。その後、JavaScript を実行して、ハイドレーションと呼ばれるプロセスで生成されたコンテンツにルート div のコンテンツを置き換えます。
多くの新しいフレームワーク、特に NextJS には SSR が組み込まれています。
(2015) PushStateとPrecompositionを使用する
現在 (2015 年) の方法でこれを行うには、JavaScript の pushState メソッドを使用します。
PushState は、ページを再読み込みせずにブラウザ上部のバーの URL を変更します。タブを含むページがあるとします。タブはコンテンツを非表示にしたり表示したりしますが、コンテンツは AJAX を使用するか、display:none と display:block を設定するだけで、正しいタブ コンテンツを非表示にしたり表示したりして動的に挿入されます。
タブがクリックされたら、pushState を使用してアドレス バーの URL を更新します。ページがレンダリングされたら、アドレス バーの値を使用して表示するタブを決定します。Angular ルーティングはこれを自動的に実行します。
プレコンポジション
PushStateシングルページアプリ（SPA）をヒットする方法は2つあります。
- PushState 経由で、ユーザーが PushState リンクをクリックすると、コンテンツが AJAX で取り込まれます。
- URLを直接クリックします。
サイトへの最初のアクセスでは、URL を直接アクセスします。その後のアクセスでは、PushState が URL を更新するため、コンテンツに AJAX が挿入されるだけです。
クローラーはページからリンクを収集し、後で処理するためにキューに追加します。つまり、クローラーにとって、サーバーへのすべてのヒットは直接ヒットであり、Pushstate 経由でナビゲートされることはありません。
事前構成は、初期ペイロードをサーバーからの最初の応答にバンドルします (JSON オブジェクトとして提供される場合もあります)。これにより、検索エンジンは AJAX 呼び出しを実行せずにページをレンダリングできます。
Google が AJAX リクエストを実行しない可能性があることを示唆する証拠がいくつかあります。詳細については、こちらをご覧ください。
Search Engines can read and execute JavaScript
Google has been able to parse JavaScript for some time now, it's why they originally developed Chrome, to act as a full featured headless browser for the Google spider. If a link has a valid href attribute, the new URL can be indexed. There's nothing more to do.
If clicking a link in addition triggers a pushState call, the site can be navigated by the user via PushState.
Search Engine Support for PushState URLs
PushState is currently supported by Google and Bing.
Here's Matt Cutts responding to Paul Irish's question about PushState for SEO:
Here is Google announcing full JavaScript support for the spider:
http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html
The upshot is that Google supports PushState and will index PushState URLs.
See also Google webmaster tools' fetch as Googlebot. You will see your JavaScript (including Angular) is executed.
Bing
Here is Bing's announcement of support for pretty PushState URLs dated March 2013:
http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/
Don't use HashBangs #!
Hashbang URLs were an ugly stopgap requiring the developer to provide a pre-rendered version of the site at a special location. They still work, but you don't need to use them.
Hashbang URLs look like this:
domain.example/#!path/to/resource
This would be paired with a metatag like this:
<meta name="fragment" content="!">
Google will not index them in this form, but will instead pull a static version of the site from the escaped_fragments URL and index that.
Pushstate URLs look like any ordinary URL:
domain.example/path/to/resource
The difference is that Angular handles them for you by intercepting the change to document.location dealing with it in JavaScript.
If you want to use PushState URLs (and you probably do) take out all the old hash style URLs and metatags and simply enable HTML5 mode in your config block.
Testing your site
Google Webmaster tools now contains a tool which will allow you to fetch a URL as Google, and render JavaScript as Google renders it.
https://www.google.com/webmasters/tools/googlebot-fetch
Generating PushState URLs in Angular
To generate real URLs in Angular, rather than # prefixed ones, set HTML5 mode on your $locationProvider object.
$locationProvider.html5Mode(true);
Server Side
Since you are using real URLs, you will need to ensure the same template (plus some precomposed content) gets shipped by your server for all valid URLs. How you do this will vary depending on your server architecture.
Sitemap
Your app may use unusual forms of navigation, for example hover or scroll. To ensure Google is able to drive your app, I would probably suggest creating a sitemap, a simple list of all the URLs your app responds to. You can place this at the default location (/sitemap or /sitemap.xml), or tell Google about it using webmaster tools.
いずれにしても、サイトマップを用意しておくことをお勧めします。
ブラウザのサポート
PushstateはIE10で動作します。古いブラウザでは、Angularは自動的にハッシュスタイルのURLにフォールバックします。
デモページ
次のコンテンツは、事前構成の pushstate URL を使用してレンダリングされます。
http://html5.gingerhost.com/london
確認できるように、このリンクコンテンツはインデックスされ、Google に表示されます。
404 および 301 ヘッダーステータスコードの提供
検索エンジンはリクエストごとに常にサーバーにアクセスするため、サーバーからヘッダー ステータス コードを提供して、Google がそれを確認することを期待できます。