AjaxはSEOの天敵？

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

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

解題3：リンク要素はリンクを張ってキャンセルする

　リンク要素にJavaScriptを利用するときは、href属性に「#」や「javascript:void(0)」を指定せず、正しくリンクを張るべきである。その上でキャンセルをしよう。

<!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">
function nextPage() {
	document.getElementById('areaContents').innerHTML = '<p>2ページです</p>';
}
</script>
</head>

<body>
<div id="areaContents">
<p>1ページ目の内容です</p>
</div>
<p><a href="page2.html" onclick="nextPage(); return false;">次のページへ</a>»</p>
</body>
</html>

　a要素には、page2.htmlというファイルにリンクを張る。その上で、onclickイベントに「return false;」と記述すると、リンクがキャンセルされてどこにもジャンプしなくなるという仕組みを利用している。そして、JavaScriptが利用できない環境やクローラは、通常通りのリンクとしてpage2.htmlにジャンプできるというわけだ。

　当然、page2.htmlにはJavaScriptで表示させるコンテンツと同じ内容を準備しておこう。場合によっては、page2.htmlを読み込んで表示するといった仕組みにした方がよいだろう。

　このように、JavaScriptを利用したWebサイトは、ちょっとした工夫で十分にアクセシブルで、SEO的にも問題の無いサイトを作ることができる。JavaScriptを過度に怖がったり嫌がったりせず、ユーザーに快適な操作性や体験を提供できるように工夫してみると良いだろう。

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