MD-Blog_Web System

今回は、Movable Typeを使って、ちょっとした小技を効かせるだけで、「構造化データ」を出力できる！というTipsをご紹介します。

構造化データとは？

構造化データとは何ぞやということで、Googleさんから引用すると...

ページに構造化データを含めて、ページの内容についての明白な判断材料を提供すると、Google でそのページをより正確に理解できるようになります。
構造化データとは、ページに関する情報を提供し、ページ コンテンツ（たとえばレシピのページでは、材料、加熱時間と加熱温度、カロリーなど）を分類するための標準化されたデータ形式です。

ということです。

構造化データでどう変わる？

構造化データに対応すると、Googleの検索結果ページに影響を与えます。

たとえば、パンくず（サイトパス）だと、以下のようにフォルダ名から任意の名称に変更できます。
例えば「MD Shop」というECサイトがあったとして、構造化データを適用すると、そのURLが次のように表示されるようになります。

www.md-shop.com › store › tokyo
↓　↓　↓　↓　↓　↓　↓
www.md-shop.com › 店舗情報 › 東京都

見た目でわかりやすくなりますね。

さらに、例えばレシピのページだと、Googleの検索結果上でそのまま料理の写真や調理時間などが表示されるようになります。

構造化データの形式

Webページに構造化データを対応させるためには、いくつか形式があるのですが、そのうち「microdata」「RDFa」形式は、HTMLタグ属性として追加していくので、既存のサイトには適用しずらいでしょう。

なので、最近、Googleが推奨しているのは「JSON+LD」形式です。

JSON+LD形式だと、HTMLとは別に<script>タグで構造化データを記述します。
HTMLの構造に左右されないので、既存のサイトに対する改修方法としては、おすすめです。

構造化データで便利なツール

構造化データテストツール

https://search.google.com/structured-data/testing-tool?hl=ja
コードもしくはページのURLを入力して、チェックすることができます。

構造化データマークアップ支援ツール

https://www.google.com/webmasters/markup-helper/
読み込んだページの個所を選択していくだけで、構造化データができます。

パンくず（サイトパス）を、Movable Typeのテンプレートで実装してみる

記事詳細ページのテンプレートの場合、ブログトップ・カテゴリ・記事のデータを取得して、配列にして出力します。
MTタグでテンプレートを書くとこんな感じです。

<mt:SetVarBlock name="saitePath-json-array" function="push">
{"@id": "<$mt:BlogURL remove_host"1"$>","name": "<$mt:BlogName$>"}
</mt:SetVarBlock>

<mt:IfArchiveTypeEnabled archive_type="Category">
<mt:ParentCategories>
<mt:SetVarBlock name="saitePath-json-array" function="push">
{"@id": "<$mt:CategoryArchiveLink remove_host"1"$>","name": "<mt:CategoryLabel decode_html="1" remove_html="1">"}
</mt:SetVarBlock>
</mt:ParentCategories>
</mt:IfArchiveTypeEnabled>

<mt:SetVarBlock name="saitePath-json-array" function="push">
{"@id": "<$mt:Var name="CanonicalURL"$>","name": "<$mt:Var name="pageTitle"$>"}
</mt:SetVarBlock>

以上の配列を、構造化データのJSON+LDに挿入して、完成です。

<mt:Ignore><!-- ▽構造化データ：JSON-LD▽--></mt:Ignore>
<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "<$mt:WebsiteURL$>/",
    "name": "<$mt:WebsiteName"$>"
    }
  }

<mt:Loop name="saitePath-json-array">
  ,{
   "@type": "ListItem",
  "position": <$mt:Var name="__counter__" op="++"$>,
  "item":
   <$mt:Var name="__value__"$>
  }
</mt:Loop>

 ]
}
</script>
<mt:Ignore><!-- △構造化データ：JSON-LD△--></mt:Ignore>

ページの下部にぺろっと置いておくだけで、検索結果がちょっと素敵になるので、やらない手はないですね。
ぜひ実装してみてください。