とほほのAMP入門

AMPとは
AMP Websitesのテンプレート
AMP HTML

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

// 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 デベロッパーツールのコンソールで問題が無いかを確かめることができます。
- https://search.google.com/test/amp?hl=JA

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)

初版:2020年4月12日最終更新:2020年4月12日

https://www.tohoho-web.com/ex/amp.html