ウェブサイトをAMPに対応させる方法

最近になって、ウェブサイトをAMPに対応させる案件が増えてきた。主にSEO案件。サイトの高速表示が出来ることで、検索結果にも有利という理由だ。

AMPについては2016年あたりにはじめてその言葉を聞いて、当時はニュースの記事ページや、ブログの投稿ページだけがそれに該当する、って話だったけど、今はもう少し色々なページがAMPに対応出来るようになっているらしい。

ということで、AMPの一般的な特徴、仕組み、実装方法を勉強がてらまとめてみる。

この記事の目次

AMPとは
AMP対応ページのコーディングの流れ

AMPとは

Googleが推進する「モバイル環境でのページ表示を高速化しようぜ」ってプロジェクトで、『Accelerated Mobile Pages』の頭文字の略称。公式ページも存在する。

具体的にどうやって高速化するのかというと、HTMLやCSSやJavaScriptで出来ることを制約して、物理的な転送量を軽量化し、Googleの検索サーバーにキャッシュ(Google AMP Cache)を置くことで実現する。そこにキャッシュがあることで、検索結果で表示されたリンクをクリックされた際に、いちいちサイトが存在するサーバーまで見に行かなくても、キャッシュを表示させるだけなので、瞬時にページが表示されるよ、という流れ（AMPキャッシュには雷アイコンが表示される）。

AMPに対応させるための条件

AMP対応のページには、以下のような制約が課せられる。

使えるHTMLタグに制約がある
HTML、CSSはminifyする
CSSのファイルサイズは最大75KBまで
使えるJavascriptに制約がある（jQueryが使えない）
一部を除き、外部ファイルの読み込みが禁止

他にも、ビデオやオーディオファイルの読み込み、CSSの@keyframesや@font-faceにも、使い方の制約が存在する。詳細は、AMPの仕様を確認。

なので、なんでもかんでも「無理にでもAMP対応させなきゃいけない」ってわけじゃなく、まずはAMP対応させるべきページのジャッジが必要。

そのページがAMPに対応難しいデザインだったりレイアウトだったりするなら、『元ページとAMP用ページという２枚使い』の立ち回りも選択するケースもある。基本は後者が多いのかな。

AMPで表現できること

JSもCSSアニメーションもまともに使えないなら、画像とテキストだけの世界になりそうだなと思うが、一応 AMP専用の動きを表現する環境は用意されている。

例えば、以下のようなもの。

カルーセル、画像ギャラリー

『amp-carousel』という方法で、画像ギャラリーを実装することができる。横に動くカルーセルや、サムネイルで画像が切り替わるタイプが実装可能。

実際のサンプルは『カルーセルを追加する』からも見れる。

カルーセルのサンプルコードを１つ。

<amp-carousel width="" height="" type="slides" autoplay layout="responsive">
    <div class="carousel-item">
        <a href="">
            <amp-img layout="responsive" width="" height="" src="sample01.png" alt=""></amp-img>
        </a>
    </div>
    <div class="carousel-item">
        <a href="">
            <amp-img layout="responsive" width="" height="" src="sample01.png" alt=""></amp-img>
        </a>
    </div>
    <div class="carousel-item">
        <a href="">
            <amp-img layout="responsive" width="" height="" src="sample01.png" alt=""></amp-img>
        </a>
    </div>
</amp-carousel>

カルーセルのオプションも用意されている。

ループ再生ならloop、自動再生ならautoplay、スライド速度を指定するならdelay=300など（300ミリ秒の例）。

あとはスライドの左右のボタンも標準で用意されている。ただ、デフォルトでは非表示になっているため、CSSで表示してあげないといけない。

.amp-carousel-button{
    visibility: visible;
}
.amp-carousel-button-next {
}
.amp-carousel-button-prev {
}

アニメーション

『amp-animation』という方法で実装可能。あとは、サンプルがある『CSSアニメーションとトランジションのトリガ』とか。もしくは、『amp-anim』というアニメーションGIF的な表現も出来る。

その他

他にも動画や音声なども使える。

AMP対応ページのコーディングの流れ

サンプル

公式サイトのサンプルコードは以下。

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <link rel="canonical" href="self.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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
  <h1>Hello AMPHTML World!</h1>
</body>
</html>

解説

まずは２行目。DOCTYPE宣言後にAMP HTML宣言をおこなう。これを宣言することで、「このページはAMP用ページだぜ」となる。

<html amp lang="ja">　または　<html ⚡>

4行目。CHARSETとビューポートの設定を記述。文字コードはutf-8をセット。

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

6行目。カノニカルの設定をする。AMPページしかないならそのURLを記述。元ページとAMPページの２つが存在している状態なら、元ページのほうのURLを記述する。

<link rel="canonical" href="self.html" />

※ちなみに、元ページとAMPページの２つが存在している状況の場合、元ページ側でも「AMPページがあるよ」とボットに教えて上げなきゃいけないので、以下のようなタグを元ページにも追記する。URLはAMPページのURL。

<link rel="amphtml" href="https://www.example.com/amp_page.html">

7行目。ビューポートはwidthとminimumが必須、initial-scaleは定義自由だが、モバイル環境が前提なのでセット推奨。基本は以下をコピペ利用でOK。

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

8行目。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>

続いて、AMP用のJSファイルを非同期で読み込む。AMPページではこれが読み込まれてからコンテンツがレンダリングされる。

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

ちなみに、AMPページでは、JavaScriptの利用方法には制限がある。script要素を使う場合は、application/ld+json または application/jsonを指定する必要がある。読み込む場合は非同期（async）にする必要がある。

※新たに<amp script>を使うことで、以下の制約はあるが、一定の表現が出来るようになったらしい。

ファイルサイズは150KBまで
ユーザーがアクションを起こすまで実行は出来ない（ロードで実行は不可）

これについては、以下ページを参照。

Google Developers
https://developers-jp.googleblog.com/2019/10/amp-script-amp-js.html

AMP
https://amp.dev/documentation/guides-and-tutorials/develop/custom-javascript/

続いてCSS。原則『読込時間を節約するため』にインラインで記述。CSSには75KBまでのサイズ制約がある。インラインで読み込む場合は、<style>がそのまま使えないので、以下のようにamp-customを付ける。

<style amp-custom>
  h1 {
    margin: 1rem;
  }
</style>

外部読込が必要な場合は、

<!--#include virtual="css/hoge.css" -->

ちなみに、CSSは設定方法についても以下のルールがある。

-amp-からはじまるclassの定義不可、CSSで設定不可
i-amp-からはじまるタグをCSSで設定不可
transitionは、opacityとtransformだけ設定可

あとはウェブフォントやウェブアイコンの設定。これは、linkで読み込むか、@font-faceを指定する方法がある。ただし、linkで読み込みが許可されているのは、ホワイトリストに登録されているプロバイダーのみとなる。

Typography.com
https://cloud.typography.com
Fonts.com
https://fast.fonts.net
Google Fonts
https://fonts.googleapis.com
Typekit
https://use.typekit.net

これらのホワイトリスト登録されているものは、従来通りのlink設定で行けるが、FontAwesomeに限っては、Hosting Font Awesome Yourselfを参考に、linkで読み込む方法で。

普通のHTMLと同じようにマークアップをしていくんだけど、imgタグをはじめ、AMP専用のタグに置き換えが必要だったり、そもそも使えないタグもあったりする。

img	画像は、amp-imgを使うアニメーションGIFは、amp-animを使う
audio	amp-audioへ置換
video	amp-videoへ置換
iframe	amp-iframeへ置換
a	href属性に”javascript:” の記述不可 target属性は”_blank”のみ利用可
style	amp-customでインライン表記。外部CSSの直接リンク不可。
script	type属性が”application/ld+json”か”text/plain”のみ使用可
form	amp-formコンポーネントの読み込み必要

applet, base, embed, frame, frameset, object, paramは、利用不可

どんなタグをどのように記述するかは、「The AMP Components Catalogue」を参照。

最後にAMPページが本当に出来上がったかをAMPテストページでテストする。『有効なAMPページです』と表示されればOK、『有効なAMPページではありません』と表示されたら、エラー箇所を確認して修正する。

あとは、ページ内に構造化データがあるなら、それのテストも構造化データテストツールで必要。