ナレッジの吐き出し用の投稿
AMP(accelerated mobile pages)について、わかりづらいので記述。
AMPとは
- Googleとtwitterが協力し、開発。
- GoogleのAMP用サーバーにキャッシュすることで、モバイル端末でのWebページの表示を高速化する
- そのために、現状のHTMLをAMP HTMLに書き換えるか、新規作成することが必要。
- 検索結果でAMPページを表示させたい場合：構造化データは必要ない。（以前は必須だったらしい）
- 検索結果のカルーセル（リッチカード）でAMPページを表示させたい場合：構造化データは必要。
AMP HTML, AMP CSS, AMP JavaScript
様々な規約がある。規約ありスギィ（要確認）
AMP HTML
<!doctype html>
<html ⚡> <!-- もしくはhtml amp -->
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
AMP CSS(本来このような表現はしない)
インライン要素で(50KB以内で)記述。
https://www.ampproject.org/docs/guides/responsive/style_pages
AMP JavaScript
- 非同期データ通信など動的なデータのやりとりはできない。
構造化データ
- クローラに効率よくデータの収集・解釈ができるように、補足的な情報をhtmlタグに追記する。
- AMPをカルーセル化するために必要。
- ボキャブラリー（構造化データの規格）、シンタックス（構造化データの記述方法）
- ボキャブラリーは、schema.org, openGraph(twitter, facebookなど？)
- シンタックスは、ツールならデータハイライター, 構造化データマークアップ, 自分で書くならmicroData, JSON-LD, RDFa, Microformats, OGP(facebook, lineなど？), Twitterカード(twitter)
microData
<div>
<div>
<ol itemscope itemtype="http://">
<li>
<a href=""><span>ぐるなび</span></a>
</li>
<li>
<a href=""><span>東京 グルメ</span></a>
</li>
<li itemprop="itemListElement" itemscope itemtype="">
<a itemprop="item" href=""><strong><span itemprop="name">銀座 グルメ</span></strong></a>
<meta itemprop="position" content="1">
</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ページを表示する。
マークザッカーバーグにIE作って欲しいわ