HTML
google
スマホ
高速化
AMP

AMP HTML ざっくりまとめ

AMP とは

AMP(Accelerated Mobile Pages) は、Googleが発表したモバイル高速化技術です。
4,500社以上のパブリッシャーや、WordPress.com がパートナーに参加し、2016年2月後半からGoogle検索トラフィック送信を開始すると発表しています。
検索結果に影響があるとすれば、サイト運営者はGoogle様に振り回される対応を検討する必要がありそうです。
https://www.ampproject.org/
https://github.com/ampproject

追記:Google検索、AMP対応を2月24日に開始、検索結果に表示へ。
自然検索結果へのインパクトも予想されています。
http://www.sem-r.com/news-2015/20160219092116.html

AMP HTML

ほとんどはHTMLですが、一部がAMPのプロパティで拡張されています。
絵文字⚡が斬新ですが、文字列 amp でもok。

サンプル

HTML
<!doctype html>
<html ⚡>
 <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>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

ざっくり仕様

タグ AMP HTML
script application/ld+json 以外NG
img, video, audio, iframe AMPタグに置き換え
frame, frameset, object, param, applet, embed, form, input elements NG(buttonはOK)
style headタグ内OK、amp-custom属性が必要
link canonical 以外NG(一部ホワイトリスト登録OK)
meta http-equiv のみNG
a javascript の使用はNG
svg ほとんどOK

AMP タグ

  • amp-img
  • amp-audio
  • amp-anim
  • amp-ad
  • amp-pixel
  • amp-video
  • amp-brightcove
  • amp-carousel
  • amp-font
  • amp-lightbox
  • amp-iframe
  • amp-instagram
  • amp-twitter
  • amp-vine
  • amp-youtube

追記

Movable Type で対応する方法など、詳細はこちらもどうぞ
http://blog.lqd.jp/html/001023.html

Google検索結果に表示されましたので、結果についてはこちらもどうぞ
http://blog.lqd.jp/html/001087.html

フルAMPのWordPressテーマを開発した件
https://qiita.com/lqd_jp/items/9017f4919fcdcaf5eabf