まめーじぇんと@Tech

技術ネタに関して (Android, GAE, Angular). Twitter: @mame01122

Ajax(AngularJS)ベースのウェブサービスをクロール/インデックスしてもらう方法

Web common

・Ajaxベースのサイトをインデックスしてもらおう！

ここ最近、GoogleのSpiderにAngularJSで作ったSPA (Single Page Application)をクロール、インデックスに登録（＝Google検索にひっかかるようになる）してもら方法を模索しており、ようやく今日、Google検索でひっかかるようになったのでそのやり方を記載します。

・SEO対策のページはたくさんあるんですが、それがAjax用となると途端に少なくなるのは（特に日本語は見つからない・・・）僕だけでしょうか。ということで、少しでもAjaxのサービスを作っていてクロールに困っている人の助けになれば。

Google検索でひっかかるようにするために必要な、最低限のモノって何？

・SEOやクローラー対策で、いろいろなオプションややるべきことがあることはわかるんです。
ざっと調べただけでも、

robots.txt
サイトマップ
URLパラメータ
構造化データ
データハイライター
HTML5Mode vs Hashbang

などなど。。。

もーーーーどれ必須でどれが任意項目や！！と散々探し回って悩みまくった挙句、必要なのは、
・サイトマップ
のみのようです。

他はなくても何とかなる、ようです（違ったらゴメンなさい。）

下記のFull Specificationにしっかり書いてありました（が、なかなか気づかないですよね、コレ。。）
https://developers.google.com/webmasters/ajax-crawling/docs/specification

In order to crawl your site's URLs, a crawler must be able to find them"

（特にbold体や赤文字でハイライトされることもなく、さらっと。。。）

ちなみにウェブページによってはrobots.txtが必須だ！的なことを書いているものもありましたが、
下記にある通り、robotx.txtはなくてもよいようです。

https://support.google.com/webmasters/answer/6062608?hl=ja

robots.txt ファイルが必要になるのは、Google などの検索エンジンのインデックスに登録したくないコンテンツがある場合のみです。

sitemap.xmlの書き方

・ということでsitemap.xmlの書き方ですが、フォーマットはこんな感じ。

<url>
	<loc>https://xxx.yyy.com/#!/</loc>
	<lastmod>2015-06-18</lastmod>
	<priority>1.0</priority>
	<changefreq>daily</changefreq>
</url>

これを、各ページ毎に記載します。
ただ、このあたりの情報は他のサイトを見ればわかるんです。そして、このサイトマップは、（Ajaxベースでないサイトであれば）いろいろな自動作成サイトもあるので、そこで作ることもできます。

が。

・Ajax (AngularJS)ベースのサイトマップの書き方がよーわからん。。
・自動作成サイトにAjaxベースの (#やら!を含んだ)URLを入れるとエラー吐く。。

と、ここでも落とし穴が。。

ということで、僕が使っているフォーマットを共有します。こんな感じ。
sitemap_mobile.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
	xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
	<url>
		<loc>https://xxx.yyy.com/#!/</loc>
		<lastmod>2015-06-18</lastmod>
		<priority>1.0</priority>
		<changefreq>daily</changefreq>
	</url>
	<url>
		<loc>https://xxx.yyy.com/#!/signin</loc>
		<lastmod>2015-06-18</lastmod>
		<priority>1.0</priority>
		<changefreq>daily</changefreq>
	</url>
</urlset>

sitemap_pc.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
	<url>
		<loc>https://xxx.yyy.com/#!/</loc>
		<lastmod>2015-06-18</lastmod>
		<priority>1.0</priority>
		<changefreq>daily</changefreq>
	</url>
	<url>
		<loc>https://xxx.yyy.com/#!/signin</loc>
		<lastmod>2015-06-18</lastmod>
		<priority>1.0</priority>
		<changefreq>daily</changefreq>
	</url>
</urlset>

Googleがモバイルファーストの方向を打ち出しているので、モバイル用のサイトマップも作っておくことをオススメします。

後はこれをお持ちのサービスにデプロイし、このxmlのURLをGoogleのウェブマスターツールに教えてあげればOK。(もちろんウェブマスターツールから可能です)

僕の場合、上記の作業から1日ほどでインデックスされました。インデックスされたかどうかは、ブラウザのアドレスバー上でhttps://xxx.yyy.com/#!/のhttpsの部分をsiteに変えれば（つまりsite://xxx.yyy.com/#!/にすれば）確認可能です。インデックスされていれば、インデックスされたページ一覧が表示されます。

ちなみに僕の場合hashbangモードなのでURLに#!が入っていますが、そこは設定次第です。

これで最低限の対応は完了です！

以上、Ajax(AngularJS)ベースのウェブサービスをクロール/インデックスしてもらう方法でした！