2015.6.12
2017.5.25

AngularJSを利用する場合のSEO対策

概要

AngularJSを利用してWebサイトを作成する場合、作成したサイトを一般に公開するのであれば、別途、SEO対策が必要になります。

バージョン)
 AngularJS 1.3

詳細

色々書こうと思いましたが、以下のページに詳しく掲載されていたのでそちらを参照してください。

SEO検証! GoogleはAngularJSを正しくクロールするのか?(2015年2月版)

私が作成したサイトは勉強も兼ねていたので、「PhantomJS」を利用してHTMLのスナップショットを作成するようにして対応しました。以下はその時の内容です。

◆ GoogleのクローラーにAjaxアプリケーションであることを通知するため、<head>内に以下を記述します。


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

◆ 上記設定により、クローラーがサイトにアクセスする際、URLの最後に「?_escaped_fragment_=」が付加されるので、サーバ側の設定で「?_escaped_fragment_=」が付加されている場合、作成しておいたHTMLスナップショットのURLを返してやるようにします。

本来のURLが「http://www.xxx.yyy/test/」だった場合、クローラーからアクセスされるURLは「http://www.xxx.yyy/test/?_escaped_fragment_=」になるので、クローラーからのアクセスに対してHTMLスナップショットのURLを返すよう、サーバ側でURLを以下のように書き換えます。

「.htaccess」の設定例(Apacheの場合)


RewriteEngine On
RewriteCond %{QUERY_STRING} ^_escaped_fragment_=$
RewriteCond %{REQUEST_URI} ^/test/$
RewriteRule ^(.*)$ test/snapshot/test.html [L]

◆ スナップショット対象のページが頻繁に更新されて内容が変わるのであれば、バッチ処理でスナップショットの再作成を行います。

備考

AngularJSを利用したページのスナップショットを作成してみて、そのページを通常のブラウザで開くと、データを埋め込んだHTMLに対して再度AngularJSの処理が実行されてしまい、おかしな表示になってしまいます。(ng-repeatを使用して10件データを表示するようなページがあったら、2回目の処理で100件分表示されました)

クローラーに対しては別に問題ないかとも思いましたが、気持ちが悪かったので、PhantomJSで取得したHTMLから外部スクリプトファイルを指定している行を削除するといった対応をとりました。

AngularJS】関連記事