今回はAjaxの「SMO」対応、「SEO」(Search Engine Optimization、検索エンジン最適化)対応について取り上げます。SEOについてはご存じの方も多いかと思いますが、SMOについてはあらかじめ簡単に説明しておきます。
「SMO」とは、ソーシャルメディア最適化(Social Media Optimization)のことです。ブログや掲示板、SNS上などで自分たちが作成したWebサイトについて言及してもらうことで、認知度や評判を高める施策のことを指します。
Ajaxを使ったWebページでは、画面遷移をすることなく画面内の一部のみを書き換えることで、スムーズなサイト閲覧を実現します。ですが、特別な処置をしなければ、次のような問題点を抱えてしまいます。
- SMOの実現が難しい
画面の状態が切り替わってもURLが変わらない。このため、そのURLを掲示板やSNSなどで紹介しても、そのURLを開いたほかのユーザーには、画面が切り替わる前の状態が表示されてしまう
- SEOの実現が難しい
JavaScriptでページを動的に変化させるため、JavaScriptが実行できないクローラは、各状態ごとのページにアクセスさせることができない。このため、検索エンジンにキャッシュされない
最初は、これらの問題に対して特別な処置を行っていない、ごく基本的なサンプルを紹介します。その後、ステップ2、3、4と3段階にサンプルに修正を加えていきながらSMO、SEO対応の仕方を紹介していきます(サンプルのライセンスはGPL 2となります)。
まずは、SMO、SEO対応を行う前のサンプルを見ていきます。このサンプルは、タブA、B、Cを押すことによって、ページの一部に別々のHTMLファイルが動的に表示されるものです。
サンプル1(タブA、B、Cを押して見てください。拡大表示はこちら)
最初に、全体を表示するHTMLファイルを見てみましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>ステップ1: SMO、SEO対応を行っていないサンプル</title>
<script type="text/javascript"
src="javascripts/lib/prototype.js"></script>
<script type="text/javascript"
src="javascripts/app/controllers/ajaxrecipe/smo_seo_sample_cont
roller.js"></script>
<script type="text/javascript"
src="javascripts/app/models/ajaxrecipe/smo_seo_sample.js">
</script>
<script type="text/javascript"
src="javascripts/app/views/ajaxrecipe/smo_seo_sample_view.js">
</script>
<link rel="stylesheet" type="text/css" href="../style.css" />
</head>
<body>
<a href="javascript:void(0)" class="tab" id="tab-a">タブA</a>
<a href="javascript:void(0)" class="tab" id="tab-b">タブB</a>
<a href="javascript:void(0)" class="tab" id="tab-c">タブC</a>
<div id="contents" />
</body>
</html> |
次の4つのファイルを<script>タグを使って読み込んでいます。
- javascripts/lib/prototype.jsprototype.js
バージョン1.6.0.2
- javascripts/app/controllers/ajaxrecipe/smo_seo_sample_controller.js
コントローラー
- javascripts/app/models/ajaxrecipe/smo_seo_sample.js
モデル
- javascripts/app/views/ajaxrecipe/smo_seo_sample_view.js
ビュー
これまでの連載のように、自分で作成したプログラムを以下のようなMVCで別のコードに分けて作成しています。
- M(モデル)
コアロジックを記述する
- V(ビュー)
表示変更処理を記述する
- C(コントローラー)
イベントハンドラの定義や、設定に関する記述をする
タブが3つあり、以下のように、「tab」というクラスが割り振られ、idには、「tab-a」「tab-b」「tab-c」などが割り振られています。
<a href="javascript:void(0)" class="tab" id="tab-a">タブA</a>
<a href="javascript:void(0)" class="tab" id="tab-b">タブB</a>
<a href="javascript:void(0)" class="tab" id="tab-c">タブC</a> |
次に、コントローラーを見てみましょう。
// @IT連載「Ajaxおいしいレシピ」用の名前空間オブジェクト
var ajaxrecipe = new Object();
ajaxrecipe.SmoSeoSampleController = Class.create({
// コンストラクタ
initialize: function() {
document.observe("dom:loaded", this.onLoadDOM.bind(this));
},
// DOMがロードされたときのイベントハンドラ
// タブのクリックイベントにイベントハンドラを設定する
onLoadDOM: function() {
$$('.tab').each(function(tab) {
tab.observe('click', this.onClickTab.bind(this));
}.bind(this));
// デフォルトのタブを開く
this.onClickTab();
},
// タブがクリックされたときのイベントハンドラ
// クリックされたタブのIDを取得しそのタブをアクティブ化する
onClickTab: function(event) {
var element;
if (event != null) {
element = event.element();
}
else {
// デフォルトは最初のタブを開く
element = $$('.tab')[0];
}
// ビューにタブ変更を依頼
ajaxrecipe.SmoSeoSampleView.changeTab(element.id);
}
});
new ajaxrecipe.SmoSeoSampleController(); |
最初に、コンストラクタが呼ばれます。コンストラクタの中では、DOMがロードされたらonLoadDOMメソッドが呼ばれるようにハンドラを設定しています。イベントハンドラの設定は、prototype.jsのobserveメソッドを使っています。
このメソッドの中では、以下のタブのクリックイベントに、onClickTabメソッドを設定しています。
<a href="javascript:void(0)" class="tab" id="tab-a">タブA</a>
<a href="javascript:void(0)" class="tab" id="tab-b">タブB</a>
<a href="javascript:void(0)" class="tab" id="tab-c">タブC</a> |
また、デフォルトのタブを開くために、onClickTabを引数なしで呼び出しています。
onClickTabメソッドではまず、開くべきタブを判定します。イベントオブジェクトがある場合は、Eventインスタンスのelementメソッドで取得します。
もし、イベントオブジェクトがない場合(=デフォルトのタブを開くためにonLoadDOMメソッドから呼び出されるケース)は、最初の要素を開くべきタブとして設定します。そして、ビューのchangeTabメソッドにその要素のIDを渡して、タブを開くように依頼します。
ビューのコードは次のようになります。ビューでは、与えられたIDのタブをアクティブ化し、それまでアクティブ化されていたタブは非アクティブ化します。また、アクティブ化されたタブのコンテンツをモデルから取得し、その内容で更新をします。
ajaxrecipe.SmoSeoSampleView = {
// 与えられたIDのタブをアクティブ化し、
// それまでアクティブ化されていたタブは非アクティブ化する。
// アクティブ化されたコンテンツで更新する。
changeTab: function(id) {
$$('.tab').each(function(tab) {
tab.removeClassName('inactive');
tab.removeClassName('active');
if (tab.id == id) {
tab.addClassName('active');
}
else {
tab.addClassName('inactive');
}
});
var contents = ajaxrecipe.SmoSeoSample.getContents(id);
$('contents').update(contents);
}
} |
モデルのコードは次のようになります。モデルはアクティブ化された指定タブのコンテンツをXMLHttpRequestで取得し、それを返します。
ajaxrecipe.SmoSeoSample = {
contents: null,
// クリックされたタブのコンテンツを
// XMLHttpRequestで取得して返す
getContents: function(id) {
new Ajax.Request(
window.location.protocol + '//' +
window.location.host +
window.location.pathname + 'contents/' + id + '.html',
{asynchronous: false,
method: 'get',
onSuccess: function(transport) {
ajaxrecipe.SmoSeoSample.contents
= transport.responseText;
}});
return ajaxrecipe.SmoSeoSample.contents;
}
}; |
いよいよ次ページからは、ステップ1のサンプルにSMO対応、SEO対応を行う方法について解説していきます。