構造化データ

AMP(accelerated mobile pages)をリッチカードとして表示するためには、構造化データが必要なので投稿いたします。

構造化データとは

サイト内の情報を、クローラが収集・解釈できるように、htmlに追記する補足情報

昨今、AMPの登場とSEOの観点から、重要視されている。

ボキャブラリ

構造化データの規格のこと

• schema.org（Google推奨）
• openGraph（SNSで多用）

この二つが代表的。

シンタックス

構造化データの記述方法のこと

ツールなら

• データハイライター
• 構造化データマークアップ

自分で書くなら

• microData
• JSON-LD
• RDFa
• Microformats
• OGP(facebook, lineなど)
• Twitterカード(twitter)

記述例

microData

<div>
        <div>
          <ol itemscope itemtype="http://">
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="">リスト１</a>
              <meta itemprop="position" content="1">
            </li>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="">リスト２</a>
              <meta itemprop="position" content="２">
            </li>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="">リスト３</a>
              <meta itemprop="position" content="３">
            </li>
          </ol>
        </div>
      </div>

（これは、パンくずリスト）

JSON-LD

<script type="application/ld+json">
{
  "@context":"http://schema.org",
  "@type":"BreadcrumbList",
  "itemListElement":[
    {
      "@type":"ListItem",
      "position":1,
      "url":""
    },
    {
      "@type":"ListItem",
      "position":2,
      "url":""
    },
    {
      "@type":"ListItem",
      "position":3,
      "url":""
    }
 ]
}
</script>

（これもパンくずリスト）

OGP（openGraphProtocolの略、プロトコルなのでシンタックスではないのかも）

<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="ページURL" />
<meta property="og:image" content="サムネイル画像URL" />
<meta property="og:site_name" content="webサイト名" />
<meta property="og:description" content="ページのディスクリプション" />

Twitter Cards（OGPの記述も必要）

<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="@[Twitter ID]">

ちなみに
facebookページ内だけだが、instant articleがあり、１０倍の速さでWebページを表示する。