構造化データマークアップのサンプル作ったから使ってね！

Google検索結果に目次でるのなに？
構造化データマークアップってなに？

それ、リッチスニペットって言われるものです。
構造化データマークアップと言って、HTMLにgoogleさんにわかりやすいようにHTMLに追加でマークアップすることで表示されます。

これです。

注意しなければいけないのは、構造化データマークアップをしたからといって必ずでるものでもないし、SEOに効果があるとGoogleが言ってる訳でもありません。
あくまで今のところ”有効かもね。しといたらいいかもね。”ぐらいなゆるい感じです。

でもデメリットはありません。

最近の案件で構造化データマークアップを実装する機会がありました。
SEOの事業をしていないWeb制作会社に、構造化マークアップに詳しい人はなかなかいません。

誰にも聞けずに調べ倒した結果、詳しくなったのでここに備忘録として記します

最後によくあるシチュエーションで使えるサンプルを置いています。
コピペして使ってください。

構造化データマークアップとは
構造化データマークアップの実践
1. 構造化データマークアップの方法は三つ
2. “@context”: “http://schema.org” てなんだ?
構造化データマークアップののサンプル作りました
まとめ

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

文字列に対して意味をメタデータとして持たせたマークアップを、構造化データマークアップと呼びます。
もっとくだいて言うと、エンドユーザーにではなく、詳しくGoogle検索ロボットに、htmlの内容が何なのかを教えるためのマークアップです。

検索エンジンは文字列が使われた背景や文脈までの理解がまだ困難です。
そこで通常のHTMLに構造化データ用のタグを追加します。

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

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

下記はMicrodataでの実装例

<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

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

<div itemscope itemtype ="http://schema.org/Movie">
　<h1 itemprop="name">Avatar</h1>
　<div itemprop="director" itemscope itemtype="http://schema.org/Person">
　Director: <span itemprop="name">James Cameron</span>
　(born <span itemprop="birthDate">August 16, 1954</span>)
　</div>
　<span itemprop="genre">Science fiction</span>
　<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">
　Trailer
　</a>
　</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

JSON-LDとは??

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

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "John Doe",
"jobTitle": "Graduate research assistant",
"affiliation": "University of Dreams",
"additionalName": "Johnny",
"url": "http://www.example.com",
"address": {
"@type": "PostalAddress",
"streetAddress": "1234 Peach Drive",
"addressLocality": "Wonderland",
"addressRegion": "Georgia"
}
}
</script>

“@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のことを考えてマークアップしているんだから。

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

パンくずリストの実装

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

<ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <span itemprop="name">
          <a href="/">TOP</a>
        </span>
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <span itemprop="name">商品一覧</span>
    </li>
</ol>

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

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

<div itemscope itemtype="http://schema.org/Product">
    <a class="merch-card-link" href="/archives/product/xxxxx">
        <div class="merch-card-thumb" itemprop="image"></div>
        <div class="merch-card-content">
            <div class="merch-card-category">
                <span>アパレル</span>
            </div>
            <div itemprop="name">
                <h3 class="merch-card-title">オリジナルジャンパー</h3>
            </div>
            <p class="merch-card-desc">スポーツチームや販促スタッフなど、お揃いのジャンパーをオーダーメイドで制作致します。... </p>
        </div>
    </a>
</div>

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

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

営業時間の実装

        <h2 class="col-title corporate-col-title">会社概要</h2>
        <table class="corporate-table" itemscope="itemscope" itemtype="https://schema.org/LocalBusiness">
            <tbody>
                <tr>
                    <th>社名</th>
                    <td itemprop="name">
                        株式会社 アルテガ
                    </td>
                </tr>
                <tr>
                    <th>電話番号</th>
                    <td>
                        <dl class="corporate-table-inner u-hhiden">
                            <dt>大阪本社</dt>
                            <dd itemprop="telephone">000-0000</dd>
                        </dl>
                    </td>
                </tr>
                <tr>
                    <th>FAX番号</th>
                    <td>
                        <dl class="corporate-table-inner u-hhiden">
                            <dt>大阪本社</dt>
                            <dd itemprop="faxNumber">000-0000</dd>
                        </dl>
                    </td>
                </tr>
                <tr>
                    <th>住所</th>
                    <td>
                        <dl class="corporate-table-inner u-hhiden">
                            <dt>大阪本社</dt>
                            <dd itemprop="address">〒xxx-xxxx あそこの隣のそのらへん</dd>
                        </dl>
                    </td>
                </tr>
                <tr>
                    <th class="corporate-vertical-top">事業内容</th>
                    <td itemprop="description">
                        OEM生産企画デザイン
                        <br> セールスプロモーションプロデュース
                        <br> イベント運営支援
                        <br> 販促物企画製作
                        <br> ECサイト企画運営
                    </td>
                </tr>
            </tbody>
        </table>