2013/07/26

AjaxよりもSEOに期待大!pjaxをマスターしよう!

AjaxよりもSEOに期待大!pjaxをマスターしよう!

pjaxとはHTML5の新機能であるHistory APIを利用したjQueryプラグインの事です。
AjaxpushStateの機能を合わせ持ち、非同期通信でもブラウザのURLを書き換えることができます。

Ajaxを使ったことがない方にも分かりやすく説明しますと、
「ページ移行の時に現在のページと移行先のページの共通部分を読み込まずに、
 変更部分だけを読み込んで書き換えるjQuery」

という事になります。

実装するのも非常に簡単で、Ajaxを単体で使うよりもSEOに効果があると言われています。

目次

■Ajaxのデメリット

以前の記事でも解説しましたAjaxとはjavascriptとPHPを使った、非同期通信で画面移行を行わずにコンテンツを書き換える事ができる関数です。

詳しくは以前の記事で解説していますのでご参照下さい。
過去記事Ajaxを使ってwebサイトの性能をアップさせよう!

Ajaxについてのブログ

Ajaxは一つのページ、一つのURLの中でページ移行をせずに、コンテンツの一部だけを書き換えますので、URLが変えられません。なので、画面ごとに個別のURLを割り振りたい時はハッシュ(URLの後ろの#~)を付けて処理する方法がとられてました。
しかしその方法ではURLとして正しくないので 検索エンジンにインデックスされなかったり、アクセス解析ツールの数字が正しく反映されなかったりという問題があります。

■pushStateとは

pushStateとはHTML5から導入されたHistory API(javascriptのhistoryオブジェクトのメソッド)です。
実際にページ移行をせずにjavascriptでブラウザにURLの履歴を追加することができます。
しかし擬似的にURLを変えるだけなので「戻る」ボタンを押しても画面は切り替わりません。
基本的には「戻る」ボタンが押された時に発生するイベントを取得する関数popstateと組み合わせて使います。

■pjaxのメリット

pjaxでは書き換えるURLの数だけページを用意しておいて、各ページの差分だけ書き換えるので、表示が高速なのにも関わらず、SEOのマイナス点がありません。
検索エンジンから見ましたら普通のHTMLのページと同じだからです。
現にGoogleやBingでもpjax(pushState)を推奨しています。

またpjaxはユーザーの状況に合わせて機能を実行してくれますので、pushStateに対応していないブラウザやjavascriptがオフの状態ですと通常の画面移行を行ってくれます。

■pjaxのダウンロードと解説サイト

ダウンロード defunkt/jquery-pjax
(右下の「Download ZIP」ボタンで
 テストファイルごとダウンロードできます)
解説サイト a newcomer!
デモ1 http://pjax.heroku.com/

defunkt/jquery-pjaxデモイメージ

アスキーアートの男性が持っているチェックボックスでpjaxのオンオフを切れかえられます。
[home][dinosaurs][aliens]の3つのリンクを何回かクリックして見て下さい。
pjaxオフの時 - 通常のページ移行がされます。
pjaxオンの時 - アスキーアートの男性のエリアは非同期なので表示されている時間は更新されません。URLが変わっていることもご確認下さい。

デモ2 http://sa-kusaku.sakura.ne.jp/output/pjax/demo/link/

falsandtru/jquery.pjax.jsデモイメージ

緑のエリアにある3つのリンクは通常のページ移行がされます。
赤いエリアにある3つのリンクにはpjaxが使われていてその赤いエリアだけしか更新されません。その場合もURLが変わっている事をご確認ください。

■まとめ

HTML5になって追加されたHistory APIを利用してpjax は開発されました。
一見使いどころのなさそうなAPIでも組み合わせるアイデア次第で非常に便利なプラグインとなります。
機会があったら試してみてはいかがでしょうか。