構造化マークアップが登場してからもう数年になります。

当初はできることが少なかったのですが、Googleはどんどん力を入れてきており今では色々な変化をもたらすものとなってきました。

ここで日本のGoogleで利用したいschema.orgのボキャブラリーを整理整頓しました。

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

構造化マークアップとは、難しい言い方をすると「セマンティックWebを実現する為に、テキスト情報をマークアップすることで意味を持たせ、コンピュータに対して効率よくデータの収集・解釈を行えるようにする」ことです。

簡単に表現するなら、「html記載の情報に印をつけてコンピューターに理解させる」ということです。

検索エンジンは、テキスト情報の中で「これは企業名だ」「ここは英単語だ」と判別できません。その文字自体の認識はあるものの、その意味までは理解できません。
「サッカーマネージメント」というテキスト情報があったとします。 そのテキスト自体はあることはわかりますが、このテキストは本の名前かもしれませんし、会社名かもしれませんし、サッカーに関する何かの文章かもしれません。

しかし
<brand>サッカーマネージメント</brand>
とすることでこれはブランド名ということがわかります。このような書き方をマークアップと言います。

このマークアップの種類はschema.orgというサイトにて登録されているものしか使えません。
schema.org⇒https://schema.org/docs/gs.html

構造化マークアップの種類

schema.orgにあるマークアップの大カテゴリ―は以下の8種類になります。

■Action(アクション)
アクション / アクションを達成する / アセスメントアクション / アクションを消費する / コントロールアクション / アクションを作成する / インタラクトアクション / アクションを移動 / 組織 / プレイアクション / 検索アクショントレードアクション / 転送アクション / アクションの更新

■Creativework(クリエイティブ)
記事 / ブログ本 / コメント / 会話 / クリエイティブワークスシーズン / クリエイティブワークスシリーズ / データカタログデータセット / デジタルドキュメント / エピソード / ゲーム / 地図メディアオブジェクト / メッセージ / 映画音楽の構成音楽プレイリスト / ミュージックレコーディング / ペインティング / 写真 / 出版物の問題 / 出版物のボリューム / 質問 / レシピ / レビュー / 彫刻 / シリーズ / ソフトウェアアプリケーション / ソフトウェアソースコード / テレビシーズン / 連続テレビ番組 / ビジュアルアートワーク / ウェブページ / Webページ要素 / ウェブサイト

■Event(イベント)
ビジネスイベント / 子供イベント / コメディイベント / ダンスイベント / 配信イベント / 教育イベント / 展示イベント / フェスティバル / フードイベント / 文学イベント / 音楽イベント / 出版イベント / セールイベント / スクリーニングイベント / ソーシャルイベント / スポーツイベント / 劇場イベント / ビジュアルアートイベント

■Intangible(無形)
アラインメントオブジェクト / 聴衆 / ベッドの詳細 / ブランド / 放送チャンネル / バス旅行 / コンピュータ言語 / データフィードアイテム / デマンドデジタル / 文書の許可 / エントリーポイント / 列挙 / フライト / ゲームサーバー / 請求書 / アイテムリスト / 求人転職 / 言語 / リストアイテム / 提供 / 注文 / オーダーアイテム / 宅配便 / 許可 / プログラムメンバーシップ / プロパティ値の指定 / 量 / 評価 / シート / 予約 / サービス / サービスチャネル / 構造化価値 / チケット / 列車旅行

■Organization(組織)
航空会社 / 株式会社 / 教育組織 / 政府機関 / ローカルビジネス / 実行グループ / スポーツ組織 / スポーツチーム

■Person(人)

■Place(場所)
宿泊施設 / 行政区域 / 市民の構造 / 地形 / ランドマークや歴史的建造物レジデンス / 観光の名所

■Product(製品)
個別製品 / いくつかの製品 / 車両

具体的なマークアップのやり方・気を付けるポイント

microdataとJSON-LDの2種類の書き方が主流となります。私としてはどちらでもいいと思います。これ以外の書き方はネット内でもあまりサンプルが無いので修正等する場合に困ることが多くなると思われますのでどちらかをお勧めします。

下記のようなソースがあるとします。

<div>
<h1>ゴッドファーザー</h1>
<span>監督:フランシス・フォード・コッポラ </span>
<span>ギャング</span>
<a href=“../movies/godfather.html”>予告編はこちら</a>
</div>

前述のとおり、このテキスト内容をあることはわかっていても、コンピューターは理解できていません。
不巧の名作「ゴッドファーザー」についての説明にもかかわらずです。(笑 思い入れが強いもので、、、、
これをコンピューターがわかるようにするためにマークアップをします。
microdataでマークアップすると以下のようになります。

<div itemscope itemtype =”http://schema.org/Movie”>
<h1 itemprop=”name”>ゴッドファーザー</h1>
<div itemprop=”director” itemscope itemtype=”http://schema.org/Person”>
監督: <span itemprop=”name”>フランシス・フォード・コッポラ</span>
</div>
<span itemprop=”genre”>ギャング</span>
<a href=”../movies/godfather.html” itemprop=”trailer”>予告編はこちら</a>
</div>


JSON-LDの場合だとこうなります。

<div>
<h1>ゴッドファーザー</h1>
<span>監督:フランシス・フォード・コッポラ </span>
<span>ギャング</span>
<a href=“../movies/godfather.html”>予告編はこちら</a>
</div>

上記がソース上に存在していることが必要です。そして下記のようにソースのどこかに書くことで指定できます。JSON-LDの良いところでもあります。

<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “movie”,
“name”:”ゴッドファーザー”,
“director”:”フランシス・フォード・コッポラ”,
“genre”:”ギャング”,
“url”:”../movies/godfather.html”,
“trailer”:”予告編はこちら”
}
</script>

JSON-LDは、ちょっとだけプログラミングに似ている感があります。経験がある方は全く持って難しいものではないですが、全くの初心者からするとちょっとだけ難しいかもしれません。

気を付けポイント>それぞれの記号に意味があります。例えば「,」は次にも情報がある場合につかったり、「{}」や「[]」などのカッコの種類もあります。※前者は宣言文に対してですし、後者は同種の複数データ記載の時に使います。

<microdataとJSON-LDの大きな違い>
microdataは、その情報が書いてあるソースを直接マークアップします。JSON-LDは宣言文があればheadだろうとbodyだろうとどこにでも書くことができます。もちろんユーザー側からは見えなくなります。

日本で使えるマークアップとは

日米でマークアップの効果は若干違うところがあるようなのですが、最終的にはすべて日本にも適用されることになりますのでできる限りマークアップをすることを推奨します。

業界関係なく使えるマークアップとしては以下等があります。

breadcrumb  ⇒パンくずリンクの指定はこれを使います。
review ⇒レビューです。コンシューマー向けサイトでは使えます。
image ⇒画像のマークアップです。 画像検索に有利に働く可能性があります。
Organization ⇒会社情報です。住所やブランド名等に使えます。

 

まとめ

主にジャンル別に作られているのでそのジャンルに沿ったマークアップを実践してほしいものです。
この2,3年の間にマークアップを実施しているサイトが結構増えてきました。利用価値もどんどん上がってきており、さらに高まりそうです。SEOの順位に関係がないと割り切って対応を後回しにしている方々は、どこかのタイミングで導入することをお勧めいたします。