(cache) モバイルページの高速化！ AMP（Accelerated Mobile Pages）に対応したHTMLの作成方法

モバイルページの高速化！ AMP（Accelerated Mobile Pages）に対応したHTMLの作成方法

書籍出版のお知らせ NEW

ICSでは電子工作の入門書を執筆！アマゾンの「本：パソコン・周辺機器」カテゴリーでベストセラーになりました。

みなさんはモバイルページにAMP（Accelerated Mobile Pages）を導入していますか？　AMP（アンプ）とは、2016年2月24日にGoogleが導入した、モバイル端末でのWebページの表示を高速化するためのプロジェクトです。

AMPに対応したWebページを作成することで、従来に比べ平均4倍程の速度でWebページを表示することができます。また、検索キーワードと関連性がある場合に、モバイルでのGoogleの検索結果の上部に表示されるようになります。

AMP demo

こちらは実際にGoogleで「消費税」というキーワードで検索した際の動画です。検索結果の上部にカルーセル形式で表示されているものがAMPに対応したWebページです。選択するとすぐにWebページが表示されることが分かると思います。

本記事ではAMPに対応したWebページの作り方を紹介します。

AMPとは

冒頭でも説明しましたが、AMP（アンプ）とはモバイル端末でのWebページの表示を高速化するためのプロジェクトです。GoogleとTwitterが共同で開発しており、他にもTwitter、Pinterest、LinkedInなどのプラットフォームでもAMPがサポートされる予定となっています。

AMP HTMLに準拠したWebページを公開すると、GoogleのクローラーがAMPページをキャッシュし、検索結果に関連が深いと判断した場合に、検索結果にAMP対応ページをカルーセル形式で表示します。また、リンクを選択するとキャッシュされているページを表示するため、読み込み時間を大幅に短縮して表示できます。

AMPページが表示される流れ

※こちらの図はGoogle Developers Japanより引用しています。

AMP対応ページの作り方

AMP対応ページはAMP HTMLの仕様に準拠して作成する必要があります。通常のHTMLと同様に作成することができますが、特殊な記述ルールやJavaScriptが使用できないなどの制約があるため、別途AMP専用ページを作成する方がよいと思います。

必須で準拠すべき仕様について

AMP対応ページでは、必須で準拠する必要のある仕様がいくつかあります。準拠していない場合、検索結果に表示されない可能性があります。必須で準拠する必要のある仕様を下記にまとめました。項目は多いですが、特に難しいことをしているわけではありません。

HTMLはdoctype宣言から開始します。
```
<!doctype html>
```
html要素には⚡の絵文字か<html amp>と記述します。
```
<html ⚡>
```
head要素にcanonicalURLでPCページのURLを指定します。
```
<link rel="canonical" href="PCページのURL">
```
head要素の直下に文字コードを指定します。UTF-8以外は対応していないようです。
```
<meta charset="utf-8">
```

head要素にviewportの設定を行います。

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

AMP用JavaScriptライブラリーを読み込みます。

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

head要素内にboilplateを記述します。boilplateとは「お決まりのコード」のようなもので、style要素にamp-boilerplate属性を付加して記述する必要があります。

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

JSON-LDを指定します。JSON-LDとはWeb上でコンピュータ処理に適したデータを公開・共有するための技術の総称です。指定することで、そのページがどのようなページであるかを正確にクローラーに伝えることができます。
```
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "headline": "Article headline",
  "image": [
    "thumbnail1.jpg"
  ],
  "datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
```

上記の仕様にそってAMP対応ページのHTMLを作成すると下記のようになります。下記のコードは最低限必要なタグをすべて記述したものになります。コピーしてそのままお使いいただけます。

<!doctype html>
<html ⚡> 
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="PCページのURL">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
<body>

</body>
</html>

body要素内は自由に任意のコンテンツの内容を記述することができますが、AMP HTMLに対応させるためには守らなければいけない制約があります。次のページではHTMLを記述していく際の制約や注意点を説明します。