Googleが推奨している

まずはコレですよね。

上に書いたように自分で効果を確認するとなると難しいですが、Googleが書いている以上は「おそらく」効果はあるんでしょう。

構造化データは悪用されている

構造化データをGoogleのガイドラインとは異なる形で利用し、不当にページ評価を得られるケースがあるそうです。

前に見かけたのは、旅行サイトの「FAQPage」やニュースサイトの「Event」などでのガイドライン違反でした。

加えて、つい先日、友人と話しに上がったのですが、フィッシングサイトが根拠のない「AggregateRating」を利用し、検索結果の上位に出ている例を見かけました。 アクセスしても怪しいページにリダイレクトされるタイプだったので、意図的に悪用しているんでしょう。

ここから言えそうなのは…、

ってことです。
(前者は悪用ではなく知識・技術不足ではないかと思っていますが)

これらの事実はGoogle公式の説明文より、ある意味においてはよっぽど説得力があると思います。

あ、悪用をしようって言ってるんじゃないですからね。 正しく効果を得ようとするための根拠の部分のお話です。

ただし必須でもない

先日、Nuxt.jsやら個人のゲーム攻略サイトやら、いくつかのテーマを掲げてオレGAME.comという実験場を作りました。

この中のひとつに「構造化データを使わない」というのがありました。
(ついでにパンくずリストも置かない)

結果は発売1カ月で100万PV達成という大成功。 詳しくはこのページあたりを見てください。

そのページに必要な構造化データをまず考える

ブログを例に考えます。

主軸となるのは「Article」です。

Articleには必須プロパティとして以下の3点が含まれています。

• Person：
  「author」プロパティに著者として。
• ImageObject：
  「image」「logo」プロパティに画像として。
• Organization：
  「publisher」プロパティに運営団体として。

必須プロパティの他にもいくつか大事な情報があります。

• BreadcrumbList：
  ページのパンくずリスト。
• WebPage：
  ページ自体の情報。
• WebSite：
  サイトの情報。

参考サイトに習い、この7種類を基本セットとします。

ページの内容によって「Article」が「FAQPage」になったり、そもそもなかったり(トップページとか)、変えればいいのかなと。

それぞれの構造化データを個別にマークアップする

上に挙げた7つの構造化データを個別にマークアップします。

例えばPersonだとこんな感じ。

{
  "@type":"Person",
  "name":"山田 メガネ"
}

この時に下のように「@id」を必ず指定しておいてください。

{
  "@type":"Person",
  "@id":"#Author",
  "name":"山田 メガネ"
}

あとで関連づけする時に使います。

実装する構造化データを配列にする

上で構造化したパーツを、「@graph」という名前で配列にします。 ImageObjectはロゴやバナーなど、用途に合わせて複数用意します。

{
  "@context":"https://schema.org",
  "@graph": [
    { "@type":"Article", //略 },
    { "@type":"Person", //略 },
    { "@type":"ImageObject", //略 },
    { "@type":"ImageObject", //略 },
    { "@type":"Organization", //略 },
    { "@type":"BreadcrumbList", //略 },
    { "@type":"WebPage", //略 },
    { "@type":"WebSite", //略 }
  ]
}

構造を見やすくするために極限までシンプルにしています。 もうちょっと具体的に書くと↓こんな感じ。

{
  "@context":"https://schema.org",
  "@graph": [
    {
      "@type":"Article",
      "@id":"article",
      //以下略

全文みたい人はこのページの構造化データを見てみてください。

各構造化データを関連づける

上のままではバラバラで意味を持たないデータになっているので、各要素を関連づけしていきます。

{
  "@type":"Article",
  //中略
  "author":{"@id":"#Author"},
  "image":{"@id":"#Banner"},
  "publisher":{"@id":"#Organization"},
  "isPartOf":{"@id":"#WebPage"}
}

{
  "@type":"Person",
  //中略
  "image":{"@id":"#AuthorImage"},
  "memberOf":{"@id":"#Organization"},
}

{
  "@type":"Organization",
  //中略
  "logo":{"@id":"#SiteLogo"},
  "image":{"@id":"#SiteBanner"},
}

{
  "@type":"WebPage",
  //中略
  "breadcrumb":{"@id":"#BreadcrumbList"},
  "primaryImageOfPage":{"@id":"#Banner"},
  "isPartOf":{"@id":"#WebSite"}
}

{
  "@type":"WebSite",
  //中略
  "image":{"@id":"#SiteBanner"},
  "publisher":{"@id":"#Organization"}
}

構造化データのチェック

マークアップが完了したら構造化データ テストツールで正しく書けているかチェックします。

HTMLとして公開していなくても<script>タグだけでもチェックかけられます。