Googleが推進する「AMP」と「AMP HTML」概要

公開日
更新日

Googleが2015年に発表した「Accelerated Mobile Pages（AMP）」は、モバイル向けに高速に表示できるWebページを記述するための仕様だ。GoogleはAMPを推進しており、すでにモバイル版Google検索では検索結果にAMP対応ラベルが表示されるといった対応が行われている。今回はこのAMPの概要と、AMP対応の核となる「AMP HTML」について解説する。

動的な表示のコントロールとキャッシュによる高速化を行うAMP

昨今ではスマートフォンおよび高速な通信回線の普及によって、モバイル環境でもリッチなWebサイトを閲覧できるようになった。しかし、常に高速な通信回線が利用できるわけではなく、またすべての端末が動的な表示を行うのに十分なマシンパワーを持っているわけではない。そこでGoogleがスタートさせたのが「AMP（Accelerated Mobile Pages）」と呼ばれるプロジェクトだ（図1）。

図1 AMPプロジェクトのWebサイト
図1 AMPプロジェクトのWebサイト

AMPは使用できるHTMLを制限するとともに、JavaScriptによる動的な表示を制限することで表示を高速化する技術で、次の3つの要素から構成される。

  • 表示の高速化のためにHTMLに制約を加えた「AMP HTML」
  • 高速にコンテンツのロードを行うためのJavaScriptコード「AMP JS」
  • コンテンツのキャッシュ配信を行う「Google AMP Cache」

AMPに対応したページでは、画像や動画、インラインフレーム（iframe）といったコンテンツロードはすべてAMP JSが管理する仕組みになっている。これにより、画像や動画といったコンテンツのロードが完了する前にページが表示でき、さらに端末の環境に応じて自動的に最適な表示が行われるようになっている。たとえば一般的なWebブラウザでは、コンテンツのロード状況によってページが再レンダリングされるような状況が発生するが、AMPに対応したページではこれが発生しない。さらに、「重要なコンテンツ」が自動的に判断され、それらを率先してダウンロードする仕組みも含まれている。

このAMP HTMLに準拠したWebページは「AMP対応ページ」と呼ばれている。GoogleはWebページのクロール時にAMP対応の有無を確認し、AMP対応ページであればモバイルでの検索結果に「AMP」とのラベルを表示するとともに、そのコンテンツをキャッシュするよう処理を行う。これら処理についてはGoogleがすべて自動的に行うため、サイトの運営者はAMP対応ページをWebサーバーで公開するだけで良い。

ちなみに、AMPでは利用できるJavaScriptは制限されるものの、広告を表示することは可能だ。もちろんその収益についてはコンテンツの提供者に支払われるようになっている。

AMP対応コンテンツの提供方法

AMPはあくまでHTMLやJavaScriptに制約を加えただけのものであるため、AMP対応ページは一般的なWebサーバーで配信でき、またそのページはWebブラウザでそのまま閲覧できる。ただし前述のようにAMP対応ページではタグやJavaScriptの利用に制限があるため、同じコンテンツに対してAMP非対応のページとAMP対応ページの2つを用意することが多い。たとえばブログツール（コンテンツ管理システム）のWordPressでは「AMP」というプラグインが提供されており、このプラグインを導入することで、「＜既存のページURL＞/amp/」というURLでAMP対応ページを配信できるようになる。

1つのコンテンツに対してAMP対応ページと非対応ページの2つが提供される場合、GoogleはクロールしたページのHEADタグ内の情報を参照してAMP非対応ページとAMP対応ページの関連付けを行い、モバイル検索の利用者に対してはAMP対応ページを提示するよう処理を行ってくれる。

もちろん、AMP非対応のページを作らず、AMP対応ページのみを提供することも可能だ。テキストや画像が中心で動的な表示を利用しないようなシンプルなWebサイトであれば、このやり方のほうがAMP対応が容易かもしれない。

AMP対応とGoogle検索の関連性

AMPはモバイル環境に特化したページ表示速度の高速化ツールとして期待されており、たとえばモバイル版のGoogle検索やGoogleニュースでは検索結果の上部にAMP対応ページを表示する専用枠が設けられている。さらに、AMP対応ページでは検索結果に「AMP」というラベルが表示され、そこからすぐにAMP対応ページを閲覧できるようになっている（図2、3）。

図2 モバイル版のGoogleニュースではAMP対応サイトのみを表示する専用枠が用意されている
図2 モバイル版のGoogleニュースではAMP対応サイトのみを表示する専用枠が用意されている
図3 モバイル版のGoogle検索では、AMP対応サイトは検索結果に「AMP」というラベルが表示される
図3 モバイル版のGoogle検索では、AMP対応サイトは検索結果に「AMP」というラベルが表示される

モバイル版のGoogleニュースやGoogle検索からAMP対応ページを開くと、これらページはそのコンテンツを提供しているサイトではなく、それらをキャッシュしているGoogleのサーバーから読み出されて表示される。たとえば図4はAMPに対応しているOSDN Magazineの記事であるが、URLはgoogle.co.jpドメインのものになっており、Googleのサーバーがこのコンテンツを提供していることが分かる。

図4 AMP対応ページはGoogleのキャッシュサーバーから読み出される
図4 AMP対応ページはGoogleのキャッシュサーバーから読み出される

なお、Googleは以前よりWebページの高速な表示を推進しており、表示が遅いページに対しては「ユーザビリティが悪い」と判断して評価を下げる可能性があるとしているが、AMPの対応の有無については、現時点ではこれによって検索結果における表示順位が変わることはないことをGoogleは表明してる。

ただ、Googleは検索結果において「モバイルファースト」を掲げており、今後AMP対応サイトは「ユーザビリティが高い」と評価され、それによって表示順位に影響が出るようになる可能性はある。そのため、少なくともAMPに関する知識は持っておいて損はないだろう。

AMPを利用する際の制約

AMPではモバイル端末での閲覧を想定しており、そのためいくつかの制約が科せられている。まず最も大きな制約が、非同期的に実行されるJavaScriptが原則として禁止されている点だ。そのため、JavaScriptを使ったコンテンツのロード/レンダリングや、動的なユーザーインターフェイスなどは利用できない。

ただし、例外としてAMPプロジェクト自身が提供するJavaScriptライブラリ（拡張コンポーネント）については利用が許可されている。拡張コンポーネントは専用のタグと組み合わせて利用するようになっており、これらを利用することでページ内に動画や音声を埋め込んだり、メニューなどのユーザーインターフェイスを構築することができるようになっている。

また、動的にサイズが変わるようなコンテンツは提供できない。これは、Googleがコンテンツをキャッシュして提供する仕組みになっているからだ。さらにCSSは別ファイルに分離できず、スタイル指定はすべてHTMLソースファイル中に記述しておく必要がある。これに加えて、スタイル指定部分のサイズは50キロバイト以下という制限もある。

こういった制限があるため、特に動的な表示要素を持つようなページについてはAMPに対応させことが難しい。ただし、iframe内では任意のJavaScriptコードが実行できるため、工数をかければ似たような表示を実現できる可能性はある。

また、AMPではGoogleだけでなく多数のWeb広告プラットフォームに対応しており、これらプラットフォームによる広告配信については、簡単なコードだけでサポートできるようになっている。AMP公式サイトのSupported Platformsにその一覧があるが、Yahoo! JAPANやMicroAdなど日本の広告配信プラットフォームもサポート対象となっている。

AMPの第一の構成要素：AMP HTML

続いてはAMPの核となるAMP HTMLについて、より詳しく説明していこう。AMP HTMLは一般的なHTMLに特別なルールを追加したもので、次のような特徴がある。

  • 特定のタグ、要素を必ずHTML内に記述する必要がある
  • いくつかのタグは利用不可
  • 画像（img）や動画（video）、音声（audio）、インナーフレーム（iframe）などを埋め込む場合は「amp-img」や「amp-video」、「amp-audio」、「amp-iframe」といった代替タグを利用する
  • いくつかのタグの特定の属性は利用不可
  • 独自のJavaScriptコードは利用不可
  • CSSの一部プロパティは利用不可
  • SVGの利用は一部のみに制限されている

特に大きい制限としては、画像や動画などのコンテンツの埋め込みに専用のタグを利用しなければならない点だ。これについては後述する。

AMP対応ページに必須の要素

AMP対応ページは、<!doctype html>というタグで始まり、さらに<html ⚡>もしくは<html amp>というタグと、その中に<head>および<body>タグを必ず記述しなければならない。

<head>タグ内に記述する要素にもついてもルールがあり、以下のタグを必ず配置しなければならない。

    • <meta charset="utf-8">タグ。このタグは、<head>タグ内の一番最初に記述する必要がある
    • <link rel="canonical" href="＜URL＞" />タグ。＜URL＞には、このページの非AMPバージョンのURLを記述する。非AMPバージョンが存在しない場合はこのページ自体のURLを記述する
    • <meta name="viewport" content="width=device-width,minimum-scale=1">タグ。また、「initial-scale=1」要素の記述も推奨されている
    • AMP用のJavaScriptコードを読み込むための<script async src="https://cdn.ampproject.org/v0.js"></script>タグ
    • 「AMP Boilerplate Code」と呼ばれるコード

最後のAMP Boilerplate Codeは、具体的には下記のようなものだ。

<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>タグ内にこれ以外のメタデータなどを埋め込むことは認められており、特にschema.orgで定義されているメタデータについては適切なものを埋め込むことが推奨されている。

これらを記述した実際のHTMLは、以下のようになる。

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
    <link rel="canonical" href="＜非AMP版URL＞">
    <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>
  </head>
  <body>
    ＜ページ本体＞
  </body>
</html>

AMPで利用できない/制限されているタグ

AMPでは高速なページの表示を行うため、いくつかのHTMLタグについては使用が禁止されている（表1）。また、「<!-- -->」形式のコメントも使用できない。

表1 AMPで利用できないタグ一覧
タグ名 説明
base 使用不可
img 使用不可。代わりにamp-imgタグを使用する
video 使用不可。代わりにamp-videoタグを使用する
audio 使用不可。代わりにamp-audioタグを使用する
iframe 使用不可。代わりにamp-ifameタグを使用する
frame 使用不可
frameset 使用不可
object 使用不可
param 使用不可
applet 使用不可
embed 使用不可
コメント（<!-- -->） 使用不可

さらに、いくつかのHTMLタグについては使用に制限が課されている（表2）。

表2 AMPでは使用に制限があるタグ一覧
タグ名 説明
script AMPが提供するスクリプトを読み込むものおよび「application/ld+json」形式以外のものは使用不可
form 「amp-form」タグと組み合わせることが必要
input 基本的には利用できるが、[type=image]や[type=button]、[type=password]、[type=file]といった形では利用不可
style 前述の「AMP Boilerplate Code」と、それに加えてHEADタグ内で1つのみが利用可能。その場合「<style amp-custom>」のように指定する必要がある
link 「<link rel="＜許可された文字列＞">」といったスタイルでのみ利用可能。許可されているのはmicroformats.orgに登録されているものだけで、「rel="sylesheet"」といった形でのスタイルシート読み込みは後述のカスタムフォント利用的のもの以外は禁止
meta 「http-equiv」属性以外は利用可能
a 原則として利用可能だが、「href」属性で「javascript:」で始まるURLを指定することは禁止されている
svg 一部のSVG要素が禁止されている

これらに加えて、「onclick」などの「on」で始まる属性と、「style」属性、「xmlns」や「xml:lang」、「xml:base」、「xml:space」属性についても使用が禁止されている。

ちなみに、AMPでは「i-amp-」で始まる属性や、「-amp-」および「i-amp-」で始まるクラス名およびIDが内部的に使用される。そのため、これらと競合するような属性およびクラス名、IDをHTML要素に指定することはできない。

スタイルシートにおける制限

AMPではCSSを別ファイルに記述することはできず、すべてHTML内に記述する必要がある。また、記述できる場所も次のようにheadタグ内にある「amp-custom」属性が付けられたstyleタグ内のみという制限がある。

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
    <link rel="canonical" href="＜非AMP版URL＞">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      この部分にしかCSSは記述できない
    </style>

記述できるスタイル指定についても、いくつかの制限がある。まず、「!important」キーワードは使用できない。さらに、「behavior」および「-moz-binding」、「filter」プロパティについても使用が禁止されている。また、トランジションおよびアニメーション関連のプロパティについては「opacity」および「transform」プロパティのみが許可されている。

これに加えて、AMPが内部で使用する「-amp-」や「i-amp-」といったクラス名やID、タグ名、属性に対してスタイルを設定することについても禁止されている。「amp-」で始まる、AMPが提供する独自要素についてはスタイルの設定が可能だ。

カスタムフォントの利用

カスタムフォント（いわゆるWebフォント）については、現時点では下記の4つのプロジェクトが提供するものについてのみ利用が許可されている。

  • Typography.com（https://cloud.typography.com）
  • Fonts.com（https://fast.fonts.net）
  • Google Fonts（https://fonts.googleapis.com）
  • Font Awesome（https://maxcdn.bootstrapcdn.com）

たとえばFont Awesomeを利用する場合、bootstrapcdn.comが提供するCSSを読み込むよう、次のようなlinkタグをheadタグ内に埋め込めば良い。

<link rel="styesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

また、スタイルシートの「@font-face」ルールを使って使用するフォントを指定することも可能だ。

画像を埋め込む

前述のとおり、AMPではimgタグやvideoタグ、audioタグ、iframeタグが利用できない。その代わり、amp-imgやamp-video、amp-audio、amp-iframeといった独自のタグが利用できるようになっている。これらのタグを利用して埋め込まれたコンテンツは、AMPのランタイムスクリプトによってロードや表示が管理されるようになっており、状況に応じて適切にコンテンツが表示されるようになる。

まずamp-imgだが、これはimgタグとほぼ同じように利用できるが、heightおよびwidth属性の指定が必須となっている点が異なる。また、それ以外にも表4の属性などが指定可能だ。

表4 amp-imgタグで指定できる主な属性（抜粋）
属性名 説明
src 画像のURL
srcset 解像度ごとに適した画像のURL
alt 画像を説明するテキスト
attribution 画像の帰属情報を説明するテキスト
height 画像の高さ
width 画像の幅
layout コンテンツのレイアウト方法

amp-imgタグで指定した画像はGoogleのサーバーにキャッシュされ、表示するWebブラウザおよび端末の環境に応じて効率的にロードおよび表示が行われる。

また、amp-pixelタグはアクセス解析などに使用するための追跡用画像を、amp-videoタグは動画を埋め込むためのタグだ。これらについて今回は割愛するので、詳しくはドキュメント（amp-pixel、amp-video）を参照してほしい。

非AMP対応ページからAMP対応ページへの誘導

前述の通り、AMP対応ページではさまざまな制限があるため、通常は1つのページに対して一般的なWebブラウザで閲覧するための非AMP対応バージョンと、AMP対応バージョンの2つを用意することになることが多い。このとき、AMP対応ページでは次のようにしてAMP非対応ページのURLを指定しておく。

<link rel="canonical" href="＜AMP非対応ページのURL＞">

また、非AMP対応ページ側では次のようなタグをheadタグ内に記述して対応するAMP対応ページのURL情報を追加しておく。

<link rel="amphtml" href="＜AMP対応ページのURL＞">

なお、AMP対応ページのみを用意し、AMP非対応のページが存在しない場合、次のようにそのページ自体のURLを指定しておく。

<link rel="canonical" href="＜そのページ自体のURL＞">

既存のWebページをAMP対応にする手順

さて、ここまででAMP HTMLについての基本的な説明を行ってきたが、既存のWebページをAMP対応ページにする場合、これを踏まえて下記の作業を行えば良い。

1. 適切な<!doctype html>タグやタグ、タグを記述する
2. imgタグをamg-imgタグに置き換えて適切な属性を指定する
3. AMP HTMLで利用できないとされているタグや属性を削除し、適切なものに置き換える

この中で、もっとも大変なのは3. のAMP HTMLで利用できないタグや属性を削除する作業だろう。もしこの作業によってページの大部分が表示されなくなるようなページであれば、AMP対応ページを完全に新規に設計したほうが早いかもしれない。

さて、前述のようにAMP対応ページでは独自のJavaScriptを実行することができない。しかし、たとえばページ内にTwitterの投稿を埋め込んだり、YouTubeで公開されている動画を埋め込みたい、広告を表示したい、といったケースは多い。一般的なWebサイトでは、これらはJavaScriptを使って実現されているため、AMP対応ページではそのままではこれらコンテンツは表示できない。そのため、AMPプロジェクトは「拡張コンポーネント」という形でこれらを実現する方法を提供している。後編ではこれら拡張コンポーネントについての解説と、AMP対応ページのデバッグについて解説する。

後編はこちら >

AMPGoogleSEOWebサーバー管理運用管理
松島浩道のプロフィール画像
松島浩道
編集者/ライター（twitter：https://twitter.com/hylom、Google+：https://plus.google.com/115759524056726415451/about、本人ブログ：http://hylom.net/）。OSDN Magazine（https://osdn.jp/magazine/）およびスラド（http://srad.jp/）の編集長をこなしつつ、ITやプログラミング関連の記事執筆などを行っています。