エンジニアのためのAMP入門

広告・SEO業界で働くエンジニアのためのAMP入門（ピンポイント）。

# [AMP](https://www.ampproject.org/ja/)とは

Accelerated Mobile Pages の略で、モバイル端末（スマートフォン）で超高速に表示する仕組み。
GoogleはMFI[^mfi]を開始しており、今後Googleからの自然流入を獲得するには、各メディアはモバイル端末でのUXを向上させることが重要になる。

AMPがどのように動作するかは、[テンプレートサイト](https://www.ampstart.com/)や[コード例のサイト](https://ampbyexample.com/)で見ることができる。
また、AMPは検索結果にAMPマークが表示されるので、スマートフォンで適当な単語をググってみても良い。

## AMPの仕組み

[AMPは以下の3つの技術に支えられている](https://www.ampproject.org/learn/overview/)。

### [AMP HTML](https://www.ampproject.org/ja/docs/fundamentals/spec)
AMPは一部のHTMLを専用タグ（AMP-specific tags）に置き換え、その属性（大きさなど）を指定させることでレンダリングの高速化を行っている。

例えば `<img>` タグは `<amp-img>` タグに置き換えねばならず、画像の拡大方法・サイズの指定が必須になる。

### AMP JS

AMPでは、後述のAMP CacheのCDNにキャッシュされているJS以外の読み込み・実行を禁止することにより、ページ表示を高速化している。

AMPを解析するための `https://cdn.ampproject.org/v0.js` の読み込みは必須だが、その他のAMP JSは必要なもののみ読み込ませれば良い。

### [Google AMP Cache](https://developers.google.com/amp/cache/)

Googleは適切にマークアップされたAMP[^markup]をCDNにキャッシュする。
キャッシュ対象はHTMLだけでなく、 `<amp-img src="...">` などで指定されたファイルも対象である。

## AMPを導入するメリット

AMPがGoogleにインデックスされると、SEOにおいて

- Googleにページがキャッシュされ
    - 高速なページ表示が行われる
    - （サイト本体が落ちていてもコンテンツを表示可能な場合がある[^cache]）
- マークアップに応じて検索結果一覧ページにコンテンツを表示させることができる[^schema]

というアドバンテージがある。

## AMPを導入するデメリット

利用できるHTMLタグやCSS/JSに制限が多く、インタラクティブなページを作成するには不向きである。
CSSはWebフォントを除いてインラインで書く必要があり、その[長さは50,000 Bまでと定められている](https://www.ampproject.org/ja/docs/design/responsive_amp#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%92%E6%A4%9C%E8%A8%BC%E3%81%99%E3%82%8B)。

そもそもモバイル端末による閲覧の高速化が目的なので、リッチでインタラクティブなコンテンツとは相容れない。
ページの目的に応じて導入を検討すべきである。

### 最新の改善

インタラクティブ・ダイナミックコンテンツについては専用タグが整備されつつあり、現状でも通常のHTMLページに見劣りしないページを作成することが可能である。
最近では [`amp-date-picker` が正式に公開された](https://www.ampproject.org/ja/docs/reference/components/amp-date-picker)。

また、既存のコンテンツを自動でAMPに変換するツールも日々改善されている。
よく利用されているものとして、WordPressの記事ページを自動でAMP化する[AMP for WordPress](https://ja.wordpress.org/plugins/amp/)がある。

現在は既存ページとは別に簡単なデザインのAMPページを作成し、適切な `<link>` を設定するだけのシンプルなプラグインだが、実装の面倒なタグ置き換えが解決できるのは便利だ。
ベータ版では（モバイル）サイトのデザインをそのままにAMPに変換する[Native AMP](https://xwp.co/an-introduction-to-native-amp/)が開発されている。

## ブラウザの対応状況

> Chrome、Firefox、Edge、Safari、Opera といった主要ブラウザの最新バージョンとその 1 つ前のバージョンをサポートしており、パソコン、スマートフォン、タブレット、各種ブラウザのウェブビュー版に対応

引用元：https://www.ampproject.org/ja/support/faqs/supported-browsers

よほど古いブラウザでなければ、内容が読めないといった事にはならないだろう。

# やってみよう

## AMPページを作ってみよう

[Googleのクイックスタート](https://www.ampproject.org/ja/docs/getting_started/quickstart)に例示されている、以下のコードがミニマルな構成である。

```html
<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello AMP world</title>
    <link rel="canonical" href="hello-world.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>Hello AMP World!</h1>
  </body>
</html>
```
Googleは `<html ⚡>` または `<html amp>` を検出すると、ページをAMPとして認識する。

コードのバリデーションは https://validator.ampproject.org/ などを利用する。

### 既存のコンテンツのAMP版を作成する場合

Googleに重複コンテンツとみなされないように、

- 元のページに `<link rel="amphtml" href="[AMPページのURL]" />`
- AMPページに `<link rel="canonical" href="[元のページのURL]" />`

を記述する。

AMPのみの運用をする場合は、canonicalに自分自身のURLを指定する。

### 構造化データマークアップ

*構造化マークアップは必須ではない*が、Json形式で https://schema.org/ のマークアップを記述すると、通常のページと同様、検索エンジンにページの内容・構造を伝えることができる。
詳細は https://developers.google.com/search/docs/guides/about-amp を参照。

## 計測してみよう

トラッキングタグの導入に限らず、AMPに何らかの機能を追加する際はAMP JSから適切なjsファイルを読み込む必要がある。

- GA[^ga]でのトラッキング方法は[公式ドキュメント](https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja)を参照
    - 2018年8月現在利用可能なのは
        - ページトラッキング
        - イベントトラッキング
        - ソーシャルトラッキング
- 他の計測サービスについては、JavaScriptを埋め込む形式だと難しい
    - gif画像などを埋め込む形式なら計測可能な場合もある

## 広告を貼ってみよう
- AdSenseでは[AMP用の広告ユニット](https://support.google.com/adsense/answer/7183212?hl=ja)及び[自動広告](https://support.google.com/adsense/answer/9011462?hl=ja)が提供されており、AMPページにタグを挿入することで導入できる。
- 各ASP[^asp]も対応しつつある。

## Google AMP Cache を利用してみよう

AMP CacheのCDNにキャッシュされたリソースは誰でも利用することができる。
以下のページを参照されたい。
https://developers.google.com/amp/cache/
https://developers.google.com/amp/cache/overview


[^asp]: アフィリエイト・サービス・プロバイダ
[^cache]: 本来Googleが意図する機能ではないが、AMPページのキャッシュの寿命は予想外に長く（基本的にはクロール間隔と思われる）、数日程度ならAMPページへのアクセス数はほぼ落ちなかった。
[^cms]: コンテンツ・マネジメント・システム
[^ga]: Google Analytics
[^markup]: 適切にマークアップされていないAMPをブラウザ上で閲覧する事は可能だが、Googleにはキャッシュ／インデックスされない。
[^mfi]: [モバイル・ファースト・インデックス](https://webmaster-ja.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html)。デバイスごとにページが用意されている場合、Googleはモバイル端末用のページのコンテンツを優先的にインデックスする。
[^schema]: 正確に言えばAMPでなくても適切にマークアップされていれば表示される。