schema.orgを使ってイベント情報を使ってマークアップする際に使うタイプやプロパティのまとめです。 今回は10/15にある「マカベン」の情報をお借りしました!
タイプ別プロパティ一覧
全部ではないですが、よく使われそうなもの、使ったものを抜粋。
タイプ:Event
プロパティ | 説明 |
location | 開催場所(type : Place 下記参照) |
---|---|
organizer | 主催者 |
performer | パフォーマー(出演者) |
startDate | イベントの開催日時 |
eventStatus | イベントのステータス |
attendee | 出席者 |
url | イベントのURL |
description | 説明 |
タイプ:Place / PostalAddress
Placeのプロパティ | 説明 |
address | 住所(type : PostalAddress 下記参照) |
---|
PostalAddressのプロパティ | 説明 |
addressCountry | 国 |
---|---|
addressRegion | 都道府県 |
postalCode | 郵便番号 |
addressLocality | 市区町村 |
streetAddress | 市区町村以降(番地など) |
タイプ:Map / VenueMap
Mapのプロパティ | 説明 |
mapType | マップの種類(type : VenueMap 下記参照 linkで記述する) |
---|
VenueMapのプロパティ | 説明 |
url | マップのURL |
---|
Mapのプロパティはたくさんありますが、基本使われているのはこれだけが多いようです。
マークアップ方法
実際にマークアップしたものはこちら。
構造化データマークアップ前
<h1>名古屋マークアップ勉強会 10/15</h1> <h2>日時</h2> <time datetime="2016-10-15">2001/10/15 13:00</time> <h2>開催場所</h2> <p>ベースキャンプ名古屋</p> <p> <span itemprop="addressLocality">名古屋市</span> <span itemprop="streetAddress">中村区名駅3-18-5 モンマートビル5F</span> </p> <a itemprop="url" href="https://www.google.com/maps/place/%E3%83%99%E3%83%BC%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97%E5%90%8D%E5%8F%A4%E5%B1%8B/@35.1727684,136.8852383,17z/data=!4m12!1m6!3m5!1s0x600376dc919b8655:0x5bbf0168ec8292bb!2z44OZ44O844K544Kt44Oj44Oz44OX5ZCN5Y-k5bGL!8m2!3d35.172764!4d136.887427!3m4!1s0x600376dc919b8655:0x5bbf0168ec8292bb!8m2!3d35.172764!4d136.887427">マップを見る</a></span> <h2>詳細</h2> <p>基本的には先生が来る勉強会ではなく、お菓子をつまみながらみんなで勉強できる気楽な勉強会を目指しています。<br> 今回のテーマは「話したいことを話す」です。久しぶりの開催なので、みなさん何かネタが溜まっていると思うので、当日はおもいっきり話していただけたらと思います。今悩んでいることや他の方に意見を聞きたいことなど、とくにオチがある話ではなくても大丈夫です。それも含めてわいわいみんなで相談できる機会になるといいと思っています。<br> 勉強会の流れとしては、2時間ほど、有志の方に10〜30分ほど発表してもらうミニセッションの時間を用意しています。どんな内容でも大丈夫なので、みなさんのお話をお待ちしています。<br> そして、今回は新しく「ディスカッションボックス」というのを用意しています。みなさんの中から課題を募集して、その課題をお題にしてみんなで話し合う予定です。みなさんの普段の疑問をお持ちよりください。<br> 最後は、「もくもく会」を予定しています。みんなで各々気になることについて調べる会です。せっかく外に出て勉強しているので、周りの方にどんどん聞いてみましょう!<br> マークアップビギナーさんからベテランさんまでご参加いただければと思います。</p>
構造化データマークアップ後
<div itemscope itemtype="http://schema.org/Event"> <h1 itemprop="name">名古屋マークアップ勉強会 10/15</h1> <h2>日時</h2> <time itemprop="startDate" content="2016-10-15T13:00" datetime="2016-10-15">2001/10/15 13:00</time> <h2>開催場所</h2> <div itemprop="location" itemscope itemtype="http://schema.org/Place"> <p itemprop="name">ベースキャンプ名古屋</p> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <p> <span itemprop="addressLocality">名古屋市</span> <span itemprop="streetAddress">中村区名駅3-18-5 モンマートビル5F</span> </p> <meta itemprop="addressRegion" content="愛知県"> <meta itemprop="addressCountry" content="日本"> <meta itemprop="postalCode" content="4500002"> </div> <span itemscope itemprop="hasMap" itemtype="http://schema.org/Map"> <link itemprop="mapType" href="http://schema.org/VenueMap" /> <a itemprop="url" href="https://www.google.com/maps/place/%E3%83%99%E3%83%BC%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97%E5%90%8D%E5%8F%A4%E5%B1%8B/@35.1727684,136.8852383,17z/data=!4m12!1m6!3m5!1s0x600376dc919b8655:0x5bbf0168ec8292bb!2z44OZ44O844K544Kt44Oj44Oz44OX5ZCN5Y-k5bGL!8m2!3d35.172764!4d136.887427!3m4!1s0x600376dc919b8655:0x5bbf0168ec8292bb!8m2!3d35.172764!4d136.887427">マップを見る</a></span> </div> <h2>詳細</h2> <div itemprop="description"> <p>基本的には先生が来る勉強会ではなく、お菓子をつまみながらみんなで勉強できる気楽な勉強会を目指しています。<br> 今回のテーマは「話したいことを話す」です。久しぶりの開催なので、みなさん何かネタが溜まっていると思うので、当日はおもいっきり話していただけたらと思います。今悩んでいることや他の方に意見を聞きたいことなど、とくにオチがある話ではなくても大丈夫です。それも含めてわいわいみんなで相談できる機会になるといいと思っています。<br> 勉強会の流れとしては、2時間ほど、有志の方に10〜30分ほど発表してもらうミニセッションの時間を用意しています。どんな内容でも大丈夫なので、みなさんのお話をお待ちしています。<br> そして、今回は新しく「ディスカッションボックス」というのを用意しています。みなさんの中から課題を募集して、その課題をお題にしてみんなで話し合う予定です。みなさんの普段の疑問をお持ちよりください。<br> 最後は、「もくもく会」を予定しています。みんなで各々気になることについて調べる会です。せっかく外に出て勉強しているので、周りの方にどんどん聞いてみましょう!<br> マークアップビギナーさんからベテランさんまでご参加いただければと思います。</p> <p>マークアップビギナーさんからベテランさんまでご参加いただければと思います。</p> </div> <meta itemprop="image" content="https://dzpp79ucibp5a.cloudfront.net/groups_logos/6557_normal_1442671798_54262531361cd-1_original_original_original.png"> </div>
今回は郵便番号/国/県/をmetaで記述していますがpタグ内に書いても大丈夫です!
基本テンプレート
例で見ると文章が多くなってわかりにくかったので基本的なテンプレートはこちら
<div itemscope itemtype="http://schema.org/Event"> <h1 itemprop="name">イベントタイトル</h1> <time itemprop="startDate" content="0000-00-00T00:00" datetime="">開催時間</time> <div itemprop="location" itemscope itemtype="http://schema.org/Place"> <p itemprop="name">開催場所</p> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <p> <span itemprop="addressCountry">国</span> <span itemprop="postalCode">〒000-0000</span> <span itemprop="addressRegion">◯◯県</span> <span itemprop="addressLocality">◯◯市</span> <span itemprop="streetAddress">住所詳細</span> </p> </div> <span itemscope itemprop="hasMap" itemtype="http://schema.org/Map"> <link itemprop="mapType" href="http://schema.org/VenueMap" /> <a itemprop="url" href="マップURL">マップを見る</a></span> </div> <div itemprop="description"> <p>イベント</p> </div> <meta itemprop="image" content="イベント画像"> </div>
イベント情報全体はitemscopeをつけてtypeはEventでdivなどでくくる。
<div itemscope itemtype="http://schema.org/Event">
イベントのタイトルはプロパティnameをつける
<h1 itemprop="name">イベントタイトル</h1>
開催時間はtimeで記述してcontentには「0000-00-00T00:00」の形で「日付(0000-00-00)」+「T」+「時間(00:00)」で記述をする。
<time itemprop="startDate" content="0000-00-00T00:00" datetime="">開催時間</time>
イベント会場の情報はitemscopeをつけてプロパティlocationをつけtypeはPlaceでdivなどでくくる。
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
Placeの中には会場名(プロパティ:name)。 その後には会場の住所としてitemscopeをつけてプロパティaddressをつけtypeはPostalAddressでdivなどでくくる。
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
【addressCountry】【postalCode】【addressRegion】【addressLocality】【streetAddress】でそれぞれspanなどでくくり紐付けする。国などの表示する必要がないものはmetaで記述することもできる。
地図へのリンクはitemscopeをつけてプロパティhasMapをつけtypeはMapでspanなどでくくる。
重要!その後プロパティ:maptype、type:VenurMapをつけたlinkタグを記述する。
<link itemprop="mapType" href="http://schema.org/VenueMap" />
イベントの詳細や説明文などはプロパティ:descriptionでくくったdiv内やpに記述をする。
<div itemprop="description"> <p>イベント</p> </div>
あとがき
前々からmicrodataでのschema.orgの記述で書いてますが、JSON-LDでの記述方法も勉強してる最中ですので、そちらも近日中に別記事にまとめます!!
この記事を読んだ方におすすめ