ホーム » ビジネスブログ » SEO・サーチエンジン最適化 »

Movable Type 7と構造化データのステキな関係

2017年12月18日

Movable Type 7と構造化データのステキな関係

投稿者 八木

これは Movable Type Advent Calendar 2017 18日目の記事です。

こんにちは、ディレクターの八木です。
Movable Type は 2018年4月 の メジャーアップデート(MT7へ)に向けて開発が進められています(ワクワク)。
丁度 1ヶ月位前に、 MT7 Developer Preview α2版 がリリースされたので、私も暇を見つけてはポチポチと触ってみています。

MT7 では、新たにコンテンツタイプ、コンテンツフィールドという概念が導入されます。このコンテンツタイプ・コンテンツフィールド、 Google Search やAMPプロジェクト で地味に重要度を増してきた「構造化データ(Structured Data)」ととても相性がよさそうなんです。

この記事では、自分の MT7 の新機能のお勉強を兼ねて、MTテンプレートで構造化データを出力するところを書いてみようと思います。

コンテンツタイプ、コンテンツフィールドの紹介

コンテンツタイプとは(公式サイトの記事)
https://www.movabletype.jp/documentation/mt7/designers-guide/designing-content-type/about-content-type.html

MT6までは 「記事」「ウェブページ」というお仕着せのデータ構造しか持てませんでした。 "Webページ"を生成・管理する用の入れ物って感じで、本当に管理したいコンテンツが何であれ、私たちにできるのはせいぜいカスタムフィールドでメタ属性を増やしたり、”ブログ”を「製品マスター(ブログ)」だの「会場(ブログ)」だの に見立て、その組み合わせでなんとかする感じでした。

嬉しいことに、MT7では管理したいコンテンツにあわせた データ構造を定義できるようになる模様です。

私の理解では、データベース?!、みたいな感じです。コンテンツタイプが DB でいうエンティティ、コンテンツフィールドがアトリビュートみたいな関係かなーと思います。

コンテンツフィールドとして 他のコンテンツタイプを指定でき、これが コンテンツ同士をリレーションするイメージで使えるようなのです。

例えば、Jungfrauというテーマにある「イベント・セミナー」というコンテンツタイプはこんな風になっています。

contentTypeImage.png

Google 推奨 「構造化データ(Structured Data)」 のおさらい

Structured dataとは(Google Search のGuideページ、英文)
https://developers.google.com/search/docs/guides/intro-structured-data

  • 構造化データは、Webページの内容を、Google などのロボットにも理解できるようタグ付けしたものです。 schema.org のボキャブラリを、 JSON-LD 形式で記述する方法が推奨されています。
  • JSON-LD は昔からある Microdata や RDFa と違って 読みやすく、CMSでも扱いやすいです。
  • 自サイトのページに適切な構造化データを実装すると、Google Searchが吐く検索結果をリッチで魅力的なものにし、ユーザに自サイトで発信する情報を的確に届ける(結果的に自サイトへの流入を助ける)効果があります。
  • 特にモバイル向け検索結果ページで、AMPページをカルーセル表示してほしいと望むなら、正しい構造化データの実装は必須なので覚えておいた方がいいです。
  • もちろん従来型のページ(non-AMPページ)でも、検索結果の見え方が違ったり、トップストーリー枠にカルーセル表示されたり、ナレッジグラフ枠に自社の詳細情報がロゴやソーシャルリンク付きで表示されたりとメリットが多いです。

コンテンツタイプ「イベント・セミナー」からEventタイプの構造化データを出力する

それでは、前述の テーマ「Jungfrau」の「イベント・セミナー」詳細ページに、EventタイプのJSON-LDを埋め込む想定でやってみましょう。

EventタイプのJSON-LD出力サンプルは次のようなものです。

{
  "@context": "http://schema.org",
  "@type": "Event",
  "name": "MT7技術勉強会&忘年会 2017〜行く年来る年〜",
  "location": { //会場情報
            "@type": "Place",
            "name": "(株)アークウェブ大会議室",
            "address": "東京都中央区銀座2-9-16 鹿倉ビル5F"
            }
  },
  "startDate": "2017-12-20T19:30-09:00", // イベント開催日時
  "endDate": "2017-12-20T21:00-09:00",  // イベント終了日時
  "image": "https://www.ark-web.jp/images/hoge.png",
  "description": "MT7の技術勉強会です。MT界のレジェンド山田 太郎さんによるセミナーの後、ひとり一品ずつ持ち寄るポットラックパーティー形式の懇親会を開きます とかなんとか。", // イベントの説明
  "performer": { // 出演者情報
             "@type": "Person",
             "name": "山田 太郎"
             }
}

Eventタイプには、この他にもチケット情報などいくつか Googleが推奨する要素があります。「Jungfrau」テーマには該当するコンテンツフィールドが定義されていないので今回は省略しました。
実際にサイト構築する時は、情報設計段階で必要な要素をコンテンツデータやコンテンツフィールドとして定義したらよいと思います。

Jungfrauテーマの「イベント・セミナー」のコンテンツフィールドを当てはめるとこんな感じです。

{
  "@context": "http://schema.org",
  "@type": "Event",
  "name": "タイトル",
  "location": {
            "@type": "Place",
            "name": "会場.会場名",
            "address": "会場.住所"
            }
  },
  "startDate": "開催日時(ISO8601フォーマットで)",
  "endDate": "終了日時(ISO8601フォーマットで)",
  "image": "メイン画像",
  "description": "本文の一部 or こんな方におすすめの内容",
  "performer": { // 講師氏名
            "@type": "Person",
            "name": "講師.講師名"
            }
}

MTタグで書いてみます。

コンテンツタイプ「イベント・セミナー」のコンテキスト内であれば、
イベントタイトル(name要素)出力は次のように書けば出ます。

// "name"要素を出力する部分。
"name": "<mt:ContentField label="タイトル"><mt:Var name="__value__"></mt:ContentField>"

開催日時や終了日時には、ISO-8601フォーマットを指定します。

// "startDate"要素を出力する部分
"startDate": "<mt:ContentField label="開催日時" format_name="iso8601>
                        <mt:Var name="__value__"></mt:ContentField>"

会場.会場名や、会場.住所 のように、フィールドタイプのデータ型がコンテンツタイプの場合は入れ子にすると呼び出せます。

//location要素を出力する部分
"location": {
    "@type": "Place",
<mt:ContentField label="会場">
    "name": "<mt:ContentField label="会場名"><mt:Var name="__value__"></mt:ContentField>",

    "address": "<mt:ContentField label="住所"><mt:Var name="__value__"></mt:ContentField>"
</mt:ContentField>
	}

講師名も同様です。

// "performer"要素を出力する部分
"performer": { // 講師氏名
    "@type": "Person",
    "name": "<mt:ContentField label="講師">
                             <mt:ContentField label="講師名"><mt:Var name="__value__"></mt:ContentField>
                     </mt:ContentField>"
  }

ちなみに、「イベント・セミナー」のコンテキスト外で使う場合は、
次のようにmtContents ブロックタグで囲んであげます。書き方に既視感ありますね。

  <mt:Contents name="イベント・セミナー" lastn="3">
    <mt:ContentsHeader>ループ冒頭の処理</mt:ContentsHeader>
     (各コンテンツデータの処理を書く)
       <mt:ContentField label="タイトル"><mt:Var name="__value__"></mt:ContentField> など
    <mt:ContentsFooter>ループ最後の処理</mt:ContentsFooter>
  </mt:Contents>

以上、Jungfrauテーマのテンプレートを参考にしながらコンテンツフィールドの出力部分を書いてみました。
複数のブログとカスタムフィールド、多階層にカテゴリを組み合わせるなどして職人芸的にデータ構造設計していたMT6時代と比べると、MT7のコンテンツタイプ/コンテンツフィールドのしくみは 構造化データ出力一つとっても素直になじむ印象を持ちました。

現時点ではα版なので正式版に向けて仕様が変わる部分もあるかと思いますが、
MT7の新しいデータ構造のイメージをつかむ参考になれば幸いです。

お知らせ

A-Form, A-Member, A-ReserveはMT7対応版をリリース予定です。
リリース時期、詳細の仕様や ライセンスについてはまだまだ未確定なのですが、
まずは意思表明しました! (*^^*)

投稿者 八木 : 2017年12月18日 22:32

カテゴリー: CMS・MovableType , SEO・サーチエンジン最適化

タグ:


Movable Type用高機能メールフォーム生成プラグイン A-Formの詳細へ
Movable Type用会員限定サイトプラグイン A-Memberの詳細へ
Movable Type用予約サイト構築プラグイン A-Reserveの詳細へ
ARK-Web×CSR(企業の社会的責任)

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

    (終了しました)

RSS配信

 

サービスおよびソリューション一覧


最新情報・投稿をチェック


このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Pro 6.3.8