この内容について
この内容は、AMPをはじめたい方に向けた基礎的な記事になります。
AMPとは ( アンプ )
Accelerated Mobile Pagesの略で、
モバイル端末向けに最適化したWebページの読み込みを高速化できるフレームワーク。
AMPは、WebページのデータをGoogle側がキャッシュしてくれており、リクエストがあった場合に
そのデータをレスポンスするので高速化が実現されています。
ちなみにAMPは、2015年10月7日に発表された新しめな技術です。
導入方法
HTMLファイルを用意する
作成するAMPページ用にHTMLファイルを用意します。
この後の説明は全てそのHTMLファイル内に記述してください。
必要な記述をする
DOCTYPE宣言
<!DOCTYPE html>
htmlタグ
ページをAMPコンテンツとして識別します。
html開始タグの小なりの前に「⚡️(雷マーク)」か「amp」と書きます。
<html ⚡️>
<!-- headタグ -->
<!-- bodyタグ -->
</html>
headタグ
<head>
<!-- headタグの中身 -->
</head>
bodyタグ
<body>
<!-- bodyタグの中身 -->
</body>
ページエンコード ( headタグ内 )
ページのエンコードを識別します。
<meta charset="UTF-8">
AMP JSライブラリを読み込む ( headタグ内 )
<script async src="https://cdn.ampproject.org/v0.js"></script>
canonicalにページを指定 ( headタグ内 )
重複ページがないよう設置するcanonicalに正規としたいページを指定します。(そのページのURLでOK)
<link rel="canonical" href="ページURL">
レスポンシブなビューポートを指定 ( headタグ内 )
モバイル端末に適した表示サイズにします。
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
ボイラーテンプレート ( headタグ内 )
AMP JSが読み込まれるまで、コンテンツを非表示にする記述で、AMPに必須のコードです。
<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>
最終的なコード
<!DOCTYPE html>
<html ⚡️>
<head>
<meta charset="UTF-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="ページURL">
<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>
</head>
<body>
<!-- bodyタグの中身 -->
</body>
</html>
テストする
下記のサイトを使って、AMP対応できているかテストします。
AMP テスト
コードをコピペするか、公開したサイトのURLがあればテストできます。
AMPの記述にエラーがなければ、下記のように「有効なAMPページです」と表示されます。
注意点
AMPは癖のあるコードの書き方をします。
例えば、imgタグは使えず、代わりにamp-imgタグを使います。
上記は一例で、他にも制限が多いです。
また、AMPはCSSやJSファイルを読み込むことができません。
そのため、CSSやJSを適用させるには、インラインでの記述(styleタグやscriptタグでの記述)をしなければいけません。
AMPによるメリット・デメリット
メリット
- 表示速度が高速化されるので、ユーザのストレスが減る
- 良記事であれば、リッチリザルト(カルーセル)に採用される可能性がある
総合的に言うと、ページ流入が増えるかもしれないと考えましょう。
デメリット
- 開発発展途中な部分もあるので、その都度の対応が必要になる
- 制限が多いため、APIがAMP対応しているかなども注意していなければいけない
- コードの書き方に癖があるため、エラーが出やすい
総合的に言うと、管理工数がよりかかってしまうと考えましょう。
まとめ
GoogleはAMPを推奨しています。
しかしながら、導入する工数がかかってしまうので、採用するかどうかは
今後も考えながらにするかと良いと思います。
個人的に、ニュースサイト系なら導入する価値はあるのかなと思います。
書き方の癖が本当にあるので、また別記事にまとめていこうと思います。
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)