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にログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Windows Vista JavaScript Windows XP 小技 アプリケーション Webサービス PHP モバイル RIA Mac OS X 仮想化 OS ブラウザ Windows 7 WebKit Off Topic データベース インストール ソフトウェア開発 マイクロソフト Flash UI CSS Microsoft iPod touch Windows Internet Explorer 脆弱性 Ajax Safari Google Tips Database Chrome iPhone 3G リファレンス iPhone Opera Mozilla 開発環境 Firefox プログラミング言語 Linux Webデザイン HTML Apple セキュリティ Java オープンソース Firefox 3
  • 話題のタグを見る »