UTALI

書き溜めておいた技術記事や旅行記のバックアップです。

AMPとは? - 対応の方法を解説

f:id:mochizuki_p:20170107174707p:plain

AMPとは

Accelerated Mobile Pages の略

つまり、「高速化されたモバイルページ」の略です。

通信環境が比較的遅いモバイル端末、主にスマートフォンで、高速にページを読み込むために

特殊なHTMLファイルを、Webページの管理者が準備することで、Googleが事前に高速で送信できるように最適化されたページを

Googleのサーバーにキャッシュして、モバイルユーザーに一瞬でページを閲覧できるようにする仕組みです。

AMPに対応しているページは以下のように、雷マークとAMPの文字がリンクボックスの中に表示されます。

AMPに対応しているページ

f:id:mochizuki_p:20170107173615p:plain

また通常のページと同じようにスタイルシートを設定することも可能です。

スタイルを設定することも可能

f:id:mochizuki_p:20170107173622p:plain

Gigazine.net より

f:id:mochizuki_p:20170107173632p:plain

techcrunch.com より

よくある質問

AMPに対応するといいことがあるの?

複数あります。

トップニュース

まず最初に、モバイル版のGoogleの検索欄で、特定のキーワードに関連した

ニュースを表示する欄があります。

f:id:mochizuki_p:20170107173655p:plain

AMPに対応しているページだけがこの欄に載るので、そこからの流入が 一定数期待できます。

ユーザビリティの上昇

blog.kissmetrics.com

より

Akamaiとgomezの調査ではページのロード時間が1秒増えるほどにページの離脱率が7%上昇するとの

報告があります。

つまり、ロード時間を削減すれば、それだけ、ユーザーの集客につながるといっても過言ではないでしょう。

検索順位の上昇

AMPの導入は検索順位にも好影響を与えるでしょう

それはGoogleが検索順位のランク付けの指標の一つにロード時間の速さを挙げているからです。 AMPはモバイル環境において飛躍的にロード時間を削減するので、この点ではSEOに効果があるといえるでしょう。

しかし、これは200ほどある指標の一つにすぎないことにも注意してください。

あくまで、優れたコンテンツを作ることを優先課題にすべきで、AMP対応はその次に取り組むべき課題でしょう。

AMPに対応するにはどうすればいいの?

従来のHTMLファイルとは別に、AMPの規格に準拠した AMP HTML

を準備する必要があります。この規格に沿っていないページはAMPを利用できませんので、注意してください。

規格については以下のページで詳しく解説します

www.utali.io

AMP対応は簡単?

正直、結構面倒だと思います。

外部から読み込むCSSファイルは使えないので、AMP HTMLのheadタグ内に書き込まないといけないことや、JavaScriptが原則的に禁止されていること

使用できるタグや機能に制限があること、そして、一部のタグはAMP用のタグに置き換えなければいけないとことや、画像などのメディアはサイズなどの詳しい情報を追記する必要があることなど、非常に制約が多く、今まで使っていたHTMLを少し改造するだけでは済まない場合が大半です。

AMPに対応できているかを確認するには?

以下のページで確認できます。

The AMP Validator

もう一つはGoogle Chrome のデベロップメントツールを使うこと

さらにもう一つ、上級者向けになりますが、Node.jsのコマンドラインツールを利用する方法があります。

npmとNode.jsが利用可能である前提で以下のコマンドでインストール

npm install -g amphtml-validator

そしてAMPに対応しているか確認したいHTMLファイル - ここではamp.html - に対して以下のコマンドでテストします。

 amphtml-validator amp.html

AMPの規格に適合している場合は

amp.html: PASS

となるはずです。

広告は配置できるの?

Google Adsenseのような主要な広告ネットワークはAMPに対応しています。

しかし、国内のアフィリエイト業者は対応していないケースが多いのが現状です。

はてなやライブドアといったブログサービスでも導入できる?

サービス提供側が本格的に対応しない限り難しいでしょう。

現在はてなブログでは試験的にAMPを導入していますが。広告を配置できない。スタイルシートを操作できないなど。 非常に制約が多く、現時点では対応できていない状況です。