AjaxはSEOの天敵？

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

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

解題1：後から表示したいコンテンツは、あらかじめ隠しておく

　JavaScriptを利用して後から表示するコンテンツは、その文字列自体をJavaScriptで作ってしまうのではなく、あらかじめHTML内に存在させておいて、CSSなどで隠しておくと良いだろう。例えば、次のようにする。

<!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('areaContents').style.visibility = 'hidden';
	
	document.getElementById('btnClick').onclick = function() {
		document.getElementById('areaContents').style.visibility = 'visible';
	}
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input name="btnClick" type="button" id="btnClick" value="表示する" />
</form>
<div id="areaContents">JSで後からコンテンツを表示するようなスクリプト</div>
</body>
</html>

　ポイントは、先の「悪例2」のようにスタイルシートを用いて隠すのではなく、あくまでもJavaScriptを使って隠したり表示したりすることだ。こうすることで、JavaScriptが利用できない環境であれば、あらかじめ内容が表示された状態となるだけで、閲覧には支障がない。

　先の「悪例2」のようにスタイルシートで見えなくしてしまうとJavaScriptが利用できないが、スタイルシートは利用できるというユーザーには、コンテンツを見る術がなくなってしまうので気をつけよう。

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 読者投票
    今、使っているマシンのOSは？

    投票受付期間：2008年6月27日 〜 2008年7月11日
  • » 投票しないで結果だけ見る
  • 話題のタグ
Solaris RIA 小技 Windows MySQL C/C++ 仮想化 ブラウザ Off Topic Opera 開発環境 Apple Ruby 入門 ライブラリ Java Apache Tips Adobe Leopard SOA Internet Explorer PHP Firefox JavaScript Mozilla リファレンス Google Flash HTML Firefox 3 Microsoft Linux iPhone 3G CSS Mac OS X オープンソース iPhone Safari フレームワーク Eclipse イロハ Webデザイン iPod touch Ajax Database Python Webアプリケーション開発 server XHTML
  • 話題のタグを見る »