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

AMPとは

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

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

AMPの仕組み

AMPは以下の3つの技術に支えられている。

AMP HTML

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

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

AMPを導入するメリット

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

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

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

AMPを導入するデメリット

利用できるHTMLタグやCSS/JSに制限が多く、インタラクティブなページを作成するには不向きである。
CSSはWebフォントを除いてインラインで書く必要があり、その長さは50,000 Bまでと定められている。

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

ブラウザの対応状況

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

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

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

やってみよう

AMPページを作ってみよう

Googleのクイックスタートに例示されている、以下のコードがミニマルな構成である。

<!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⁵でのトラッキング方法は公式ドキュメントを参照
- 2018年8月現在利用可能なのは
  - ページトラッキング
  - イベントトラッキング
  - ソーシャルトラッキング
他の計測サービスについては、JavaScriptを埋め込む形式だと難しい
- gif画像などを埋め込む形式なら計測可能な場合もある

広告を貼ってみよう

AdSenseではAMP用の広告ユニット及び自動広告が提供されており、AMPページにタグを挿入することで導入できる。
各ASP⁶も対応しつつある。

Google AMP Cache を利用してみよう

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

モバイル・ファースト・インデックス。デバイスごとにページが用意されている場合、Googleはモバイル端末用のページのコンテンツを優先的にインデックスする。 ↩
適切にマークアップされていないAMPをブラウザ上で閲覧する事は可能だが、Googleにはキャッシュ／インデックスされない。 ↩
本来Googleが意図する機能ではないが、AMPページのキャッシュの寿命は予想外に長く（基本的にはクロール間隔と思われる）、数日程度ならAMPページへのアクセス数はほぼ落ちなかった。 ↩
正確に言えばAMPでなくても適切にマークアップされていれば表示される。 ↩
Google Analytics ↩
アフィリエイト・サービス・プロバイダ ↩

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