2013/09/30

MovableTypeでブログ記事にパンくずリストを表示する方法

MovableTypeでブログ記事にパンくずリストを表示する方法

MovableTypeでブログ記事にパンくずリストを表示する方法をご紹介します。

簡単なコードを追記するだけで、記事が属するカテゴリー階層も表示できますので検索エンジンにもユーザーにとっても階層構造を把握しやすくなり、SEOに強くなります。一度設定してしまえばパンくずリストは自動生成されますのでぜひ設定しておきましょう。

パンくずリスト サンプルコード

パンくずリストを

TOP > 親カテゴリー > メインカテゴリー > 記事のタイトル

というようにカテゴリー階層を含めて出力するように設定します。

<p><a href="<$mt:BlogURL$>">トップ</a> >
<mt:IfNonEmpty tag="EntryCategory">
	<mt:ParentCategories glue=" > ">
    	<a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
    </mt:ParentCategories>
	>
</mt:IfNonEmpty>
<span><$mt:EntryTitle$></span>
</p>

<mt:IfNonEmpty tag="EntryCategory">で囲むことで記事が属するカテゴリーが無い場合は、囲った部分が出力されないようになります。なのでカテゴリーが無い場合のパンくずリストは

TOP > 記事のタイトル

となります。

出力されるコード

<p><a href="トップページURL">トップ</a> >
	<a href="親カテゴリーURL">親カテゴリー</a>
	>
	<a href="メインカテゴリーURL">メインカテゴリー</a>
	>
	<span>記事のタイトル</span>
</p>

記事が属するカテゴリーが無い場合、カテゴリーの部分がまるっと無くなります。

まとめ

今回のコードはブログ記事のテンプレートにのみ適応させることが出来ます。

パンくずリストを設置することは、SEOには非常に重要でかつ基本的な施策になります。ユーザビリティの観点からも設置しない手はありません。今回のコードはMTタグ以外の部分は変更しても問題ありませんので、HTMLやCSSでサイトデザインに合わせてカスタマイズして利用して下さい。