>  >  >  > 

pjaxを使ったSEOにも考慮した非同期通信

pjaxを使ったSEOにも考慮した非同期通信

こんにちはムラタです。

今回はSEOに配慮しつつページ読み込み時間を短縮させるpjaxを使ってみたいと思います。

目次

  1. そもそもpjaxって?
  2. 準備
  3. 実装
  4. 最後に

そもそもpjaxって?

pjaxとはサーバーから非同期にデータを取得してコンテンツを改変させる技術の「Ajax」と、HTML5から導入された、javascriptからブラウザの履歴に直接追加させるメソッド「pushState」を組み合わせた技術のことで「pushState」+「Ajax」で「pjax」らしいです。

HTML5のpushStateに対応していないIE9以前のブラウザではこの機能を使うことはできませんが、その場合は通常のページ遷移となり、ページが見られなくなるということは無いので安心です。

Ajaxと何が違うの?

Ajaxでは表示内容を書き換えた場合、URL自体は書き変わらずそのままで、ブラウザの履歴にも追加されないため、ブラウザの戻るボタンを押しても内容を戻すこともできません。ようするにページの遷移がなくURLがそのままということですね。

そこにHTML5のpushStateを組み合わせることでURLを変更すると共に履歴も残せるようになり過去のページを辿ることもできるというわけです。

デモ

デモを下記にアップしているので実際の動きを確認してみてください。

pjaxによる遷移が分かりやすいように遷移した場合はフェードイン・アウトで切り替わるようにしています。(デモトップへのリンクだけ通常リンクにしています)
またindex.htmlで「#header」部分にアクセスした時の時間が表示するようにしていますが、PJAXで遷移した場合headerの中身はそのままなので時間が変わることがないのも確認してください。

その際にURLやタイトル、metaタグも切り替わっているのも確認できますね。前述した通り、ここからブラウザの戻るボタンでページを遡ることもできます。

準備

使用するjsファイル

pjaxを扱うにあたって「jquery-pjax」という便利なjQueryプラグインが用意されていますのでそれを利用しましょう。
jQueryプラグインなので当然jQuery本体も必要です。

実装

 pjaxの設定

では実際にPJAXを使用するにあたってpjaxの細かい設定を行っていきます。

まず「$.pjax()」で設定を開始します。

「area」では切り替える部分を指定します。今回はコンテンツ部分とサイドバーになる「#contents」と「#sidebar」を指定しておきます。

「load」は遷移先のページのmeta情報、CSSやJavaScriptなどの同期設定を行います。

「load:head」は「base、meta、link」の3つが指定できますが、baseがなんなのかよく分からないですね・・・。
「meta」はdescriptionやkeyword等のmeta情報を遷移先のものに、
「link」はnextやprev、canonicalなどの要素を遷移先のものに差し替えます。

「load:css」「load:script」はその名の通り、遷移先のcssやjavascriptファイルを読み込むかどうかです。
外部参照のjavascriptに関しては一度しか読み込まれず、インラインJavaScriptは毎回読み込まれます。

01

「link」はPJAXによる遷移をさせるリンクを設定します。ここで「a.pjax」とすることでpjaxクラスが付与されているリンクのみPJAX遷移を行うようにします。

「callback」と「callbacks」で遷移時のフェードイン・アウトの処理を記述しています。
「callback」は遷移が終わった段階で実行され、「callbacks」の方はもっと細かく実行のタイミングを指定できるみたいです。

「wait」でフェードイン・アウトにかかる時間分処理を待たせています。
あまり長く待たせるとせっかく非同期通信ですばやいページ遷移ができているのに本末転倒になっちゃいますので気をつけましょう。

「ajax:{timeout:3000}」はPJAX遷移するまで待機しておける時間ですね。
この時間をオーバーした場合は通常のページ遷移に切り替わります。

高さ揃えプラグインの対処

デモページの2ページ目では複数の要素の高さをそろえるjQueryプラグイン「jQuery.heightLine.js」を使用しています。

前述した通りインラインで書いてしまえば毎回実行されるので何の問題もないのですが、もしどうしてもインラインで書きたくない!っていう状況の場合、外部ファイル化することになるのでこのままでは最初の一回しか高さを揃えてくれません。

そういう時はcallbackに処理を書いておきましょう。

これで遷移が完了するたびにheightLineが実行されるので高さも揃えもバッチリです。

SNS関連ボタンの対処

次にTwitterのつぶやくボタンやFacebookのいいねボタンですが、PJAXで遷移した先でボタンを押しても遷移元の情報しか取得してくれないのでこれを正常に動くように一工夫をしましょう。

まずTwitterですが、埋め込みソースの中で「platform.twitter.com/widgets.js」というjsファイルを読み込んでいますが、これが読み込んだ際に「twttr」というオブジェクトを生成するようです。

このtwttrオブジェクトをキーとして、オブジェクトが存在している(すでにボタンが生成されている)かをチェックして、もう一度埋め込みaタグを生成しなおした後、「twttr.widgets.load()」でボタンの再構築を行えば良いみたいです。

callbackで遷移が終わった後にtwttrオブジェクトの有無を確認して、再構築を実行しています。

次にFacebookのlikeボタンですが、これもTwitterと同じように「FB」というオブジェクトがあるかどうかをチェックして、ページごとに異なる「data-href」部分を書き換えて「FB.XFBML.parse()」を実行すればOKです。

最後に

今回デモの中身が簡素なもので遷移の早さとかがあまり伝わらなかったかもしれませんね。
もっと共通部分のボリュームが大きいページとかだと効果が分かりやすいのかなと思います。

GoogleやbingもAjaxを利用したコンテンツのURLにはpushStateを推奨しているみたいなのでAjaxでサイトを構築されている方はこれを機会にPJAXに移行してみてはどうでしょう?

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
究極の間食|おやつの王様