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

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

Posted at April 22,2015 12:55 AM
Tag:[Category, Customize, MovableType]

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

1.Microdataとは

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

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

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

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

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

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

PCの検索結果

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

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

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

<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モディファイアで出力されない最後のパンくず名のためのものです(もうちょっといい方法があるかもしれませんがとりあえず)。

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

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

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

<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タグで記事タイトルを出力している部分以外は2項と同じです。

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

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

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

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

4.参考サイト

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)