Edited at

AMPルール

More than 1 year has passed since last update.

AMPでブログを作成しようと考え中ですが、ルールが複雑なので備忘録として記述。

あまりにもルールが多いため、最低限必要だと思ったものを抜粋。

※調査段階なので実際にAMPはまだ使っていません。


HTML


文章宣言はhtml5と同じ下記を記述

<!doctype html>


html属性

<html amp>

もしくは

<html >


meta要素

head内最初の要素

<meta charset="utf-8">

またビューポートも記述(下記は例)

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">


同じコンテンツが2つあることにならぬよう、canonicalで元ページを指定

<link rel="canonical" href="http://example.com">


上記に付随しAMPと非AMPページがある場合は区別出来るよう、AMPページには上記を。非AMPページには下記を記述

<link rel="amphtml" href="http://example.com">


AMPを読み込むためにheadの最後に記述

<script async src="https://cdn.ampproject.org/v0.js"></script>


AMP高速化実現に必要なboilerplateをhead内に記述

<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>


-amp-で始まるクラス名は指定出来ない


schema.orgを用いた構造化データが過去には必須(ないとconsoleエラーだった)であったが今は必要ない。ただし、カルーセルには下記のうちどれかが必要


  • Article

  • NewsArticle

  • NewsArticle

  • VideoObject


代替が必要なタグ

代替前
代替後

img
amp-img

video
amp-video

audio
amp-audio

iframe
amp-iframe


禁止タグ


  • applet

  • base

  • embed

  • form(将来的に対応予定)

  • frame

  • frameset

  • object

  • option

  • param

  • select

  • textarea


amp-imgはpタグで囲み、widthとheightを固定値で指定

詳しくはこちらを参照

http://qiita.com/moyashiharusamen/items/ae373f8e924f63a99889


CSS


公式

https://www.ampproject.org/docs/guides/responsive/style_pages


容量

50kbまで


!importamtは使えない


インラインで書き込む

head内に下記のように書き込む

<style amp-custom>

</style>

外部読み込みは基本的に出来ない

<link rel="stylesheet" href="">


例外的に外部読み込みが可能

PHPでincludeする

現在のところconsoleエラーは出ない


広告(Google Adsense)


公式

https://analytics-ja.googleblog.com/2016/02/google-amp-accelerated-mobile-pages.html


使用方法

下記コードを貼り付け

*部分に自分のアドセンスコードを貼り付け

<amp-ad width=300 height=300 type="adsense" data-ad-client="ca-pub-*" data-ad-slot="*"> </amp-ad>

head内に下記コードを貼り付け(必須ではないが推奨)

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>


Google Analytics


使用方法

head内に下記コードを記述

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

body内に下記コードを記述

*部分に自分のアナリティクスコードを貼り付け

<amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-*-*" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>


動作確認方法

確認中のURL最後尾に下記を記述

#development=1

それから検証画面でconsoleエラーが出ていないか確認する