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というテーマにある「イベント・セミナー」というコンテンツタイプはこんな風になっています。
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対応版をリリース予定です。
リリース時期、詳細の仕様や ライセンスについてはまだまだ未確定なのですが、
まずは意思表明しました! (*^^*)
カテゴリー: CMS・MovableType , SEO・サーチエンジン最適化
タグ:
« 前の記事:3分で読めるNGO/NPOウェブ活用:ウェブは基本的に怪しい。だから「ソーシャルプルーフ」を載せてみては?
» 次の記事:冬期休暇のお知らせ(2017年12月28日~2018年1月4日)
アークウェブの本
Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用
内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む
新着はてブ
カテゴリー
- Shopify(ショピファイ)オンラインショップ構築
- NGO・NPO向け情報
- スマートフォン
- だれもが使えるウェブコンクール
- mixiアプリ
- OpenSocial (システム開発)
- アークウェブのCSR
- A-Form, A-Member, A-Reserve(MTプラグイン)
- Ruby on Rails(システム開発)
- necoったー
- Miqqle
- WebSig24/7
- ecoったー
- ビッグイシュー(The Big Issue)
- CSR(企業の社会的責任)
- マッシュアップ
- RIA (システム開発)
- セキュリティ(システム開発)
- 唐松(アクセス解析)
- Ajax (システム開発)
- テスト(システム開発)
- データベース
- PukiWiki
- Web 2.0
- SEO・サーチエンジン最適化
- XP・アジャイル(システム開発)
- Web・ITニュースクリップ
- Webアクセシビリティ
- Webデザイン
- SEM・サーチエンジン広告
- Webユーザビリティ
- CMS・MovableType
- Zen Cart(オンラインショップ構築)
- Snippy(SNS・ソーシャルブックマーク)
- アークウェブ
- オープンソース
- CMS(コンテンツマネジメント・システム)
- Webマーケティング
- AMP
- SNS