黒子の観察者

テクノロジーやビジネス、音楽について書くブログです。

GoogleがスマホWeb高速化 ！AMPプロジェクトの背景・開発対応方法まとめ

SEO Google 検索エンジン コンテンツマーケティング

Googleが現在力を入れているAccelerated Mobile Pages（アクセレート・モバイル・ぺージズ）プロジェクト、通称「AMP」について、そのプロジェクトの背景や目的と、開発側で対応すべきことをまとめました。このGoogleの動きはSEO担当者だけでなく、ニュース編集者もチェックしておくことをおすすめします。

f:id:blackwatcher:20160116144405j:plain

モバイルサイト高速化プロジェクト AMP

まずGoogleがAMPを進める目的・狙いについて触れます。そもそもAMPプロジェクトとは、モバイルサイトのページロード（読み込み）時間を「高速化」することを目的としています。高速化の狙いとしては、次のようなものが挙げられます。

・ニュース記事等のウェブページを早く表示させる目的
・モバイル（スマホ）のロード時間を短縮する目的
・インターネットで待つという状態を回避する目的
・アプリ市場から再度検索市場へユーザーを誘因する目的

引用元：Googleはモバイル（スマホ）検索をより高速化へ！AMPプロジェクトを発表

仕組みは、スマートニュースの「すぐ読む」と似ています。検索結果に表示されるニュース記事の情報を、あらかじめGoogle側にキャッシュしておく仕様です。Google側にキャッシュされているため、非常に高速で結果が表示されるようになりますが、もちろんそのための制約も存在します。後述しますが、AMP仕様のHTMLを実装する必要があります。

現在はニュース記事に特化してプロジェクトを進めている模様で、日本ではLINEや日刊スポーツ、毎日新聞などが対応すると発表されています。

《参考》

Official Google Blog: Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web

Accelerated Mobile Pages Project

AMPプロジェクトスタートの背景

この動きは数カ月前にFacebookが発表した「Instant Article」への対抗施策と見られています。Inastant ArticleはFacebookのモバイルアプリ内で記事コンテンツを高速に表示し、ユーザー体験を高めるための仕組みです。各社ともモバイルでのコンテンツを充実させ、ユーザーの滞在時間を伸ばすことに注力しているようですね。

Instant Articles | Facebook

wired.jp

パートナー企業の参画状況

Googleの発表によれば、AMPにはニューヨーク・タイムズやワシントンポスト、Vox Media、ハースト婦人画報社など大手メディアを含む約30社が参加の意思を表明しているようです。またテック系企業では、Twitter、Pinterest、Wordpress、Chartbeat、Parse.ly、Adobe Analytics、Linkedlnなども参加しているとのことです。

また、WordPressは数ヶ月以内にAMP対応のプラグインを開発中と、次のように発表しています。

WoredPressはオープン性や柔軟性、メディア性を兼ね備えたCMSであり、その購読者（ユーザー）のために可能な限り「最高のユーザー体験」を提供しつづけるというコミットメントで構築されています。そのため、WoredPressからAMP仕様をサポートするためのプラグインを開発しています。プラグインはまだ初期段階です。

Accelerating the Mobile Web – WordPress.com VIP

SEO観点での開発への影響

SEOとしては、ランキングシグナルに含まれるなど発表があると、AMP対応の優先度を上げる必要がありそうです。

また、想定される利用シーンは、記事コンテンツのような、テキストと写真ベースのページが中心になっていく可能性が高そうです。後ほど、開発方法についてご説明しますが、比較的複雑なページを実現するための機能が用意されているわけではないからです。例えば、JavaScriptも指定のもの以外使えなかったりします。あくまでGoogleの狙いはページの「高速化」です。

AMPデモ体験

デモページが用意されています。スマホでこちらのURLにアクセスしてみてください。

Googleデモページ

上記にアクセスして、検索すると次のうように表示されますが、まだAMP対応ページは表示されていません。実際は、記事が検索結果のトップに「カルーセル」で表示され、クリックすると「高速」で記事が表示されます。

f:id:blackwatcher:20160116152259p:plain

デモについては、こちらの記事で詳しく確認できます。

Googleは2016年2月にAMPを検索で公開、ランキング要因になる可能性を示唆 | 海外SEO情報ブログ

AMP HTML実装方法

ここからAMP HTMLの実装方法を解説します。勉強中なので抜け漏れや間違いがあったら申し訳ございません。全部で8つポイントがあります。

１．<html ⚡ lang="ja">で宣言

<html lang="ja">
↓
<html ⚡ lang="ja"> または <html amp 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では、上記以外のJavaScriptの使用は認められておりません。

３．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は外部ファイルではなく、インラインで指定

<link href="style.css" rel="stylesheet">
↓
<style amp-custom>html,body,div,span,object,...</style>

AMPではインラインCSSが推奨されています。<style>タグに「amp-custom」を付加します。外部ファイル読み込みは禁止です。

５．画像サイズを指定し、<img>タグを<amp-img>に変更

<img src="test.png" alt="" width="100" height="50">
↓
<amp-img src="test.png" alt="" width="100" height="50"></amp-img>

<amp-img>として指定された画像はローディング付きの遅延読み込みが行われる仕様になっています。画像へのサイズ指定が必須で、指定がないとAMP Validatorでエラーになります。画像にサイズ指定することで描画領域をあらかじめ確保できるため、リフロー（再描画）を起こさず、高速化に繋がるのです。なお、</amp-img>はなくても問題ありません。

６．canonicalタグの設定

AMP対応ページと非対応ページが存在する場合、canonicalの設定が有効です。

AMP（通常ページページがあることを示す)

<link rel="canonical" href="http://andus.heteml.jp/amp_test/default/">

HTML（AMPページがあることを示す）

<link rel="amphtml" href="http://andus.heteml.jp/amp_test/amp/">

７．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-pixel>

「Measurement Protocol」を使って下のように<amp-pixel>タグで利用します。それぞれ$で指定している箇所は下記のような仕様です。

  • $RANDOMはランダム文字列に置換
  • $CANONICAL_URLは「rel="canonical"」の値に置換
  • $TITLEはページのタイトルに置換

８．その他

<form>タグなどの使用も認められておらず、高速化に向けてさまざまな制約が設けられています。以下羅列します。

  • link要素はrel:canonicalのみ仕様可能
  • img、video、audio、iframeは代わりにカスタムエレメントを使用推奨
  • object、from、inputも禁止

HTML5でリッチになったHTMLが、逆に削ぎ落とされている印象です。上記の開発方法んついては、以下の記事を参考にしています。他にもいろいろと指定はありますので、開発について気になる方は、この記事を参考にしてみてください。

qiita.com

Githubもあります。

AMP Project · GitHub

最後に

AMPプロジェクトはなんといっても指定のJavaScript以外使えないという点が驚きですね。最近はリッチコンテンツも減ってますし、サイトの動きよりスピードの方がユーザーにとっての満足度が高い、とGoogleは判断したのでしょうか。ほかにも広告を表示させるための「amp-ad」といったタグもあるので、次回まとめてご紹介します。今後もAMPプロジェクトのアップデート情報はしっかりとキャッチアップしたいと思います。