この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
schema.orgとは
schema.orgとは構造化マークアップの基準を作成、管理してる共同コミュニティです。
構造化マークアップとは、例えば検索エンジンで飲食店を調べた際に、タイトルだけでなくお店のメニューや料理の画像が表示されるのを見たことがあると思います。これはリッチスニペットと呼ばれるものです。
飲食店以外にも、本や、映画、イベント情報などジャンルごとに適切なリッチスニペットの内容が表示されています。
リッチスニペットを表示するには様々な方法がありますが、そのうちの一つが構造化マークアップです。
schema.orgはこの構造化マークアップの仕様を定めており、schema.orgの仕様どおりに構造化マークアップをすることで、Webサイトの情報がより詳細に検索エンジンに伝わるようになります。
検索エンジンは構造化マークアップをもとに、リッチスニペットやリッチリザルトと言ったよりふさわしい形で検索結果に表示しているのです。
構造化マークアップの種類
構造化マークアップを行うにはschema.org以外にも「JSON-LD」、「RDFa」などがあります。本記事ではschema.orgについて解説していきます。
schema.org を利用する理由
検索エンジンはHTMLの構造をHTMLタグが持つ意味で理解しています。
h1タグが使われていればこれは「見出し」である、tableタグが使われているからこれは「表」である、などです。しかし検索エンジンにとって、h1タグが「見出し」であるという以上の情報はわからず、それが本のタイトルなのか、作者の名前かなどは判断できないでしょう。
そこで構造化マークアップの出番です。構造化マークアップを行えばより具体的にタグの持つ意味を検索エンジンに伝えることが可能になります。
schema.orgでできること
schema.orgの仕様に基づき構造化マークアップを行えば、以下のようなメリットがあります。
リッチスニペットが表示される
リッチスニペットは冒頭で紹介した飲食店の例のように、検索結果にタイトルとディスクリプション以外の、より細かい情報が表示される機能です。Webサイトの内容をより具体的に表示してくれるので、ユーザーの目に止まりやすくなるメリットがあります。リッチスニペットはリンクをクリックするより前に、コンテンツの事前情報をユーザーに伝えることで、訴求したいターゲットにより正確にアプローチできます。
検索エンジン（クローラ）がコンテンツの内容を把握しやすくなる
構造化マークアップを行えば、検索エンジンがより正確にコンテンツの内容を精査できるようになります。構造化マークアップを行えば必ずSEO評価が高まるわけではありませんが、近年ではセマンティックコーディングと呼ばれる「コンピューターにコードの文章的意味を理解させる」といった動きがありますので、業界全体の流れを踏まえても構造化マークアップは実施しておくべきかと思われます。
FAQのリッチリザルトが表示される
FAQ形式の構造化マークアップを行えば、検索エンジン結果画面に「よくある質問」として、リッチリザルトに掲載されます。リッチリザルトがあれば、ユーザーは自分が知りたい情報にすぐにたどり着けるため、ユーザビリティの向上に寄与します。
パンくずリストのリッチリザルトが表示される
パンくずリストの構造化マークアップを行えば、検索結果画面にパンくずが表示されます。パンくずリストがあれば検索エンジンがサイトの全体構造を認識できるためSEOに効果があると言われています。ユーザーもまた同じく、サイトの構造をすぐに理解出来るため、ユーザビリティが向上します。
schema.orgを利用した構造化マークアップの書き方
schema.orgはHTMLの要素内に属性として設定していきます。以下の例では飲食店を想定しています。
例：
<div itemscope itemtype=” https://schema.org/Restaurant”>
<h2 itemprop=”name”>炭火焼肉 赤坂店</h2>
<p itemprop=”description”>港区赤坂にある本格焼肉店</p>
<p>営業時間: <span itemprop=”openingHours” content=”Mo,Tu,We,Th 09:00-22:00″>月曜日～木曜日 9:00-22:00</span></p>
<p>電話番号: <span itemprop=”telephone” content=”+81312341234″>03-1234-1234</span></p>
</div>
schema.orgの構造化マークアップでは主に以下の3つの情報をプロパティとして設定します。
- itemscope(構造化マークアップを宣言)
- itemtype(情報の種類をschema.orgの対応するURLを記載)
- itemprop(schema.orgの仕様に従って詳細情報を記述する)
- itemscopeは構造化マークアップを始める宣言なので特に意味ありません。
- divタグには適切なitemtypeを記述します。適切なitemtypeはhttps://www.schema.org/から選択します。今回の例は飲食店なのでhttps://schema.org/Restaurantをitemtypeの値にしました。
- itempropの値はまずhttps://schema.org/Restaurantにアクセスします。するとitempropに記載できる値が詳細に載っているので、それを参考にしてマークアップをしていきます。
itemtypeには他にも以下のような項目があります。
本：http://schema.org/Book
人物：http://schema.org/Person
映画：http://schema.org/Movie
都市：http://schema.org/City
最適な項目をhttps://schema.org/docs/full.htmlから探してみてください。
まとめ
schema.orgは構造化マークアップをする手段の一つであり、実施することで検索エンジンに自サイトの内容を伝えることができます。本記事ではschema.orgを使った構造化マークアップの簡単な紹介になります。構造化マークアップはコーディングの手間がかかりますが、訴求したいユーザーがサイトに訪れるチャンスが増えます。
