構造化(schema web)の記述例

ソースの記述は、前半にJsonLD、後半にmicrodataの両方を記述しています。(一部例外もあります)

WordPress使用時の注意点

functions.phpに
構造化の記述が消えないように

上記ページの記述を追加した上で、さらに、itemscopeの記述をただしい書式でかかないと

<div itemscope itemtype="http://schema.org/Corporation">
上記の書式(schema webでもこの書式をサンプルにしている)ですと、
<div itemscope="" itemtype="http://schema.org/Corporation">
といった記述に書き換わってしまいます。

ただしくは、
<div itemscope="itemscope" itemtype="http://schema.org/Corporation">
この書き方になります。

ご注意くだされ!

企業の記述例

DtA Web Marketing

1-7-2 #308 Minato-ku, Tokyo 106-0031

81(03) 6667-4585

以下のソースが上記の表示になります。(※上記ソースでは、jsonLDの記述を外しておりす)
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Corporation",
"address": {
"@type": "PostalAddress",
"addressLocality": "Minato-ku",
"addressRegion": "Tokyo",
"postalCode": "106-0031",
"streetAddress": "1-7-2 #308"
},
"name": "DtA Web Marketing",
"telephone": "81(03) 6667-4585",
"url": "https://dt-a.net"
}
</script>

<div itemscope itemtype="http://schema.org/Corporation">
<span itemprop="name">DtA Web Marketing</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1-7-2 #308</span>
<span itemprop="addressLocality">Minato-ku</span>,
<span itemprop="addressRegion">Tokyo</span> <span itemprop="postalCode">106-0031</span>
</div>
<span itemprop="telephone">81(03) 6667-4585</span>
<a itemprop="url" href="https://dt-a.net">https://dt-a.net</a>
</div>

 

クリニック(医療機関)の記述例

-----

DtA元気になるクリニック

post@exsample.jp

106-0031
東京都港区 西麻布1-7-2 #308

TEL  03-6667-4585
FAX  03-1234-5678

------

以下のソースが上記の表示になります。(※上記記述には、jsonLDとロゴの記述を外しておりす)

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "MedicalClinic",
"address": {
"@type": "PostalAddress",
"addressLocality": "港区",
"addressRegion": "東京都",
"postalCode": "106-0031",
"streetAddress": "西麻布1-7-2 #308"
},
"email": "post@exsample.jp",
"logo": "http://exsample.jp/images/logo.png",
"name": "DtA元気になるクリニック",
"telephone": "03-6667-4585",
"faxNumber": "03-1234-5678",
"url": "http://exsample.jp/"
}
</script>

<div itemscope itemtype="http://schema.org/MedicalClinic" class="address">
<p class="logo"><a href="//exsample.jp/">
<img itemprop="logo" src="/images/logo.png" alt="DtA元気になるクリニックロゴ" /></a>
</p>
<p itemprop="name">DtA元気になるクリニック</p>
<p><a href="mailto:post@exsample.jp" itemprop="email">
post@exsample.jp</a>
<a href="http://exsample.jp/" itemprop="url">http://exsample.jp/</a>
</p>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
〒 <span itemprop="PostalCode">106-0031</span><br />
<span itemprop="addressRegion">東京都</span>
<span itemprop="addressLocality">港区</span>
<span itemprop="streetAddress">西麻布1-7-2 #308</span>
</div>
<p>TEL  <span itemprop="telephone">03-6667-4585</span><br />
FAX  <span itemprop="faxNumber">03-1234-5678</span>
</p>
</div>

 

鉄道駅(TrainStation)の記述例

六本木駅( 港区 六本木 )

以下のソースが上記の表示になります。(※上記記述には、jsonLDの記述を外しておりす)
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "TrainStation",
"address": {
"@type": "PostalAddress",
"addressRegion": "港区",
"streetAddress": "六本木"
},
"name": "六本木駅",
"url": "https://goo.gl/maps/3mAQvAmdPk42"
}
</script>

<div itemscope itemtype="http://schema.org/TrainStation">
<span itemprop="name">六本木駅</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="schema-address">
( <span itemprop="addressLocality">港区</span>
<span itemprop="streetAddress">六本木</span> )
</div>
</div>

 

 

イベント(例としてセミナー)

例として:「SEO実践講座」

以下のソースにはサンプルとして料金なども記載しています。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Event",
"location": {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": "Minato-ku",
"addressRegion": "Tokyo",
"postalCode": "106-0031",
"streetAddress": "1-7-2 #308 NishiAzabu"
},
"name": "DtA Seminar Room"
},
"name": "SEO実践講座",
"description": "検索から評価されるSEOを具体的な施策例を交えて",
"image": "https://example.com/seminar/img_seminar.jpg",
"performer": {
"@type": "Person",
"name": "Hideo Kawahara",
"sameAs": "https://example.com/kawahara/"
},
"offers": {
"@type": "Offer",
"availability" : "http://schema.org/LimitedAvailability",
"price": "5000",
"priceCurrency": "JPY",
"url": "https://example-ticket.com"
},
"startDate": "2018-01-29T14:30"
}
</script>

 

書籍

例として:「SEO in the future(Example出版社)

以下のソースにはサンプルとして料金なども記載しています。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Book",
  "bookFormat": "Hardcover",
 "datePublished": "2018-03-01",
  "copyrightHolder": {
    "@type": "Organization",
    "name": "Example出版社"
  },
  "copyrightYear": "2018",
  "description": "SEOの初歩的なことから、やってはいけない具体的なSEO対策、今実行すべきSEO対策と、その理由",
  "genre": "Web Marketing Book",
  "inLanguage": "japanese",
  "isbn": "1234567",
  "name": "SEO in the future",
  "author": {
  "@type": "Person",
    "name": "Michal Chang"
    },
  "numberOfPages": "251",
  "price": "2.980yen",
  "priceCurrency": "JPY",
  "publisher": {
    "@type": "Organization",
    "name": "Example出版社"
  }
}
</script>

コンテンツ(文章ほか)の構造化について

コンテンツ主要部分の構造化例

<article>
<section>
<h1>コンテンツタイトル</h1>
<h2 id="lead">コンテンツリード/フック</h2>
<p>フック文章</p>
</section>

<blockquote cite="外部URL" title="そのタイトル">
<p>引用部分、引用部分、引用部分、引用部分、引用部分、</p>
<p><cite><a href="外部URL">そのタイトル</a></cite>より抜粋(この表記は任意)</p>
</blockquote>

<section>
<h3>小見出し</h3>

<figure>
<img src="http://example.com/zu-hyou.jpg" />
<figcaption>キャプション</figcaption>
</figure>

<p>コンテンツ文</p>
</section>

<section>
<h3>小見出し</h3>
<p>コンテンツ文</p>
</section>
</article>

 

上記は、引用と画像キャプションの記述を参考にしてください。

<article>:独立した記事、意味的に関連したコンテンツに使用する。文章以外でもコンテンツであればこの中にまとめる事ができる。ページの残りから隔離されても意味をもつことが可能である。ネスト可能。
<section>:divより目的が明確なケース、文章(ドキュメント)のアウトラインを明示する。内部に<h1>を持つことを推奨。ネスト可能。
<div>:主にCSSでターゲットとして利用する。コンテンツをグループ化する際に使用。

 

<section>には、入れ子内に等しいhnタグが含まれるケースがあります。webオーサーは、<section>入れ子内に適切な見出しを使用する必用がある。

(直訳ゴメン)セクションコンテンツの1つの要素に複数の見出しがあることによって生成された暗黙のセクションに頼るのではなく、セクションコンテンツの要素のセクションを明示的にラップすることも推奨されます。

Sections may contain headings of a rank equal to their section nesting level. Authors should use headings of the appropriate rank for the section’s nesting level.

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

W3C-Headings and sectionsより抜粋

上記を踏まえて

<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h3>Color</h3>
<p>Apples come in various colors.</p>
</section>
</body>

以下より引用
https://www.w3.org/TR/2016/REC-html51-20161101/sections.html#headings-and-sections

上記は、bodyタグの前後に、<article>を記述してもよいかと思います。これを元に、<article>や<section>、そこにhnタグの使用のサンプルを作成してみました。

企業名:株式会社鈴木一郎商店
強み:バッティングと守備の両方が強み

<h1>バッティングも守備もイケてる株式会社鈴木一郎商店</h1>
<p>text、text、text</p>
<article>
<h1>鈴木一郎商店のバッティングの実績</h1>
<p>text、text、text</p>
<section>
<h2>アメリカ大リーグでのバッティング実績</h2>
<p>text、text、text、text、text、text、text</p>
<h3>いろいろ</h3>
<p>text、text</p>
</section>
<section>
<h2>日本でのバッティング実績</h2>
<p>text、text、text、text、text、text、text</p>
<h3>いろいろ</h3>
<p>text、text</p>
</section>
</article>

<article>
<h1>鈴木一郎商店のトレーニングスタイルについて</h1>
<p>text、text、text、</p>
<section>
<h2>オンシーズンでのトレーニングスタイル</h2>
<p>text、text、text、text、text、text、text</p>
<h3>いろいろ</h3>
<p>text、text</p>
<h3>いろいろ</h3>
<p>text、text</p>
</section>
<section>
<h2>オフシーズンでのトレーニングスタイル</h2>
<p>text、text、text、text、text、text、text</p>
<h3>いろいろ</h3>
<p>text、text</p>
<h3>いろいろ</h3>
<p>text、text</p>
</section>
</article>

よくロゴ部分にh1を割り振られるケースもありますが、それが有効なのは、可能性があるとしてトップページのみ。他のページは、ロゴ部分に、上記ケースで、バッティング実績のページのロゴには、altタグで、「鈴木一郎バッティング実績」とする、となるとロゴ自体の画像にバッティング実績といった記述が必用とった施策が必用になるので、やはり、ロゴ部分にh1を割り振るのは無理がある。ただ、ロゴ下にテキストで、そのページのh1にあたる記述を表示してそれらを含めてh1タグでまとめられれば問題ないと考えます。

さらにSEO的という事であれば、画像(キャプションあり)や必用に応じて引用、さらに、articleやsectionには、関連したIDを割り振り、h1やh2の下には、leadとして以下の文章の要約を記述もしくはその部分を要約にして、さらに、そのブロックは、id="lead"といった記述を追加する。

 

ページ全体の構成イメージ

ページ全体のhtml構造化イメージ
Webページのhtmlでの構造化のイメージです。