LoginSignup
1
2

More than 5 years have passed since last update.

PrerenderでUserAgentがモバイルの場合にスマホ用のページをレンダリングさせる

Last updated at Posted at 2016-03-18

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
server.js
...
# この1行を追加
server.use(require('prerender-mobile-useragent'));
...
server.start();

これで元々のリクエストがモバイルからだった場合に、PhantomJSから対象のページへのリクエストもモバイルとしてリクエストされるようになります。

PhantomJS/x.x.x ... iPhone

※UAの判定にはexpress-useragentを使用しています

モバイルのユーザーエージェントを変更したい場合

デフォルトではiPhoneがモバイル用のエージェントとして追加されるようになっていますが、これでは都合が悪いという場合は任意のユーザーエージェント名を指定することができるようになっています。(複数指定したい場合などにも)

export MOBILE_USER_AGENT=Androidbrowser

いまさら感のあふれるトピックになってしまいましたが(書いたのも結構前だし…)、誰かのお役にたてれば嬉しいです。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2