AjaxはSEOの天敵？

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

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

悪例2：隠したエラーメッセージを表示するスクリプト

　たとえば、次のようなフォームを使ったWebページを見てみよう。

<!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>隠したエラーメッセージを表示するスクリプト</title>
<script type="text/javascript">
window.onload = function() {
	document.getElementById('myname').onblur = function() {
		if (document.getElementById('myname').value == '') {
			document.getElementById('areaError').style.visibility = 'visible';
			return false;
		}
	}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label for="myname">お名前:</label>
  <input name="myname" type="text" id="myname" size="35" maxlength="256" />
  <input name="btnSend" type="submit" id="btnSend" value="送信する" />
</form>
<div id="areaError" style="color: #FF0000; visibility: hidden">* お名前は必ずご記入ください</div>
</body>
</html>

　テキストフィールドに何も記入せずにカーソルをはずすと、隠してあったエラーメッセージを表示される（図2）。しかし、ここで隠せているのはJavaScriptが利用できるWebブラウザのみ。音声ブラウザの一部やクローラでは、常時エラーメッセージが表示された状態になってしまうため、異常を見つけることができなくなってしまう。

図2 Webブラウザでのみ、エラーメッセージを表示できている 図2 Webブラウザでのみ、エラーメッセージを表示できている
記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
10/23 ZDNet Japan Social Technology Conference開催！
ソーシャルテクノロジーをビジネスに利用する
米フォレスター・リサーチ社 シニアアナリスト Jeremiah K.Owyang氏を迎え、同氏が提唱するソーシャルテクノロジーを効果的に活用方法するための方法『POST』を日本で初めて紹介する注目のリアルイベント
  • 今日のトップ記事
  • 昨日
  • 2日前
  • 5日前
  • 6日前
  • 7日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Apple Webサービス ソフトウェア開発 Off Topic Webデザイン iPhone iPhone 3G iPod touch モバイル 仮想化ソフトウェア Database 入門 携帯電話機 Mac OS X ユーザーインタフェース Adobe Windows JavaScript 仮想化 Firefox リファレンス Firefox 3 Safari ブラウザ 脆弱性 小技 HTML Tips プロジェクト管理 データベース RIA CSS Java 開発環境 Google Ajax Mozilla Python PHP SOA Internet Explorer UI オープンソース Linux レビュー デザイン server Flash Webアプリケーション開発 プログラミング言語
  • 話題のタグを見る »