Posted at

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

More than 1 year has passed since last update.

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


AMPとは

Accelerated Mobile Pages の略で、モバイル端末(スマートフォン)で超高速に表示する仕組み。

GoogleはMFI1を開始しており、今後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は適切にマークアップされたAMP2をCDNにキャッシュする。

キャッシュ対象はHTMLだけでなく、 <amp-img src="..."> などで指定されたファイルも対象である。


AMPを導入するメリット

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


  • Googleにページがキャッシュされ


    • 高速なページ表示が行われる

    • (サイト本体が落ちていてもコンテンツを表示可能な場合がある3



  • マークアップに応じて検索結果一覧ページにコンテンツを表示させることができる4

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


AMPを導入するデメリット

利用できるHTMLタグやCSS/JSに制限が多く、インタラクティブなページを作成するには不向きである。

CSSはWebフォントを除いてインラインで書く必要があり、その長さは50,000 Bまでと定められている

そもそもモバイル端末による閲覧の高速化が目的なので、リッチでインタラクティブなコンテンツとは相容れない。

ページの目的に応じて導入を検討すべきである。


最新の改善

インタラクティブ・ダイナミックコンテンツについては専用タグが整備されつつあり、現状でも通常のHTMLページに見劣りしないページを作成することが可能である。

最近では amp-date-picker が正式に公開された

また、既存のコンテンツを自動でAMPに変換するツールも日々改善されている。

よく利用されているものとして、WordPressの記事ページを自動でAMP化するAMP for WordPressがある。

現在は既存ページとは別に簡単なデザインのAMPページを作成し、適切な <link> を設定するだけのシンプルなプラグインだが、実装の面倒なタグ置き換えが解決できるのは便利だ。

ベータ版では(モバイル)サイトのデザインをそのままにAMPに変換するNative AMPが開発されている。


ブラウザの対応状況


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ファイルを読み込む必要がある。


  • GA5でのトラッキング方法は公式ドキュメントを参照


    • 2018年8月現在利用可能なのは


      • ページトラッキング

      • イベントトラッキング

      • ソーシャルトラッキング





  • 他の計測サービスについては、JavaScriptを埋め込む形式だと難しい


    • gif画像などを埋め込む形式なら計測可能な場合もある




広告を貼ってみよう


Google AMP Cache を利用してみよう

AMP CacheのCDNにキャッシュされたリソースは誰でも利用することができる。

以下のページを参照されたい。

https://developers.google.com/amp/cache/

https://developers.google.com/amp/cache/overview





  1. モバイル・ファースト・インデックス。デバイスごとにページが用意されている場合、Googleはモバイル端末用のページのコンテンツを優先的にインデックスする。 



  2. 適切にマークアップされていないAMPをブラウザ上で閲覧する事は可能だが、Googleにはキャッシュ/インデックスされない。 



  3. 本来Googleが意図する機能ではないが、AMPページのキャッシュの寿命は予想外に長く(基本的にはクロール間隔と思われる)、数日程度ならAMPページへのアクセス数はほぼ落ちなかった。 



  4. 正確に言えばAMPでなくても適切にマークアップされていれば表示される。 



  5. Google Analytics 



  6. アフィリエイト・サービス・プロバイダ