構造化マークアップとは？わかりやすく簡単にまとめました！
こんにちは大学院生です。
構造化マークアップに最近興味が出てきましたので。色々とまとめてみようと思います。クソブログではありますが、マークアップできそうなところがありましたら、実践までやってみます。
目次
1 そもそも構造化マークアップとは？
構造化データについて | 検索 | Google Developers
Google様を含めていくつかのサイトをみてみましたが、なるべく簡単に説明すると、
①検索エンジンはページのコンテンツを理解しようとします（当たり前ですが）
②しかし、検索エンジンはテキストだとぱっと見で意味を理解できない。
（例：「ピーマン」とあっても、ピーマンと書かれていることは一瞬で認識できても、ピーマンが何かは一瞬では判断できない。的な感じです。）
③そこで、テキストに情報を持たせてあげよう！（わかりやすいイメージ：<緑色の苦い野菜だよ>ピーマン</緑色の苦い野菜だよ>）
④それこそが構造化マークアップです。
なるほど。検索エンジンくんに、よりページの内容を理解してもらおう！といった試みなのですね。
Google 検索では、ページのコンテンツをできる限り理解しようとします。ページに構造化データを含めて、ページの意味について明白な手がかりを Google に伝えると、理解の助けになります。構造化データとは、ページに関する情報を提供し、ページ コンテンツ（たとえばレシピのページでは、原材料、加熱時間と加熱温度、カロリーなど）を分類するための標準化されたデータ形式です。
Googleさんがおっしゃっていることも確認しましょう。まぁ、サイトに何を書いてあるかということをGoogleによりよく理解してもらうための手法ってのは間違いないのですが、レシピなどでは「原材料」「カロリー」なども理解してくれるのですね。
2 構造化マークアップの恩恵
構造化マークアップをするとなにがいいんでしょうか。
上記の通り、よりよく理解はしてくれそうです。しかし、検索エンジンは鬼賢いので、そんな感じで忖度しなくても理解してくれんじゃない？なんて思ってしまいます。（多分理解はしてくれます。）
はい。やはりさらに恩恵があるんですね。
下の画像をみてください。
タイトルの下にパンくずリストやレビューの星、件数や価格帯が書かれています。
そう！このように構造化マークアップをすると、検索結果をリッチにすることができるです。もちろん何から何まで全てリッチになるわけではありませんが、レビューや金額などは有り無しで大きく違いますよねー。（対応している構造化マークアップは下記リンク参照です。）そして、構造化マークアップしたからといって、必ずしも適応されるわけではないということも注意してください。
コンテンツ アイテムのマークアップ | 検索 | Google Developers
3 どんなデータがマークアップできるの？
列挙しまーすので、詳しくはリンク先（一部英語の記事もありますが、翻訳かければ理解できると思います。）を見てください。結構色々できるのね〜。と思っていたければ良いかと思います。
①パンくずリスト
Breadcrumb | Search | Google Developers
パンくずの表記とそのリンク先とパンくずの階層の順番を記述できます。マークアップをすると、検索結果をリッチにできる可能性があります。
②サイトリンクの検索ボックス
Sitelinks Searchbox | Search | Google Developers
この記述をすることで、検索結果にサイト内検索のボックスを設置することができます。（必ずしも、、、以下略）サイトに検索エンジンが搭載（要はサイト内検索が可能であること）されていることが条件のようです。
③企業の連絡先
企業の連絡先 | 検索 | Google Developers
検索結果に企業の連絡先情報（TEL）を表示させることができます。電話番号の種類（カスタマーサポート、予約など）と、フリーダイヤルなどの属性を追加することもできます。
④ロゴ
検索結果に企業のロゴを表示させることができます。こんなようにです。（PC閲覧下）
⑤ソーシャルプロフィール
ソーシャル プロフィール | 検索 | Google Developers
検索結果に企業のソーシャルプロフィールページへのリンクを表示させることができます。（要はフェイスブックのページへのリンクを表示できるみたいな感じです。）
検索結果に企業のロゴを表示させることができます。こんなようにです。（PC閲覧下）
⑥カルーセル
カルーセル | 検索 | Google Developers
そもそもカルーセルとは、
みたいに横にスクロールできるやつです。で、それを表示できる（かもしれない）というわけです。注意点としては、レシピなら全部レシピ、記事なら全部記事と構造化マークアップするコンテンツの種類を統一する必要があります。
- （中略）
- リスト形式は現在、Recipe、Film、Course、Articleの各コンテンツ タイプでサポートされています。サポート対象のコンテンツ タイプは増え続けており、他のタイプがサポートされるようになり次第、そのタイプのリストも自由に作成できるようになります。
構造化データのリスト形式を実装する方法には次の 2 種類があります。
- 概要ページ + 複数の詳細ページ
- 単一のオールインワン ページのリスト
など、ちょっと色々と留意点あるので、しっかりリンク先をみてくださいね。
（そして、①〜⑥までは構造化マークアップの中でも拡張機能と呼ばれております。）
⑦記事
Article | Search | Google Developers
マークアップすることで、検索結果にリッチ化された記事を表示させることができます。AMPと非AMPで対応違うので、ここも要注意です。（AMPの方が恩恵大きそうです）
サムネイル画像よりもさらに大きい画像を表示できるようにしたり、カルーセル表示を可能にしたり、トップニュースに表示したりすることができます。
⑧本
Book | Search | Google Developers
マークアップすることで、様々な書籍情報を表示することができます。レビューや値段だけでなく、あらすじや作者の情報など多数表示させることができます。（現在は出版社などのサイトのみ適応されています。）
⑨（習い事などの）コース
マークアップすることでコースを表示させることができます。コースとはこんな感じです。
英語の授業の文法コース、英会話コース 的な感じです。
ただし、宣伝などの文言を入れるのはNGだそうです。
⑩データセット
Dataset | Search | Google Developers
データセットとは、要するに統計情報などのデータ（2018年の東京都の人口的なやつです）を指し、それらをマークアップすることができるという話です。これは検索結果では影響はないと思うのですが、
https://toolbox.google.com/datasetsearch
で検索結果に表示できるようになります。
11雇用主の平均評価
雇用主の総合評価 | 検索 | Google Developers
簡単に説明すると、
大学院生株式会社 ☆4.2 レビュー数2018件
的なものを表示できるというわけです。もう少し詳しく見ると、
EmployerAggregateRatingを追加すると、求職者が仕事を選ぶ際に役立つ情報として、採用側組織に関する評価を提供できます。また、Google の求人情報エンリッチ検索において、ブランドが検索結果の目立つ位置に表示されるようになります。
といった具合です。
12イベント
Event | Search | Google Developers
ありとあらゆるイベントをマークアップすることができます。公民館での会合もできるはずです。マークアップすることで、例えば「今週末のジャズ演奏会」とかのキーワードで表示できるようになります。
場所や時間、チケットの販売先へのリンクなども掲載することができます。
（個人的に激アツです。）
13ファクトチェック
ファクト チェック | 検索 | Google Developers
これに関しては、引用させていただきます。（語彙力ゥ！）
他者の主張を評価するウェブページをお持ちの場合は、そのウェブページに
ClaimReview構造化データ要素を追加できます。この要素を使用すると、該当する主張の Google 検索結果にそのページが表示されるときに、ページに掲載されているファクト チェックの要約も表示されるようになります。
えーっと、さらに例を見るとですね。「地球が平らである」という主張をしているページがあるとします。それを主張する理由みたいなものを検索結果に表示できるといった感じですね。
14求人情報
先に言うと、まだ日本では対応していないです。
ただし、近いうちに対応しますので、準備していても問題ないかと。
で、内容ですが、
- エンリッチ リザルトに結果を表示する: 自社の求人情報が Google の求人検索で表示されるようになり、ロゴやレビュー、評価、求人の詳細を目立たせることができます。
- 意欲的な応募者を多く呼び込む: 新しい機能により、求職者が場所や役職といったさまざまな条件で絞り込みをできるようになるので、該当の仕事をちょうど探している応募者を呼び込める可能性が高まります。
- 検出とコンバージョンの機会を増やす: 求職者は、求人情報を参照し、クリックしてサイトにアクセスするための新たな手段を利用できます。
といったように表示されます。要は、今まで転職サイトなどで「SEO コンサルタント」などのキーワードで検索し、求人情報を調べていたと思いますが、それがGoogleの検索でできるようになるといった感じです。
15ローカルビジネス
Local Business | Search | Google Developers
マークアップすることで運営するローカルビジネスの情報を掲載することができます。例えば、会社名、場所、連絡先、オープン時間などです。
まぁ、これに関してはGoogleマイビジネスでもいけそうですね。
16メディア操作
メディア操作 | 検索 | Google Developers
これはまず、一般向けではなく、Googleのパートナー向けとなります。ですので、特に気にしなくてもいいと思いますが、やれることとしましては、検索結果上でのYouTubeなどのメディアの再生ができるといった感じです。
17職業
Occupation | 検索 | Google Developers
マークアップすることで、
各職種の給与範囲と地域別の平均給与、一般的な福利厚生、応募資格、学歴要件などの詳細
が表示されます。11、14と組み合わせるのが最適です。
18定期購入とペイウォール コンテンツ（有料コンテンツ）
定期購入とペイウォール コンテンツ | 検索 | Google Developers
で、これが何を可能にするかと言うと、
この構造化データにより、それがペイウォール コンテンツか、Google ガイドラインに違反するクローキングかをGoogle のクローラが容易に区別できるようになります。
つまりは、有料コンテンツと違反の可能性があるコンテンツを的確に見分けられると言う話です。クローキングはググってどうぞ。(検索エンジンとユーザーに違うコンテンツを見せると言う手法で、違反対象の手法です。)
19ポッドキャスト
Podcast | Search | Google Developers
ポッドキャストのエピソードやその詳細情報を検索結果に表示させることができます。
20商品
Product | Search | Google Developers
マークアップすることで商品情報や写真、値段レビューなどを掲載することができます。製品ページにマークアップする場合と、価格コムみたいに複数の販売者情報を載せているページをマークアップするパターンがあります。
（激アツ。やるべき。絶対。）
21レシピ
Recipe | Search | Google Developers
レシピの詳細情報、料理の写真やレシピの所要時間、カロリーなどの情報をマークアップすることができます。なんと、マークアップすることでGoogleアシスタントで読み上げてくれるまでいけます。
22レビュー
Review | Search | Google Developers
レビューを載せることができます。レビューの内容や、星での評価もできます。
マークアップできる範囲も広く、ルールもあるので要チェックですが、レビューを掲載しているサイトであれば、やる価値はとても高いです・
23アプリ
Software App (BETA) | Search | Google Developers
これはまだベータ版であり、一部のみ使用することができます。検索結果にアプリの詳細情報を載せることができます。
24speakable
Speakable (BETA) | Search | Google Developers
マークアップしたところをGoogleホームなどで読み上げることができるようになりますが、今のところ英語のみの対応になります。
25人気スポットリスト
人気スポットリスト（ベータ版） | 検索 | Google Developers
これはまだベータのベータなので、ないものとして考えても良さそうです。
26動画
Video | Search | Google Developers
動画をマークアップすることで、検索結果上に表示することができます。サムネイルの指定もできます。
4構造化マークアップの方法
色々書き方はありますが、Googleの推奨している方法でいきましょう！
ボキャブラリーはschema.org シンタックスJSON-LDが推奨されています。
そして、その場合の基本的なソースコードは以下の通りになります。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "####"
}
</script>
記述箇所はどこでも構いません。（しかし、検索エンジンになるべく早く伝えたいので上の方に書くのが良さげ）
で、＠typeに入るのが、上で散々書いてきたものになります。ちなみに、ここに入る値のことをバリューと言います。「商品」を例にしてソースコードを見てみましょう。 （このソースコードはschema.orgの公式サイトから引用しました。）
<script type="application/ld+json">
{"@context": "http://schema.org",
//①"@type": "Product",
//②
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "3.5",
"reviewCount": "11"
},//③
"description": "0.7 cubic feet countertop microwave. Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.",//④
"name": "Kenmore White 17\" Microwave",
"image": "kenmore-microwave-17in.jpg",//⑤
"offers": {
"@type": "Offer",
"availability": "http://schema.org/InStock",
"price": "55.00",
"priceCurrency": "USD"
}
}
</script>
それぞれ見ていきましょう。
①"@type": "Product", バリューとしてProductが入っていますね。今回は商品だったからこれを使いましたが、人物に関してはPersonなどschema.orgによって諸々定義されています。要はマークアップしたいものを選択すれば問題なしです。
②"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "3.5",
"reviewCount": "11"
},
①で特定のタイプを指定したら、そのタイプで使えるボキャブラリー（ここでは"aggregateRating"）をキーとして選択します。
通常は、"name": "大学院生になってみた",
みたいな感じで、キーの後に""で挟んでその値を記述します。
しかし、このaggregateRatingの後にまた＠typeがきていますね。これは、エンベッティングと呼ばれるもので、他の@typeを用いて、より的確に検索エンジンに情報を伝えるものとでも理解しておいてください。要はレビュー3,5よりも、レビュー（平均レビュー3.5、レビュー総数11）の方がわかりやすいという話です。
(こんな感じでキーと@typeがまとまってますので、必ず上記のページを確認しましょう。)
