とほほのAMP入門
目次
AMPとは
- Accelerated Mobile Pages の略です。[1]
- Google と Twitter 社が共同で開発したモバイルページの高速化技術です。キャッシュなどの技術を使用します。
- 下記で説明する、いくつかのルールを守ることで、モバイル用の Web 画面を高速に表示することが可能となります。
- その表示速度は平均4倍、データ量も 1/10 程度に抑えられると言われています。(参考) [2]
- AMP対応のページは、スマホで Google 検索した場合に、灰色のカミナリマーク がつきます。
- HTTP ではなく HTTPS を使用することが強く推奨されています。
- JSON-LD 形式のメタデータを埋め込むことが強く推奨されています。
- AMP Websites, AMP Stories, AMP Ads, AMP Email の4つの技術があります。
- ここでは、AMP Websites を中心に説明します。
AMP Websitesのテンプレート
AMP Websites 対応ページのテンプレートを下記に示します。
HTML
<!doctype html> <html amp lang="ja"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>AMPテンプレート</title> <link rel="canonical" href="https://www.example.com/amp_page.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> </head> <body> <h1>AMPテンプレート</h1> <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img> </body> </html>
- 2行目は <html amp> または <html ⚡> としてください。ここで絵文字を使うセンスが Google っぽくていいですね♪
<html ⚡ lang="ja">
- <link rel="canonical" href="..."> の箇所は、AMPページと非AMPページが存在する場合は互いに互いのURLを記述します。AMPページのみの場合は自身のURLを記述してください。
// AMPページと非AMPページがある場合の非AMPページ(AMPページのURL) <link rel="amphtml" href="https://www.example.com/amp_page.html"> // AMPページと非AMPページがある場合のAMPページ(非AMPページのURL) <link rel="canonical" href="https://www.example.com/no_amp_page.html"> // AMPページのみの場合のAMPページ(自分自身のURL) <link rel="canonical" href="https://www.example.com/amp_page.html">
- <style amp-boilerplate> ... の行は、JavaScript が AMP ページを描画するまでの間、コンテンツを非表示にするためのもので、上記のサンプルのまま入力してください。
- 作成したページは下記の「AMPテスト」サイト、もしくは、URL の後ろに #development=1 をつけて Chrome デベロッパーツールのコンソールで問題が無いかを確かめることができます。
AMP HTML
AMP で使用される HTML は、通常の HTML と少し異なります。下記に主なルールを紹介します。
- <img> は <amp-img>...</amp-img> としてください。
- <video> は <amp-video>...</amp-video> としてください。
- <audio> は <amp-audio>...</amp-audio> としてください。
- <iframe> は <amp-iframe>...</amp-iframe> としてください。
- <base>, <picture>, <frame>, <frameset>, <object>, <param>, <applet>, <embed> は使用できません。
- <script> は、type="application/ld+json" または type="text/plain" のものしか使用できません。
- <style> は <style amp-custom>...</style> としてください。1ページにひとつのみ使用できます。
- CSS でインラインのスタイル指定や、!important 修飾子は使用できません。
- CSS で transition や @keyframes は GPU アクセラレーションが可能なもののみなど、いくつかの制約があります。
- <link rel="stylesheet"> はカスタムフォントを除いて使用できません。
詳細は下記を参考にしてください。
- 初めてのAMPページを作成する (by Goole)
Copyright (C) 2020 杜甫々
初版:2020年4月12日 最終更新:2020年4月12日
https://www.tohoho-web.com/ex/amp.html