AjaxはSEOの天敵？

たにぐちまこと（H2O Space.）
2008/02/06 08:00

H2O Spaceのたにぐち氏による好評連載「Ajax活用の5つのポイント」番外編が登場。

AjaxとSEOの関係を考える

　Ajaxを駆使したWebサイトは、SEOやアクセシビリティの点で不利だと言われることがある。JavaScriptを無効にすると、一切のコンテンツが表示されなくなってしまうためだ。

　しかし、ちょっとした気遣いで問題なく利用するコンテンツを作ることができる。ここでは、そんなテクニックを紹介しよう。

　まずは、悪い例を3つ続けて紹介する。

悪例1：JavaScriptで後からコンテンツを表示する

　たとえば、次のようなスクリプトを試してみよう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JSで後からコンテンツを表示するようなスクリプト</title>
<script type="text/javascript">
window.onload = function() {
	document.getElementById('btnClick').onclick = function() {
		document.getElementById('areaContents').innerHTML = '後から生成されるコンテンツです';
	}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input name="btnClick" type="button" id="btnClick" value="表示する" />
</form>
<div id="areaContents"></div>
</body>
</html>

　ボタンをクリックすると、内容が表示される（図1）。しかし、音声ブラウザや検索サイトのクローラはJavaScriptで生成される文字列を見ることができない。そのため、「後から生成されるコンテンツです」という情報を得ることはできなくなってしまうのだ。

図1 アクセシビリティの点でよくない例といえる 図1 アクセシビリティの点でよくない例といえる
記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Mac OS X MySQL C/C++ 小技 仮想化 Mozilla Ruby on Rails iPod touch 開発環境 Internet Explorer JavaScript Off Topic ブラウザ オープンソース Safari Firefox 3 Eclipse Flash リファレンス SOA XHTML HTML iPhone IDE Google 入門 Leopard server Linux Tips Ruby Adobe Python Microsoft Firefox PHP Database Ajax Windows RIA CSS Webアプリケーション開発 まとめ イロハ Webデザイン フレームワーク Apache ライブラリ Apple Java
  • 話題のタグを見る »