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

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