コンテンツを動的に切り替えることができる「Ajaxタブインターフェイス」を使って、サイドバーに並んだタグクラウドや月別アーカイブページへのリンクを「ソース上」取り除こうと思います。
一般的なタブ切り替え機能は、ページ内の各ブロックを表示・非表示で切り替えて実現させるので、CSSを切った状態では全てのリンクが見えますし、検索エンジンには当然ですがリンクとして認識されます。
ページ全体の発リンク数を抑えることが、SEOに効果のある事なのかどうかは別として、Ajax Tab を使えば、少なくとも HTML のソースをすっきりさせることはでき、ページの表示スピードにも多少の良い影響を及ぼすはずです。
Yahoo! JAPAN トップページでも
例えば3年間毎月一つ以上の記事を投稿し、カテゴリーが10個、タグが50個あるブログの場合は、それだけで「96個」のリンクが存在します。ところが、Ajaxを使えば「13個」にまで減らすことができるのです。（カテゴリー一覧をページのインライン要素とした場合）
今回は、「カテゴリー一覧」「タグクラウド」「月別アーカイブ」の3つを切り替えるタブコンテンツをサイドバーに設置したいと思います。
Ajax対応のタブスクリプトを用意
単体で動作し、軽量・軽快な Ajax Tabs Content Script を使ってみます。
jquery.tabs の利用はこちらの記事もご覧ください
Ajax Tabs Content Script をダウンロード
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
ページの中ほどにある「ajaxtabscontent.zip」というリンクです。（現在Ver. 2.2） ここでサンプルを見ることができます。
ajaxtabs.jsの10行目を必要に応じて書き換える
ページ（ファイル）の読み込み中に表示されるアニメーション画像の調整。
// デフォルト
<img src='ajaxtabs/loading.gif' /> Requesting content...
// 例 日本語に変える
<img src='ajaxtabs/loading.gif' /> 読み込んでいます...
// 例 CSS で画像指定
<p class='loading'>チョトマテクダサイ...</p>
-- CSS --
.loading {
padding-left: 20px;
background: url(ajaxtabs/loading.gif) no-repeat 0 50%;
}アップロード
任意の場所に一式をアップロードし、<head></head> 内にスクリプトとCSSファイルを読み込む。
コメント部分は著作権表記で、この記述をすれば個人・商用に関わらず無償で利用することができます。
<link rel="stylesheet" type="text/css" href="/ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="/ajaxtabs/ajaxtabs.js" charset="utf-8">
/***********************************************
* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>Ajaxで読み込むページを作る
-
テーマに page-tags.php というテンプレートを用意し、スラッグを tags としたページを作成。テンプレートに、タグクラウドを表示するコードだけを記述してアップロード。
<?php wp_tag_cloud(); ?> -
テーマに page-archives.php というテンプレートを用意し、スラッグを archives としたページを作成。テンプレートに、月別アーカイブリストを表示するコードだけを記述してアップロード。
<ul>
<?php wp_get_archives(); ?>
</ul>
テンプレートは文字コードの指定をしていないので、直接日本語を書くと文字化けするかもしれません。その場合は、header charset を指定すれば回避できると思います。
<?php
header('Content-type: text/html; charset=UTF-8');
echo '<h3>月別アーカイブ'</h3>';
?>
/*** あるいは mb_convert_encodingを使う（UTF-8で保存した場合） ***/
<h3><?php
$str = "月別アーカイブ";
echo mb_convert_encoding($str,"UTF-8","UTF-8");
?></h3>sidebar.php の編集
<!-- ナビゲーションタブ -->
<ul id="tabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">カテゴリー</a></li>
<li><a href="/tags" rel="countrycontainer nofollow">タグ</a></li>
<li><a href="/archives" rel="countrycontainer nofollow">アーカイブ</a></li>
</ul>
<!-- コンテンツ部分 -->
<div id="tabcontents">
<ul>
<?php wp_list_categories('title_li=&depth=1&use_desc_for_title=0'); ?>
</ul>
</div>
<!-- スクリプト -->
<script type="text/javascript">
var countries=new ddajaxtabs("tabs", "tabcontents");
countries.setpersist(true);
countries.setselectedClassTarget("link");
countries.init();
</script>- 2、8、15行目
- ナビゲーションタブの「ul」と、内容を表示するコンテンツ部分の「div」に任意の id をつけ、script 内にカンマ区切りでその id を記述する。
-
ナビゲーションタブ「ul」 class="shadetabs" は、用意されている css で定義されているクラス名。
- 3行目
- ページのインライン要素（9～11行）として表示するカテゴリーに、 rel="#default" と class="selected" を記述します。 サンプルでは href="#" となっていますが、他のスクリプトの影響などで、意図しない挙動になる可能性（ページ内アンカーとして機能）があるため href="javascript:void(0);" にしてもいいかもしれません。
-
class="selected" を「a」ではなく「li」 につけて機能させたい場合は、17行目の"link" を "linkparent" に変更。
3行目 : <li class="selected"><a href="#" rel="#default">カテゴリー</a></li>
17行目 : countries.setselectedClassTarget("linkparent");
- 4、5行目
- ajax で読み込むページには rel="countrycontainer" を。これらのページは検索エンジンにインデックスされたくないので、 nofollow を追加し、 robots.txt にも以下を記述しておきます。
-
Disallow: /tags Disallow: /archives
また、プラグイン XML Sitemap Generator を利用している場合は、「以下の投稿または固定ページを含めない」にページIDを追加。
- 14～19行目
- 最後に script を記述。
出来上がり
編集した sidebar.php をアップロードすれば完成です。 ajaxtabs.js はクッキーを利用するので、ページを移動したり再読み込みしても、最後に選択したタブの内容が表示されます。
ページの再利用？
タグクラウドや月別アーカイブ “だけ” を表示するページを作りました。せっかくなので他のページに流用します。ページでサイトマップを用意して、そこに page-tags.php と page-archives.php をファイルとして include させます。
<div class="page">
<h2>サイトマップ</h2>
<h3>タグ</h3>
<?php include(TEMPLATEPATH . '/page-tags.php'); ?>
<h3>アーカイブ</h3>
<ul>
<?php include(TEMPLATEPATH . '/page-archives.php'); ?>
</ul>
</div>SEO効果のほどは？
最近では、アーカイブへのリンクをドロップダウンにしたり、タグクラウドを表示していないブログも多く見かけるようになりました。また、Googleのマット・カッツ氏の意見も参考になります。
タグはSEOに効果があるのか 段落まるまるタグで埋め尽くしている場合があるね。時間をかけてタグを書いてるんだろうけど、そういうのを見ると笑っちゃう。必要ないよ。そのタグのキーワードは記事のコンテンツにすでに含まれているからね。タグに入れてもほとんど違わないね。
SEO目的でタグに熱中しようとは思わない。タグを楽しむ人もいるだろうけど、時間の無駄だよ。（リンクを爆発的に増やす現時点で最強の方法 など10記事 より）
タグは、閲覧者にナビゲーションとして提供するものですが、重複コンテンツを生む事もあるので、検索エンジンは重要視していないのかもしれません。
で、効果はあった？
分かりません！