構造化データマークアップの記述例

SEOに関連して、ここ10数年ほど注目されているのは「構造化データのマークアップ」かと考えています。某レストラン情報ポータル、老舗Gと新参Tがあり、10数年前は老舗Gが上位で、新参Tは下でしたが、この構造化データの記述に注力した新参Tが、検索サイトからプラス評価になり、老舗Gの上にリストされるようになったのは、構造化データに詳しくない方でもご存じの事実です。

10数年前から、実際に弊社でも構造化データに注力することで、検索上位ランクとなる大きな要因の一つとなった事は、受注した難関ワードでの上位獲得でできていることから事実です。

グーグル検索セントラル：Google 検索での構造化データのマークアップの仕組み概要より抜粋

Google は、Google 検索がページのコンテンツを正確に理解するよう努めています。構造化データを使用してページの意図を伝えると、Google はそのページをより正確に理解できるようになります。構造化データとは、ページに関する情報を様々なサイトで活用できるように標準化したデータ形式で、例えばレシピページでは材料、加熱時間と加熱温度などを詳細に提供できます。

コトバンク：マークアップ言語より抜粋

特定の記号やコマンド文字列を使用して，テキストファイルに論理構造や属性，レイアウトなどの情報を付加するためのコンピュータ言語．マークアップ言語を使い作成されたデータはバイナリではなくテキスト形式であるため，人間でもエディタなどで内容を閲覧・修正できることが大きな特徴である．また，標準化されたマークアップ言語は，データ交換のためのファイル形式として使われることもある．代表的な言語としてSGML，XML，HTML，RTF，TeXがある．

Markupの意味と基本知識から：マークアップより抜粋

マークアップとは、文書構造（テキスト）や視覚表現（装飾）などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくことを意味します。

構造化データの記述スタイルとしてマークアップ言語は、microdata方式とJsonLD方式の二つがありますが、Googleは後者のJsonLDを推奨しています。WordPressにmicrodataで記述する場合、functions.phpに一定のコード追加が必用となります。

リンク（構造化データマークアップの記述が消えないように）

昨今は、もっと細かい部分、サービス内容の詳細、レビュアー名、レビュー内容、質問とその回答、Webページ対応OS、まで記述しているようですが、以下はシンプルなJsonLDの記述サンプルです。

基本的にJsonLD方式を記載しています。二つ表示されている場合、上がJsonLD方式、下はmicrodata方式です。

企業の記述例

SyntaxCloud
1-7-2 #510 Minato-ku, Tokyo 106-0031
81(50)3702-3091
https://syn-c.jp


<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 #510"
  },
  "name": "SyntaxCloud",
  "telephone": "81(50)3702-3091",
  "url": "https://syn-c.jp"
}
</script>


<div itemscope itemtype="http://schema.org/Corporation">
  <span itemprop="name">SyntaxCloud</span>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">1-7-2 #510</span>
    <span itemprop="addressLocality">Minato-ku</span>,
    <span itemprop="addressRegion">Tokyo</span> 
    <span itemprop="postalCode">106-0031</span>
  </div>
  <span itemprop="telephone">81(50)3702-3091</span>
  <a itemprop="url" href="//syn-c.jp">https://syn-c.jp</a>
</div>

サロンなどの記述例

営業時間や休日の記述例です。特殊な隔週でお休みのケース、あえて"openingHoursSpecification"を使ってみました。正しいかどうか不明ですが強調の表現と考えました。サロンはimageが必須のようです。（←Googleの構造化データテストツールで検証）@typeのWebSalonは、schema webには存在しません。HairSalonやBeautySalonでイメージしていただけますでしょうか？


<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSalon",
"address": {
"@type": "PostalAddress",
"addressLocality": "港区",
"addressRegion": "東京都",
"postalCode": "106-0031",
"streetAddress": "西麻布1-7-2 #510"
},
"name": "SyntaxCloud",
"telephone": "(050)3702-3091",
"url": "https://syn-c.jp",
"image": "https://syn-c.jp/img/サンプル_img01.jpg",
"priceRange": "5,000円〜",
"openingHours": [
"Mo-Fr 10:00-19:00"
],
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": "2nd & 4th Tuesday",
"opens": "10:00",
"closes": "19:00"
}
]
}
</script>

クリニック（医療機関）の記述例

サンプル元気になるクリニック
post@exsample.jp
http://exsample.jp/
〒 106-0031
東京都港区西麻布1-7-2 #510
TEL　 050-3702-3091
FAX　 03-1234-5678


<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "MedicalClinic",
"address": {
"@type": "PostalAddress",
"addressLocality": "港区",
"addressRegion": "東京都",
"postalCode": "106-0031",
"streetAddress": "西麻布1-7-2 #510"
},
"email": "post@exsample.jp",
"logo": "http://exsample.jp/images/logo.png",
"name": "サンプル元気になるクリニック",
"telephone": "050-3702-3091",
"faxNumber": "03-1234-5678",
"url": "http://exsample.jp/",
"image": "https://syn-c.jp/img/サンプル_img01.jpg"
}
</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="サンプル元気になるクリニックロゴ" /></a>
</p>
<p itemprop="name">サンプル元気になるクリニック</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 #510</span>
</div>
<p>TEL<span itemprop="telephone">050-3702-3091</span><br />
FAX<span itemprop="faxNumber">03-1234-5678</span>
</p>

鉄道駅/TrainStationの記述例

六本木駅（港区六本木）


<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 #510 NishiAzabu"
},
"name": "サンプル Seminar Room"
},
"name": "SEO実践講座",
"description": "検索から評価されるSEOを具体的な施策例を交えて",
"image": "https://example.com/seminar/img_seminar.jpg",
"performer": {
"@type": "Person",
"name": "検索たろう",
"sameAs": "https://example.com/kawahara/"
},
"offers": {
"@type": "Offer",
"availability" : "http://schema.org/LimitedAvailability",
"price": "5000",
"priceCurrency": "JPY",
"url": "https://example-ticket.com"
},
"startDate": "2024-01-29T14:30"
}
</script>

イベント（例として写真展）

例として：「サンプル写真展」


<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "ExhibitionEvent",
"location": {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": "Minato-ku",
"addressRegion": "Tokyo",
"postalCode": "106-0031",
"streetAddress": "1-7-2 #510 NishiAzabu"
},
"name": "サンプル PhotoGallery"
},
"name": "サンプル写真展",
"description": "フォトグラファーhk写真展",
"image": "https://サンプル.com/gallary_cms/wp-content/uploads/2024/01/sample_img.JPG",
"offers": {
"@type": "Offer",
"price": "1,500",
"priceCurrency": "JPY",
"url": "（イベント詳細のページURL）"
},
"maximumAttendeeCapacity":"（入場数制限がある場合）",
"StartDate": "2024-05-01fri",
"EndDate": "2024-09-15tue",
"DoorTime":"10:00-19:00"
}
</script>

求人情報

例として：「Webコンテンツを得意とする編集者」


<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "JobPosting",
"title": "Webコンテンツを得意とする編集者",
"qualifications": {
"@type": "EducationalOccupationalCredential",
"credentialCategory": "なし",
"about": "日本語が読み書きできること",
"recognizedBy": {
"@type": "Organization",
"name": "SyntaxCloud",
"url": "https://syn-c.jp/"
}
}
}
</script>

書籍

例として：「SEO in the future（Example出版社）」


<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Book",
  "bookFormat": "Hardcover",
 "datePublished": "2024-03-01",
  "copyrightHolder": {
    "@type": "Organization",
    "name": "Example出版社"
  },
  "copyrightYear": "2024",
  "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>

緯度経度記述スタイル

参考レベルですが、飲食店とか美容サロンでは、緯度経度の記述が有効のようです。Corporateは対象にはなっていないようで、法人で飲食店やっている場合、どうするのでしょうかね？その場合は、法人の構造化の記述とは別に店舗やサロンの構造化記述をすることになるかと考えます。

緯度経度の記述例


"geo":{"@type":"GeoCoordinates",
"latitude":35.0108333333333,
"longitude":139.009722222222},

注意点は、10進法にする必要があります。

緯度：北緯35°39′39″
経度：東経139°43′35″

上記は、読み方も、35度39分39秒と読みますが、JsonLDの記述としては、これを10進法にして記述する必要があります。計算方法は簡単です。エクセルで組んでしまえばサッと計算されます。

（計算方法）

軽度：=35＋(39/60)+(39/60/60)ですので、35.0108333333333となります。緯度も同じ計算となります。エクセルに設定する場合は、35、39、39、の部分をセルを指定すればいけます。