MovableTypeにタグクラウド(SEO対策済み)を設置する

このエントリーをはてなブックマークに追加

ブログのリニューアルをおこなったのですが、ついでにタグクラウドを設置してみました。(右メニューの一番下に設置してます。)
普通に設置しても面白くないので、SEOをふまえたタグクラウドにしてます。

タグクラウドを設置する利点

blogのエントリーを通常のカテゴリーとは別に、汎用性のある分類を行うことができます。

例えば、最近このblogでは『Twitter』に関する話題を取り扱うことが多いのですが、カテゴリーを作るほどではありません。

そんな場合『Twitter』のタグを設定しておけば、『Twitter』に関するエントリーの一覧を作ることができます。

参考:Twitterのタグページ

また、SEO上も有効で、タグでキーワードを設定すれば、そのキーワードの専門ページが1ページ作成されることになります。

基本的な設置方法

テンプレート内に以下の記述を行います。

<div class="module-tagcloud module">
	<h2 class="module-header">エントリー・タグ</h2>
	<div class="module-content">
		<ul class="module-list">
		<MTTags>
			<li class="module-list-item taglevel<$MTTagRank$>"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
		</MTTags>
		</ul>
	</div>
</div>

cssには次のスタイルシートを追加します。

.module-tagcloud .module-content {text-align: left; }
.module-tagcloud .module-content .module-list { list-style: none; }
.module-tagcloud .module-content .module-list .module-list-item { display: inline; }
.module-tagcloud .module-content .module-list li.taglevel1 { font-size: 19px; }
.module-tagcloud .module-content .module-list li.taglevel2 { font-size: 17px; }
.module-tagcloud .module-content .module-list li.taglevel3 { font-size: 15px; }
.module-tagcloud .module-content .module-list li.taglevel4 { font-size: 13px; }
.module-tagcloud .module-content .module-list li.taglevel5 { font-size: 11px; }
.module-tagcloud .module-content .module-list li.taglevel6 { font-size: 9px; }

これで再構築すればタグページが作成されます。

SEOを施した設置方法

SEOを施した設置方法を紹介します。

タグページのURLが少し長いのでURLの最適化を行い、検索エンジンにインデックスされやすいよう修正します。

URL最適化前

http://blog.webcreativepark.net/cgi/mt/mt-search.cgi?tag=Twitter&blog_id=1

URL最適化後

http://blog.webcreativepark.net/tag-Twitter.html

この方法は、.htaccessでmode_writeが設定できるサーバーでのみ利用可能です。

テンプレートに追加するのは以下の記述

<div class="module-tagcloud module">
	<h2 class="module-header">エントリー・タグ</h2>
	<div class="module-content">
		<ul class="module-list">
		<MTTags>
			<li class="module-list-item taglevel<$MTTagRank$>"><a href="<$MTBlogURL$>tag-<$MTTagName encode_url="1"$>.html"><$MTTagName$></a></li>
		</MTTags>
		</ul>
	</div>
</div>


href属性が基本的な設置方法とは異なりますので、気をつけてください。

次に.htaccessをダウンロードして、16行目に以下の一文を追加してアップしなおします。

	RewriteEngine on
	RewriteRule ^tag-(.*).html+ /cgi/mt/mt-search.cgi?tag=$1&blog_id=1
	# don't serve mtview.php if the request is for a real directory

これだけでタグページも通常のページのようなURLで表示されるようになります。

関連エントリー

Movable Typeのバックアップ方法
MovableTypeにダイナミック・パブリッシングを設定する
atomに改行を反映させる
関連するエントリーを表示する方法
グローバル・タグ・アトリビュートでURLエンコードする

スポンサードリンク

«MovableTypeからTwitterに投稿『PostToTwitter』 | メイン | blogを書く理由»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1288
トラックバック内容
» twitterとは from ITの話題
アルファがつかないギークにも大流行! IT系メディアにガンガン掲載されている twitter の面白さを簡単にメモしてみます。...
» MovableType:PostToTwitterプラグインを入れてみた from creazy photograph
いいのを見付けたので早速インストールしました。 でうまくいくか試すのを踏まえエン...
» googleのページランクが3⇒1へ! from 栃木県足利市の政治家,元栃木県議会議員,大豆生田実のブログ
突然、googleのページランクが3から1になってしまったので、なんと...
コメント

はじめまして。
タグページのデザインはどうやって変えるんでしょうか?

投稿者:peng | 2007年5月 7日 07:48

>pengさん

はじめまして。

テンプレート>システム>検索結果
がタグページのテンプレートファイルになります。(MT3.3以降)

検索結果と同じテンプレートを分岐で使い分けているので複雑ですが、ここを変更すればタグページのHTMLを変更することができますので試してみてください。

投稿者:西畑 | 2007年5月 7日 23:02

あ、こんなところにテンプレートがあったんですね。
今まで知らずにいて、このサイトを見るまでカスタマイズはできないのかと思ってました。
教えてくださってありがとうございました!

投稿者:peng | 2007年5月 8日 20:59

役立つことが沢山書かれていて、いつも参考にさせて頂いています。

質問なのですが、
最適化されたURLの元ファイル(http://blog.webcreativepark.net/tag-Twitter.htmlといったhtml)がどうやっても生成されません。

どうしたらいいでしょうか?

投稿者:イワオ | 2008年1月17日 13:20

>イワオさん

コメントありがとうございます。

この方法はhtmlを生成するのではなく、サーバーにhtmlがあるように表示してね、と命令する方法になります。

一部のサーバーでは、この命令を受け付けてくれないので、利用できないことがあります。

あと、.htaccessの

/cgi/mt/mt-search.cgi?tag=$1&blog_id=1

のパスを自身のblogのmt-search.cgiのパスに変更しないと利用できないこともあります。

投稿者:西畑一馬 | 2008年1月18日 19:26

なるほど!!!

おかげさまで解決しました^^

ありがとうございます!
これからも楽しみにしています!

投稿者:イワオ | 2008年1月19日 17:31

いつも、このタグ欄って、何?と思ってました。こんな便利なことができるんですね。すっきりしました。早速、チャレンジしてみたいと思います。

投稿者:ShimaQ | 2009年9月 8日 15:10

こんばんは。
ブログにタグクラウドを設置しましたが、その後どうすればいいのでしょうか?
タグクラウドの機能が付いているブログだと、キーワードを入力するだけで表示されますが、ウェブリブログにはタグクラウドの機能がありません。
なので、記事を書いた後、キーワードを入力する欄が無いのでどうしたらいいのでしょうか。
教えて下さい。

投稿者:ポンタ | 2009年12月 8日 19:32

>ポンタさん

本記事はMovableTypeについて書いております。
ウェブリブログに関しては利用したことがないのでちょっとわからないです。

投稿者:西畑一馬 | 2009年12月25日 07:21
コメントを投稿