大学院生になってみた

埼玉県民と北海道民で書いてます。横浜ベイスターズのファンと広島カープのファンです。

構造化マークアップとは?わかりやすく簡単にまとめました!

こんにちは大学院生です。

 

構造化マークアップに最近興味が出てきましたので。色々とまとめてみようと思います。クソブログではありますが、マークアップできそうなところがありましたら、実践までやってみます。

 

目次

 

1 そもそも構造化マークアップとは?

構造化データについて  |  検索  |  Google Developers

digital-marketing.jp

liginc.co.jp

Google様を含めていくつかのサイトをみてみましたが、なるべく簡単に説明すると、

検索エンジンはページのコンテンツを理解しようとします(当たり前ですが)

②しかし、検索エンジンはテキストだとぱっと見で意味を理解できない。

(例:「ピーマン」とあっても、ピーマンと書かれていることは一瞬で認識できても、ピーマンが何かは一瞬では判断できない。的な感じです。)

③そこで、テキストに情報を持たせてあげよう!(わかりやすいイメージ:<緑色の苦い野菜だよ>ピーマン</緑色の苦い野菜だよ>)

④それこそが構造化マークアップです。

 

なるほど。検索エンジンくんに、よりページの内容を理解してもらおう!といった試みなのですね。

 

Google 検索では、ページのコンテンツをできる限り理解しようとします。ページに構造化データを含めて、ページの意味について明白な手がかりを Google に伝えると、理解の助けになります。構造化データとは、ページに関する情報を提供し、ページ コンテンツ(たとえばレシピのページでは、原材料、加熱時間と加熱温度、カロリーなど)を分類するための標準化されたデータ形式です。

構造化データについて  |  検索  |  Google Developers より引用 

 Googleさんがおっしゃっていることも確認しましょう。まぁ、サイトに何を書いてあるかということをGoogleによりよく理解してもらうための手法ってのは間違いないのですが、レシピなどでは「原材料」「カロリー」なども理解してくれるのですね。

 

2 構造化マークアップの恩恵

構造化マークアップをするとなにがいいんでしょうか。

上記の通り、よりよく理解はしてくれそうです。しかし、検索エンジンは鬼賢いので、そんな感じで忖度しなくても理解してくれんじゃない?なんて思ってしまいます。(多分理解はしてくれます。)

はい。やはりさらに恩恵があるんですね。

下の画像をみてください。

構造化マークアップの例(価格コムMacBook)

構造化マークアップの例(価格コムMacBook

タイトルの下にパンくずリストやレビューの星、件数や価格帯が書かれています。

そう!このように構造化マークアップをすると、検索結果をリッチにすることができるです。もちろん何から何まで全てリッチになるわけではありませんが、レビューや金額などは有り無しで大きく違いますよねー。(対応している構造化マークアップは下記リンク参照です。)そして、構造化マークアップしたからといって、必ずしも適応されるわけではないということも注意してください。

コンテンツ アイテムのマークアップ  |  検索  |  Google Developers

 

3 どんなデータがマークアップできるの?

列挙しまーすので、詳しくはリンク先(一部英語の記事もありますが、翻訳かければ理解できると思います。)を見てください。結構色々できるのね〜。と思っていたければ良いかと思います。

 

パンくずリスト

Breadcrumb  |  Search  |  Google Developers

パンくずの表記とそのリンク先とパンくずの階層の順番を記述できます。マークアップをすると、検索結果をリッチにできる可能性があります。

②サイトリンクの検索ボックス

Sitelinks Searchbox  |  Search  |  Google Developers

この記述をすることで、検索結果にサイト内検索のボックスを設置することができます。(必ずしも、、、以下略)サイトに検索エンジンが搭載(要はサイト内検索が可能であること)されていることが条件のようです。

③企業の連絡先

企業の連絡先  |  検索  |  Google Developers

検索結果に企業の連絡先情報(TEL)を表示させることができます。電話番号の種類(カスタマーサポート、予約など)と、フリーダイヤルなどの属性を追加することもできます。

④ロゴ

ロゴ  |  検索  |  Google Developers

検索結果に企業のロゴを表示させることができます。こんなようにです。(PC閲覧下)

グーグル - Google 検索

⑤ソーシャルプロフィール

ソーシャル プロフィール  |  検索  |  Google Developers

検索結果に企業のソーシャルプロフィールページへのリンクを表示させることができます。(要はフェイスブックのページへのリンクを表示できるみたいな感じです。)

検索結果に企業のロゴを表示させることができます。こんなようにです。(PC閲覧下)

グーグル - Google 検索

⑥カルーセル

カルーセル  |  検索  |  Google Developers

 そもそもカルーセルとは、

大根のレシピのカルーセル(楽天レシピ)

大根のレシピのカルーセル楽天レシピ)

みたいに横にスクロールできるやつです。で、それを表示できる(かもしれない)というわけです。注意点としては、レシピなら全部レシピ、記事なら全部記事と構造化マークアップするコンテンツの種類を統一する必要があります。

  • (中略)
  • リスト形式は現在、RecipeFilmCourseArticleの各コンテンツ タイプでサポートされています。サポート対象のコンテンツ タイプは増え続けており、他のタイプがサポートされるようになり次第、そのタイプのリストも自由に作成できるようになります。

構造化データのリスト形式を実装する方法には次の 2 種類があります。

  • 概要ページ + 複数の詳細ページ
  • 単一のオールインワン ページのリスト

など、ちょっと色々と留意点あるので、しっかりリンク先をみてくださいね。

(そして、①〜⑥までは構造化マークアップの中でも拡張機能と呼ばれております。)

 

⑦記事

Article  |  Search  |  Google Developers

マークアップすることで、検索結果にリッチ化された記事を表示させることができます。AMPと非AMPで対応違うので、ここも要注意です。(AMPの方が恩恵大きそうです)

サムネイル画像よりもさらに大きい画像を表示できるようにしたり、カルーセル表示を可能にしたり、トップニュースに表示したりすることができます。

⑧本

Book  |  Search  |  Google Developers

マークアップすることで、様々な書籍情報を表示することができます。レビューや値段だけでなく、あらすじや作者の情報など多数表示させることができます。(現在は出版社などのサイトのみ適応されています。)

⑨(習い事などの)コース

コース  |  検索  |  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 Developers

先に言うと、まだ日本では対応していないです。

 ただし、近いうちに対応しますので、準備していても問題ないかと。

で、内容ですが、

  • エンリッチ リザルトに結果を表示する: 自社の求人情報が 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)の方がわかりやすいという話です。

f:id:masterzzz:20181111040401p:plain

(こんな感じでキーと@typeがまとまってますので、必ず上記のページを確認しましょう。)