コンテンツを動的に切り替えることができる「Ajaxタブインターフェイス」を使って、サイドバーに並んだタグクラウドや月別アーカイブページへのリンクを「ソース上」取り除こうと思います。

一般的なタブ切り替え機能は、ページ内の各ブロックを表示・非表示で切り替えて実現させるので、CSSを切った状態では全てのリンクが見えますし、検索エンジンには当然ですがリンクとして認識されます。

ページ全体の発リンク数を抑えることが、SEOに効果のある事なのか分かりませんが、Ajax Tab を使えば、少なくとも HTML のソースをすっきりさせることはでき、ページの表示スピードにも多少の良い影響を及ぼすはずです。


Yahoo! JAPAN トップページでも

例えば3年間毎月一つ以上の記事を投稿し、カテゴリーが10個、タグが50個あるブログの場合は、それだけで「96個」のリンクが存在しますが、Ajaxを使えば「13個」にまで減らすことができます。（カテゴリー一覧をページのインライン要素とした場合）

最近の記事とコメントの切り替えなどにも利用できますが、今回は、「カテゴリー一覧」「タグクラウド」「月別アーカイブ」の3つを切り替えるタブコンテンツをサイドバーに設置したいと思います。

Ajax対応のタブスクリプトを用意

jQueryのプラグインとして利用できる「jquery.tabs」もいいですが、単体で動作し、軽量・軽快な Ajax Tabs Content Script を使ってみます。

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>
   .loading {
        padding-left: 20px;
        background: url(ajaxtabs/loading.gif) no-repeat 0 50%;
    }

アップロード

任意の場所に一式をアップロードし、<head></head> 内にスクリプトとCSSファイルを読み込む。

3～7行目は著作権表記で、この記述をすれば個人・商用に関わらず無償で利用することができます。

<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で読み込むページを作る

  1. テーマに page-tags.php というテンプレートを用意し、スラッグを tags としたページを作成。テンプレートに、タグクラウドを表示するコードだけを記述してアップロード。

    <?php wp_tag_cloud(); ?>

  2. テーマに page-archives.php というテンプレートを用意し、スラッグを archives としたページを作成。テンプレートに、月別アーカイブリストを表示するコードだけを記述してアップロード。

    <ul>
<?php wp_get_archives(); ?>
</ul>

テンプレートは文字コードの指定をしていないので、直接日本語を書くと文字化けするかもしれません。その場合は、php echo を使えば回避できると思います。

/*** echo だけ ***/
<h3><?php echo '月別アーカイブ'; ?></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行目
    ナビゲーション部分の要素（2行目 ul）と内容を表示する要素（8行目 div）に任意の id をつけ、15行目のscript 内にカンマ区切りでその id を記述する。

    2行目 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記事 より）

タグは、閲覧者にナビゲーションとして提供するものですが、重複コンテンツを生む事もあるので、検索エンジンは重要視していないのかもしれません。

で、効果はあった？
分かりません！

関連するエントリー
jQuery UI Tabs で Ajax、Cookie、キャッシュを使ったタブコンテンツを作りたい