2016年を迎えてもなお、GooglebotがバッチリJavaScriptを実行してくれているのかどうか微妙なご時世です。
こういった状況ではAngularJSなどを使ってSEOの対策が必要なフロントエンド開発をしていると(止むに止まれぬ事情もあるのです…)、どうしてもそれなりの対応をせざるを得ません。
下記記事のようにPrerender(Node.JS + PhantomJS)を使った対策を行う場合、記事中で触れられているようにスマホ用のページを用意している場合にはそれ用のレンダリングをさせてやる必要があります。
...GoogleはPCサイトのインデックスとスマホ向けのインデックスが分かれているため、PC/スマホで返すHTMLを分けなくてはいけません。...スマホ版のGooglebotにもPC向けのHTMLを返すようになってしまっていて、危うくスマホの検索結果からインデックスが消えてしまいそうになりました。
Prerenderがユーザーエージェント無視する問題
しかし、モバイルのユーザーエージェントからPrerenderにリクエストをした場合でもPhantomJSから目的のページにリクエストする際には元々のユーザーエージェントは無視され、PhantomJS/x.x.x ...
みたいなユーザーエージェントでリクエストされてしまいます。
そのため、Ameba Owndさんのようにユーザーエージェントを書き換えてやる必要がありますが、そんなこと忙しくてできないよ、という人のためにソレ用のモジュールをつくりまました。
prerender-mobile-useragent
obiyuta/prerender-mobile-useragent
使い方は簡単で、npmでインストールしてPrerenderのserver.jsに1行書き加えてやるだけです。
$ npm install prerender-mobile-useragent --save
...
# この1行を追加
server.use(require('prerender-mobile-useragent'));
...
server.start();
これで元々のリクエストがモバイルからだった場合に、PhantomJSから対象のページへのリクエストもモバイルとしてリクエストされるようになります。
PhantomJS/x.x.x ... iPhone
※UAの判定にはexpress-useragentを使用しています
モバイルのユーザーエージェントを変更したい場合
デフォルトではiPhone
がモバイル用のエージェントとして追加されるようになっていますが、これでは都合が悪いという場合は任意のユーザーエージェント名を指定することができるようになっています。(複数指定したい場合などにも)
export MOBILE_USER_AGENT=Androidbrowser
いまさら感のあふれるトピックになってしまいましたが(書いたのも結構前だし…)、誰かのお役にたてれば嬉しいです。