1. HOME
  2. フロントエンド
  3. schema.orgで検索エンジンに正確にイベント情報を伝える

schema.orgで検索エンジンに正確にイベント情報を伝える

フロントエンド

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での記述方法も勉強してる最中ですので、そちらも近日中に別記事にまとめます!!


SEO
schema_org

この記事を読んだ方におすすめ