ウェブのあれこれ
ウェブを活用したいひとのためのブログ
よく使うschema.orgのデータ定義
2015/05/26 HTML/CSS

よく使うschema.orgのデータ定義

Webサイトでよく使うschema.orgデータ定義の忘備録

1. 新着情報

一覧の場合

<div>
    <ul>
<li itemscope itemtype="http://schema.org/NewsArticle">
<time itemprop="datePublished" datetime="{{YYYY-mm-ddTHH:ii:ss+09:00}}">{{公開日}}</time>
<span itemprop="headline"><a href="{{URL}}" itemprop="url">{{新着情報のタイトル}}</a></span>
</li>
<li itemscope itemtype="http://schema.org/NewsArticle">
<time itemprop="datePublished" datetime="{{YYYY-mm-ddTHH:ii:ss+09:00}}">{{公開日}}</time>
<span itemprop="headline"><a href="{{URL}}" itemprop="url">{{新着情報のタイトル}}</a></span>
</li>
</ul>
</div>

新着情報の記事の場合

<article itemscope itemtype="http://schema.org/NewsArticle">
<h1 itemprop="name">{{タイトル}}</h1>
<time itemprop="datePublished" datetime="{{YYYY-mm-ddTHH:ii:ss+09:00}}">{{公開日}}</time>
<div itemprop="articleBody">
{{新着情報の本文}}
</div>
</article>

2. ブログ

一覧の場合

<div itemscope itemtype="http://schema.org/Blog">
<div itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<img src="{{画像のURL}}" itemprop="image">
<h2 itemprop="name"><a href="{{URL}}" itemprop="url">{{ブログのタイトル}}</a></h2>
<time itemprop="datePublished" datetime="{{YYYY-mm-ddTHH:ii:ss+09:00}}">{{公開日}}</time>
<div itemprop="headline">
{{ブログ記事の概要}}
</div>
</div>
<div itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<img src="{{画像のURL}}" itemprop="image">
<h2 itemprop="name"><a href="{{URL}}" itemprop="url">{{ブログのタイトル}}</a></h2>
<time itemprop="datePublished" datetime="{{YYYY-mm-ddTHH:ii:ss+09:00}}">{{公開日}}</time>
<div itemprop="headline">
{{ブログ記事の概要}}
</div>
</div>
</div>

記事ページの場合

<div itemscope itemtype="http://schema.org/Blog">
<div itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<img src="{{画像のURL}}" itemprop="image">
<h2 itemprop="name">{{ブログのタイトル}}</h2>
<time itemprop="datePublished" datetime="{{YYYY-mm-ddTHH:ii:ss+09:00}}">{{公開日}}</time>
<div itemprop="articleBody">
{{ブログ記事の本文}}
</div>
</div>
</div>

3. Q&A

<div itemscope itemtype="http://schema.org/Question">
<span itemprop="name">{{Q.質問内容}}</span>
<div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
<span itemprop="text">{{A.回答}}</span>
</div>
<div itemprop="acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
<span itemprop="text">{{A.回答}}</span>
</div>
</div

4. 企業情報

<div itemscope itemtype="http://schema.org/Corporation">
<b itemprop="name">{{企業の名称}}</b><br>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
〒<span itemprop="postalCode">{{郵便番号}}</span>
<br>
<span itemprop="addressRegion">{{都道府県}}</span>
<span itemprop="addressLocality">{{市区町村}}</span>
<span itemprop="streetAddress">{{通り・建物名}}</span>
<br>
TEL:<span itemprop="telephone">{{電話番号}}</span>
<br>
FAX:<span itemprop="faxNumber">{{FAX番号}}</span>
<br>
MAIL:<span itemprop="email">{{電話番号}}</span>
</div>
</div>

5. WEBサイト

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "{{WEBサイトのURL}}",
"name": "{{WEBサイトの名前}}",
"alternateName": "{{WEBサイトの名前(英語表記?)}}",
"publisher":{
"@context": "http://schema.org",
"@type": "Corporation",
"name": "{{WEBサイトオーナーの名前(企業名など)}}",
"address": {
"@type": "PostalAddress",
"addressLocality": "{{都道府県}}",
"addressRegion": "{{国(JP)}}",
"postalCode": "{{郵便番号}}",
"streetAddress": "{{住所}}"
}
}
}
</script>

6. パンくず

<ul class="horizon" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{{URL}}"><span itemprop="name">{{パンくずの名称}}</span></a><meta itemprop="position" content="1"/></li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{{URL}}"><span itemprop="name">{{パンくずの名称}}</span></a><meta itemprop="position" content="2"/></li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="{{URL}}"><span itemprop="name">{{パンくずの名称}}</span></a><meta itemprop="position" content="3"/></li>
</ul>
Provided by Revolme inc.
revolme.co.jp