SEOやJSオフ環境にも配慮したAjaxコンテンツを制作するためにできること

Ajaxを利用したコンテンツは、ユーザビリティを向上したりリッチなサイトを制作するために一役かってくれたりします。その反面Ajaxだけの視点で実装するとページ内を動的に書き換えていくため、SEOができなかったり、JSオフ環境だと閲覧できないというジレンマがあります。

解決方法を少しあげてみましょう。（以下主に全ページAjaxで構成されているようなサイトを前提にしています）

1. HTMLsnapshotを利用する

SEOにも強いクローラブルなAJAXコンテンツを作成するためにという翻訳記事を先日書きましたが、Googleが対応している、というよりもGoogleにインデックスしてもらうための対応策ですかね。Twitterで導入されていますが、ユーザーが切り替えない限りはまだ旧サイトに飛んでいるはずなので、効果は分かりません。

• システムの対応が必須
• クエリをHTMLsnapshotに対応しないといけない
• 結局bot向けに同じ内容のページを用意するくらいなら全ユーザーが利用できるほうがいいのでは？

など、こちらの対応をするならはじめから静的なページを用意したほうが無難な気がします。（ページ数が膨大な）Webアプリケーション等はこちらのほうがいいんですかね。

2. JSオフでも閲覧可能なページ（HTML）を用意する

今のところ現実的なのはこれでしょうか。ポイントはサイトをJSオフでも見られるように設計しておいて、JS側でリンクをハッシュリンクに書き換えるという感じですね。

この方法の要点は以下のとおりです。

• 全てのページを作成する（いつも通り）
• リンクはJSでフラグメントハッシュリンクに置き換える
• Ajaxでページを読み込み必要なところだけ置き換える

実装方法の詳細はまた別に書くと思いますが、書きますが、一例をあげるとページロード時に、以下のようなスクリプトを実行して各a要素のhref属性を書き換えてしまいます。サイト自体がJSオフ環境でも見ることができるため、サイトのSEOも従来通り。インデックスも元のURLでされます。

$('a').each(function() {
  $(this)
    .filter(function() {
      return this.href.indexOf(domain) != -1;
    })
    .attr('href', $(this).attr('href').match(/^\./)
      ? $(this).attr('href')
        .replace(domain, '')
        .replace(/^\./, '#')
      : '#' + $(this).attr('href').replace(domain, ''))
});

これを実行するとhrefの中身が

から

へ変わります。

クリックするとURLのフラグメントハッシュが変わり、ハッシュチェンジイベントが呼び出されるので、それにあわせてコンテンツを変更するようにします。

ハッシュチェンジイベントは「jQuery hashchange event」を利用すると簡単に実装することができます。

ただしデメリットも当然あり、ハッシュリンクのせいでトップページURLが

http://hoge.com/

と

http://hoge.com/#

のように2つできてしまい、例えばソーシャルブックマークのブックマークが分かれてしまったりします。そのために使えるであろうcanonicalもまだ対応されていないことが多いのでなんとも。。はてなは対応しているはずですが、分かりにくいですね。

あとはページ全体をAjaxで呼び出しがちなので、その辺りはサーバーサイドでAjaxリクエストだった場合はこのデータだけ、のような仕組みで利用したほうがエコっぽいです。

pushStateとreplaceState

hashchangeイベントの微妙なところはWHATWGで用意されている「pushState」「replaceState」を使えば解消されるような感じです。

window . history . pushState(data, title [, url ] )
Pushes the given data onto the session history, with the given title, and, if provided, the given URL.

window . history . replaceState(data, title [, url ] )
Updates the current entry in the session history to have the given data, title, and, if provided, URL.

via: HTML5 (including next generation additions still in development) – 6.4 Session history and navigation

hashchangeイベントがlocation.hashを利用するのに対してpushState・replaceStateはhistoryのメソッドになり、URLそのもの（location.pathname）を書き換えることができるようです。