対象読者
- Webサイト開発者および運営者
はじめに
AMPとは？
AMP（Accelerated Mobile Pages）は、モバイルページ高速化によるユーザー体験の向上を目的として、2015年にGoogleが発表したプロジェクトです。
Twitter、Pinterest、WordPress.com、LinkedInや、BBC、産経デジタルなどのパブリッシャーがAMPのパートナーに参加。2016年2月から、Google検索結果での表示が開始されました。
具体的には下記で解説するような「AMP HTML」などが新たに策定されています。
基本構成
AMPは「AMP HTML」「AMP JS」「Google AMP Cache」で構成されています。
- AMP HTML：既存のHTML／CSS／JavaScriptの一部を制限することで、高いパフォーマンスを実現します。
- AMP JS：高速レンダリングを実現するためのJavaScriptライブラリです。
- Google AMP Cache：AMP HTMLページを取得、キャッシュし、配信するための仕組み（CDN）です。
詳しくは、プロジェクトページをご覧ください。GitHubではソースコードも公開されています。
AMPのメリットは？
ユーザーにとっては、ページ表示速度が早くなり、データ転送量も少なくなるというメリットがあります。
AMP のテクノロジーを利用しているウェブページは、従来に比べ平均 4 倍の速度で表示され、データ量も約 1/10 に抑えられるため、ほとんどのページが瞬時に表示されます。（Google Japan Blogより）
サイト運営者にとっては、Google検索結果などにAMP対応ページが表示され、トラフィックを獲得することができます。具体的には、スマートフォンから、今ニュースになっているキーワードで検索すると、「トップニュース」枠にカルーセル形式で表示されます。つまり記事執筆時点では、タイムリーなキーワードを含む、ニュースサイトのAMPページしか検索結果に表示されません。
「トップニュース」枠のAMPページをまだ目にしたことがない方は、一旦Googleからログアウトすると、表示される場合があります。
AMPを試してみよう
それでは、早速AMPを試してみましょう。手順は以下のようになります。
- 通常のHTMLとは別に、AMP HTMLを作成します。
- JSON-LDを導入します。
- 検証を行います。
AMP HTML
HTMLのサンプル
まずは通常のHTMLを複製し、AMP HTMLに書き換えていきます。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample document</title> </head> <body> <h1>Sample document</h1> <p> Some text <img src=sample.jpg width=300 height=300></img> </p> </body> </html>
1. AMPの宣言
絵文字が斬新です。そのままコピーして使えますが、テキストエディタによっては絵文字が表示されない場合もあります。気になる方は<html amp lang="ja">でもOKです。
<html ⚡ lang="ja">
2. canonicalの指定
通常のHTMLのURLを指定します。
<link rel="canonical" href="./regular-html-version.html">
また、通常のHTMLの方には、AMPバージョンのURLを指定します。
<link rel="amphtml" href="./amp-html-version.html">
3. viewportの指定
viewportも必須です。
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
4. styleの指定
AMPの決まり文句を追加します。
<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>
2015年10月のAMPが発表された当初は、styleに指定するのはopacityに関する記述のみの短いコードでしたが、記事執筆時点では、上記のように長くなっています。
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
5. JavaScriptの読み込み
<script async src="https://cdn.ampproject.org/v0.js"></script>
AMPプロジェクトからJavaScriptを非同期で読み込みます。なお、AMPがサポートしているJavaScript以外は読み込みできません。アクセス解析や広告配信についてはライブラリがあるので、必要に応じて追加で読み込みます。
6. AMPタグに変更
<amp-img src=sample.jpg width=300 height=300></amp-img>
imgタグをamp-imgに変更します。AMPタグの一覧は下記をご覧ください。
AMP HTMLのサンプル
これで、AMP HTMLができました。
<!doctype html>
<html ⚡ lang="ja">
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
</body>
</html>
AMP HTMLの主な仕様
HTMLタグの対応表です。AMP HTMLタグに置き換えが必要なタグや、使用が制限されているタグがあります。
| タグ | AMP HTML |
|---|---|
| script | application/ld+json以外NG |
| img, video, audio, iframe | AMPタグに置き換え |
| frame, frameset, object, param, applet, embed, form, input elements | NG（buttonはOK） |
| style | headタグ内OK、amp-custom属性が必要 |
| link | canonical以外NG（一部ホワイトリスト登録OK） |
| meta | http-equivのみNG |
| a | JavaScriptの使用はNG |
| svg | ほとんどOK |
JSON-LD
AMPには、JSON-LDによる構造化データも必要です。検索結果、トップニュース枠のカルーセルの表示内容などに使用されます。下記のようなJSON-LDをAMP HTMLのheadに含めます。
JSON-LDのサンプル
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Sample document",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
JSON-LDの主な仕様
詳しくは下記をご覧ください。
