小粋空間  -  a cheap joke and a play on words site

Movable TypeのパンくずリストをMicrodataに対応させる方法

Movable TypeのパンくずリストをMicrodataに対応させるカスタマイズを紹介します。

１．Microdataとは

Microdataとは、HTML文書の中にメタデータを埋め込むためのHTML5の仕様です。

パンくずリストをMicrodataに対応させることで、Googleの検索結果ページでパンくずリストを表示できるかもしれないということです。

Google、パンくずリストとサイト名をURLの代わりにモバイル検索結果で表示。構造化データで指定可能

ということで、以前エントリーした「Movable Typeでパンくずリストを作る」のテンプレートを元にカスタマイズしてみます。

このブログの各パーマリンクのパンくずリストもこのカスタマイズを対応させてみました。

ちなみにMicrodata対応していない状態でも、PCの検索結果ではこのようにパンくずリスト形式で表示されるようです。

２．カテゴリアーカイブページにパンくずリストを表示

カテゴリアーカイブページにパンくずリストを表示する場合のテンプレートは次のように変更します。

赤色が追加・変更部分です。

<div class="breadcrumb">
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="<$mt:BlogURL$>">
      <span itemprop="title">
        TOP
      </span>
    </a> &raquo;
  </span>
<mt:ParentCategories glue=" &raquo; </span>">
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="<$mt:CategoryArchiveLink$>">
      <span itemprop="title">
        <$mt:CategoryLabel$>
      </span>
    </a>
</mt:ParentCategories>
  </span>
</div>

Microdataの意味は、まずパンくずリストの各項目を「itemscopde」属性および「itemtype」属性を付与したspan要素で囲み、itemtype属性にパンくずリストタイプを意味する「http://data-vocabulary.org/Breadcrumb」の値を指定します。これでパンくずリストであることを示します。

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

次に、パンくずのリンクのa要素に「itemprop="url"」を付与します。

<a itemprop="url" href="<$mt:BlogURL$>">

最後に、パンくずの名前（カテゴリ）を「itemprop="title"」を付与したspan要素で括ります。

<span itemprop="title">

なお、span終了タグの中にパンくずマーク「»」を入れないといけないようなので、MTParentCategoriesタグのglueモディファイアにspan終了タグを記述しています。

<mt:ParentCategories glue=" &raquo; </span>">

最後のspan終了タグは、glueモディファイアで出力されない最後のパンくず名のためのものです（もうちょっといい方法があるかもしれませんがとりあえず）。

３．ブログ記事ページにパンくずリストを表示

ブログ記事ページにパンくずリストを表示する場合のテンプレートは次のように変更します。

赤色が追加・変更部分です。

<div class="breadcrumb">
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="<$mt:BlogURL$>">
      <span itemprop="title">
        TOP
      </span>
    </a> &raquo;
  </span>
<mt:ParentCategories glue=" &raquo; </span>">
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="<$mt:CategoryArchiveLink$>">
      <span itemprop="title">
        <$mt:CategoryLabel$>
      </span>
    </a>
</mt:ParentCategories>
<mt:if tag="EntryCategory"> </span> &raquo; </mt:if><$mt:EntryTitle$>
</div>

最後にMTEntryTitleタグで記事タイトルを出力している部分以外は２項と同じです。

MTEntryCategoryタグでspan終了タグを出力しているのは、glueモディファイアにspan終了タグを記述したので、最下層のパンくず名と記事タイトルをパンくずマークでつなぐためのものです。

<mt:if tag="EntryCategory"> </span> &raquo; </mt:if>

記事にカテゴリが割り当てられていない場合、MTParentCategoriesタグブロック内やMTEntryCategoryタグブロック内は表示されません。

２項でMTEntryCategoryタグを使っていないのはカテゴリアーカイブページでの適用が前提のためです。

４．参考サイト

参考サイトは下記です。ありがとうございました。

• Googleの検索結果ページでパンくずリストを表示するmicrodataの使い方