Help us understand the problem. What is going on with this article?

AMPルール

More than 3 years have 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エラーが出ていないか確認する

moyashiharusamen
フロントエンドエンジニアをしております。 初学者です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした