Help us understand the problem. What is going on with this article?

エンジニアのための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. アフィリエイト・サービス・プロバイダ 

yukari-n
ブログからの移転記事も多いです。
https://yukari-n.github.io/
opt
"INNOVATION AGENCY" を標榜するインターネット広告代理店。エンジニア組織 "Opt Techonologies" を中心にアドテクetc...に取り組んでいます。
https://opt-technologies.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away