コピペのサンプルあり!構造化データマークアップのHTMLを使い倒す

Web制作 , テック系 7月 02, 2017 No Comments

最近の案件で構造化データマークアップを実装する機会がありました。
SEOよりの事業をしていない制作会社に、構造化マークアップに詳しい人はなかなかいません。
調べ倒した結果詳しくなったので、ここに備忘録として記します

最後によくあるシチュエーションで使えるサンプルを置いています。

構造化データマークアップとは

文字列に対して意味をメタデータとして持たせたマークアップを、構造化データマークアップと呼びます。
もっとくだいて言うと、エンドユーザーにではなく、詳しくGoogle検索ロボットに、htmlの内容が何なのかを教えるためのマークアップです。
検索エンジンは文字列が使われた背景や文脈までの理解がまだ困難です。そこで通常のHTMLに構造化データ用のタグを追加します。

たとえば、 「アバター」は大成功を収めた3D映画を指すことができるが、HTMLは文字列が何を意味するのかに関する情報を提供しない。

下記はMicrodataでの実装例

これだけではHTMLとしては正しいが、アルゴリスムにとってはこれが映画の説明だとは理解ができない。
そこで、Google検索エンジン用にHTMLを次のように追記します。

こうすると、このdivの塊が映画を意味していることを表し、正しくGoogleさんには映画の説明だということを伝えることができる。

構造化データマークアップをすると何が期待できるのか?

検索エンジンが文字列が使われた背景や、文脈まで理解できるようになることで、検索結果の見え方がより最適化される可能性がある。

リッチスニペットの一覧を見てみる

リッチスニペットの表示に関係する主な条件は次の3つです。


・リッチスニペットの品質ガイドラインにそっていること
・クエリとの関連性
・クオリティ

ただし、前述の項目を正しく実装されていたとて、必ず検索結果の表示に反映されることは保証されていない。
ここが、我々一般的な制作会社が手をつけない理由でもあるなと。
要するに、お金をかけて、時間をかけて構造化データマークアップを実装したところで、SEOには今の所関係がないのです。

構造化データマークアップの実践

主にフロントエンド側で担当することになります。実装のフローはこんな感じ。


1. 検索エンジンが対応しているリッチスニペットを確認
2. 自サイトが対応したいスニペットを決定
3. サンプルを見ながら自サイトのHTMLに当てはめる
4. 構造化データ テストツールで検証

構造化データマークアップの方法は三つ

現在Googleの検索エンジンが解釈する構造化データのフォーマットは以下の3つ

• JSON-LD (GoogleではJSON-LDを推奨)
• microdata
• RDFa

JSON-LDとは??

JSON-LDはJSONベースのデータ形式
Googleやその他の検索エンジンに対してサイトのコンテンツを構造化データとして記述するために使用することができる
このように

“@context”: “http://schema.org” てなんだ?

schema.org
Schema.orgは、インターネット、Webページ、電子メールメッセージなどの構造化データ用のスキーマを作成、管理、宣伝するという使命を持つ共同作業のコミュニティ活動です。
Schema.orgボキャブラリは、RDFa、Microdata、JSON-LDなど、さまざまなエンコーディングで使用できます。
これらのボキャブラリーは、エンティティ、エンティティとアクション間の関係をカバーし、適切に文書化された拡張モデルを通じて容易に拡張できます。

http://schema.org/

Schema.orgは管理している構造化データ用のスキーマの一覧はschema.orgのボキャブラリの一覧から確認することができる

コピペのサンプル作りました

JSONでのマークアップよりもHTMLをさわる人からすると、Microdataでのマークアップ方法の方がわかりやすい。
下記によく使うスニペットを用意しました。

現場ではすべてのHTMLに構造化データマークアップをしないでしょう。
もう一度いいますが、実装したからといってSEOが上がると約束されているものでもありません。
ですが、しないよりはいい!!だってGoogleのことを考えてマークアップしているんだから。

とはいえ手間はかけたくないので、簡単に実装できる箇所はコピペして実装したいところ。
実装でよく使う項目のサンプルを紹介します。

パンくずリストの実装

パンクズリストの実装はサイトの種類が違っても、大きく変化がないので下記のコードを使い回せます。

商品や画像に対しての実装

よくあるカードモジュールが並んだ商品一覧などには、下記のような記述を使いまわします。

商品画像や、商品名などが構造化データマークアップされているのがわかります。

気をつけて欲しいのは1行目のdivです。
わざわざ構造化データマークアップのためにdivで包括しているのがわかります。
ですので、後からHTMLを足す場合は少し注意が必要ですね。CSSは追加することを前提として書かなければいけません。

営業時間の実装

日付は制御できない

記事を投稿した日や、固定ページを作成した日を検索結果に出したいということはよくありますが、これはGoogleが自動で取得しているので、操作できません。

まとめ

年々構造化データマークアップは進化しており、できることも増えてきています。
そこまで手間がかからない部分は、実装してしまった方が親切だと思います。
おさらいすると、構造化データとは検索ロボットに、htmlの内容が何なのかを教えるためのマークアップです。

実装のフローのおさらい

1. 検索エンジンが対応しているリッチスニペットを確認
2. 自サイトが対応したいスニペットを決定
3. サンプルを見ながら自サイトのHTMLに当てはめる
4. 構造化データ テストツールで検証

調べれば調べるほど奥が深い構造化データマークアップでした。

ほなね

【PR】 社会人のための<格安>語学留学【寮・食事付き】172,000円/1ヶ月 の完全マンツーマン留学 フィリピン政府公式認定語学学校【NILS】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です