HTML5
CSS3
HTML,CSS
AMP

構造化データ

構造化データ

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

構造化データとは

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

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

ボキャブラリ

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

この二つが代表的。

シンタックス

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

ツールなら

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

自分で書くなら

  • 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="">リスト1</a>
              <meta itemprop="position" content="1">
            </li>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="">リスト2</a>
              <meta itemprop="position" content="2">
            </li>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
              <a itemprop="item" href="">リスト3</a>
              <meta itemprop="position" content="3">
            </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があり、10倍の速さでWebページを表示する。