Googleが10月7日に発表したAccelerated Mobile Pages（アクセレート・モバイル・ぺージズ）プロジェクト通称「AMP」について、そのプロジェクトの背景や目的と、開発側で対応すべきことをまとめました。このGoogleの動きはSEO担当者だけでなく、ニュース編集者もチェックしておくことをおすすめします。
モバイルサイト高速化プロジェクト AMP
まずGoogleがAMPを進める背景について触れます。そもそもAMPプロジェクトとは、モバイルサイトのページロード（読み込み）時間を「高速化」することを目的としています。例えば、次のようなことがこのプロジェクトの狙いです。
・ニュース記事などのウェブページを早く表示
・モバイルのロード時間を短縮
・アプリ市場から、再度検索市場へとユーザーを誘因
仕組みを簡単に説明すると、検索結果の情報を結果の一覧から読み込むのではなく、Google側にキャッシュしておく仕様です。Google側にキャッシュされているため、高速で結果が表示されるよになりますが、もちろんそのための制約も存在します。後述しますが、AMP仕様のHTMLを実装する必要があります。
現在はニュース記事に特化してプロジェクトを進めている模様で、日本ではその動きはまだ見ることはできておらず、米国圏を中心に展開されているようです。
Google公式サイト
https://googleblog.blogspot.jp/2015/10/introducing-accelerated-mobile-pages.html
アンプ公式サイト
AMPプロジェクトスタートの背景
この動きは数カ月前にFacebookが発表した「Instant Article」への対抗施策と見られています。Inastant ArticleはFacebookのモバイルアプリ内で記事コンテンツを高速に表示し、ユーザー体験を高めるための仕組みです。各社ともモバイルでのコンテンツを充実させ、ユーザーの滞在時間を伸ばすことに注力しているようですね。
パートナー企業の参画状況
Googleの発表によれば、AMPにはニューヨーク・タイムズやワシントンポスト、Vox Media、ハースト婦人画報社など大手メディアを含む約30社が参加の意思を表明しているようです。またテック系企業では、Twitter、Pinterest、Wordpress、Chartbeat、Parse.ly、Adobe Analytics、Linkedlnなども参加しているとのことです。
実際WordPressは数カ月以内にAMP対応のプラグインを発表するとしています。
https://vip.wordpress.com/2015/10/07/mobile-web/
開発への影響と今後の普及
・開発への影響
SEOとしてはモバイルフレンドリーの一貫として発表されたり、ランキングシグナルに含まれるなどがあると、AMP対応を最優先としなければなりません。キャッシュの仕組みと実装方法を検討する際には、ページごとの対応要否の判断に迫られます。
・今後の普及
想定される利用シーンは、上記の記事コンテンツか、アクセスが集中するキャンペーンページなどが考えられます。いずれも複雑な仕組みが必要とされないページです。
AMP HTML実装方法
ここからAMP HTMLの実装方法を解説します。勉強中なので抜け漏れや間違いがあったら申し訳ございません。全部で6ステップです。
１．<html ⚡ lang="ja">で宣言
AMPを利用するための宣言です。絵文字⚡を使用します。「amp」と指定しても大丈夫です。
２．HEAD内でAMPのJSを読み込む
<style>body{opacity:0}</style><noscript><style>body{opacity:1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
https://cdn.ampproject.org/v0.js
上記のjsを読み込むことでAMPプロジェクトからCDN配信されたJavaScriptランタイムが読み込まれます。一回読み込まれるとキャッシュされるので、別のサイトで読み込んだことがある場合は再利用される仕組みです。AMP HTMLは制約が多く、このjs以外の読み込みを認めていません。
３．viewportの指定
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
AMPの指定通り記述しないとAMP Validatorでエラーがでます。パラメータを変更したり、半角スペースが入っただけでもエラーになってしまいます。
４．CSSは外部ファイルではなく、インラインで指定
AMPではインラインCSSが推奨されています。<style>タグに「amp-custom」を付加します。外部ファイル読み込みは禁止です。
５．画像サイズを指定し、<img>タグを<amp-img>に変更
<amp-img>として指定された画像はローディング付きの遅延読み込みが行われる仕様になっています。画像へのサイズ指定が必須で、指定がないとAMP Validatorでエラーになります。画像にサイズ指定することで描画領域をあらかじめ確保できるため、リフロー（再描画）を起こさず、高速化に繋がるのです。
６．canonicalタグの設定
AMP対応ページと非対応ページが存在する場合、canonicalの設定が有効です。
７．Googleアナリティクスの設定
<amp-pixel src="https://ssl.google-analytics.com/collect?v=1&tid=UA-12345678-1&t=pageview&cid=$RANDOM&dt=$TITLE&dl=$CANONICAL_URL&z=$RANDOM"></amp-pixcel>
「Measurement Protocol」を使って下のように<amp-pixel>タグで利用します。それぞれ$で指定している箇所は下記のような仕様です。
・$RANDOMはランダム文字列に置換
・$CANONICAL_URLは「rel="canonical"」の値に置換
・$TITLEはページのタイトルに置換
８．その他
<form>タグなどの使用も認められておらず、高速化に向けてさまざまな制約が設けられています。以下羅列します。
・link要素はrel:canonicalのみ仕様可能
・img、video、audio、iframeは代わりにカスタムエレメントを使用推奨
・object、from、inputも禁止
HTML5でリッチになったHTMLが、逆に削ぎ落とされている印象です。
最後に
AMPプロジェクトはなんといっても指定のJavaScript以外使えないという点が驚きですね。最近はリッチコンテンツも減ってますし、サイトの動きよりスピードの方がユーザーにとっての満足度が高い、とGoogleは判断したのでしょうか。ほかにも広告を表示させるための「amp-ad」といったタグもあるので、次回まとめてご紹介します。今後もAMPプロジェクトのアップデート情報はしっかりとキャッチアップしたいと思います。
Google・SEO関連のおすすめ記事紹介
GoogleやSEO関連でおすすめの記事はこちらです！ぜひチェックしてみてください！