この記事をシェアシェアする
AMP（Accelerated Mobile Pages）は、モバイルウェブページの読み込み速度を向上させるためのオープンソースフレームワークです。軽量なHTML、CSS、JavaScriptを使用し、コンテンツが迅速に表示されるよう設計されています。AMPは特にスマートフォンやタブレットでの閲覧体験を向上させ、ユーザーエンゲージメントと広告収益を高めることを目指しています。SEO対策に直接影響はありませんが、とても重要なものですので詳しく解説したいと思います。
AMPとは何か？
AMP（Accelerated Mobile Pages）とは「モバイル端末でWebコンテンツを高速表示するためのGoogleが推奨する手法（フレームワーク）」で、アンプとも呼ばれます。
AMPは2015年にGoogleとTwitter社を筆頭にプロジェクトが立ち上がり、モバイル端末向けのインターネット速度向上が主な内容です。
モバイル端末の読み込み速度や、表示速度の遅さによるストレスから、ユーザーのページ離脱を防ぎ、ユーザーエクスペリエンスを向上させようとしたことがAMPができるきっかけとなりました。
AMPの仕組みと構成要素は？
ユーザーがWebサイトページにアクセスすると、サーバーにリクエストを出し、サーバーから送られる情報ファイルの中身をレンダリング（ファイルの元情報を整形して画面表示）します。
これが通常の表示の流れですが、AMPの場合、Webサイトのページ情報を事前にGoogleやTwitter側でキャッシュし、保存します。
キャッシュ（cashe）とは、取得したページ情報をサーバー内に保存する意味です。
ユーザーが検索などのリンクをクリックした際、あらかじめ保存しておいたキャッシュ情報を直接クライアント側に受け渡します。
そうすることで、Webページのコンテンツ情報の読み込みや画面表示の負荷を、大幅に低減することが可能です。
AMPは次の4つで構成されています。
- HTML5（AMP HTML）
- CSS 3（Custom Styling）
- JavaScript (AMP JS)
- グローバル プロキシ キャッシュ (AMP Cache)
AMP HTMLでモバイル対応サイトを作成すると、Google検索結果やTwitterからのリンク表示速度を高速化できます。
AMP HTMLはオープンソースとして無料公開しており、自由な実装が可能です。
AMP導入のメリット・デメリットは？
AMP導入のメリット・デメリットを整理しました。
AMP導入のメリット
AMP導入のメリットは次の通りです。
- 検索順位の上昇
- 新規流入の増加
- サイトリンククリック率の上昇
- ユーザーの離脱率減少
検索順位の上昇
AMP導入でモバイルサイトの表示速度が向上することで、検索順位の上昇に貢献できます。
AMP HTMLの記載ルールに準拠した記述や、検索クエリなどの関連性を考慮したAMPページを作ることで、そのAMPページがGoogleなどの検索エンジンにインデックスされ、読み込み速度の早いページとして評価されます。
その結果、検索上位化の可能性が高まるわけです。
新規流入の増加
AMPページを特定の検索機能向けに構造化することで、新規流入の増加に貢献できます。
たとえば、画像やコンテンツをスライド表示させる手法であるカルーセルや、リッチリザルトなどの検索機能に表示するためのAMPページを公開することで、新規流入経路を生み出すことが可能です。
サイトリンククリック率の上昇
AMPページがGoogleなどの検索エンジンにインデックスされると、検索結果に雷マークが表示されます。
このマークにより、読み込み速度が早いWebサイトかどうかが目で確認できるため、サイトリンクのクリック率上昇に寄与することが可能です。
ユーザーの離脱率減少
AMPはあらかじめキャッシュした情報を即座に表示するため、ユーザー視点で表示を待つストレスが極端に低下します。
事実、2018年にGoogleが調査した結果、モバイルページの表示に3秒以上かかると、クリックしたユーザーの約5割がサイトから離脱します。
現状の表示速度にストレスを感じるほどの待ち時間があるのであれば、AMP導入によるメリットは大きいと言えるでしょう。
AMP導入のデメリット
AMP導入のデメリットは次の通りです。
- 管理ページの運用工数が増える
- サイトへのアクセスが減る可能性がある
- 広告制限によるコンバージョンが減る可能性がある
- 思った通りのAMP導入ができない可能性がある
管理ページの運用工数が増える
AMP HTMLでAMP導入をする場合、1つのサイトページで正規ページとAMPページの2つを管理する必要があります。
それをWebサイト内にある各ページ毎に対応する必要があるため、管理するページも膨大です。管理ページが増え、それを運用する工数が増えてしまうことが、AMP導入のデメリットと言えます。
サイトへのアクセスが減る可能性がある
AMP導入により検索結果のスニペット表示にあるサイトリンクが表示されなくなります。
ユーザー視点でみた際に、検索結果からのWebサイト流入経路を失う結果につながるため、Webサイトのアクセス減少につながる可能性があり、これもAMP導入のデメリットです。
ただし「一行表示のサイトリンク」や「～に移動リンク」の表示数が少ないサイトであれば、アクセス数が極端な減少はないでしょう。
広告制限によるコンバージョンが減る可能性がある
AMP導入で作成したページには広告制限があります。表示できる広告も限定されているため、場合によってはAMPページで表示できない広告も。
例えばAMP導入を検討しているWebサイトがアフィリエイトサイトの場合、広告収益に大きな影響を及ぼす可能性があります。これもAMP導入のデメリットです。
思った通りのAMP導入ができない可能性がある
これが一番大きなデメリットかもしれません。例えば、AMP導入によるWebサイトページのデザインが大幅に崩れることもあり得ます。
記事コンテンツ中心のサイトであれば影響は少ないですが、特にデザインにこだわったサイトに対しては、導入を慎重に検討したほうがよいでしょう。
AMP HTMLは通常のHTMLと異なる方法で記述を行うため、JavaScriptやjQuery等の利用ができません。
またAMPが定義した言語以外を多用するコンテンツでは、タグの制限により、デザインやコンテンツもエラー表示される可能性があります。
モバイル端末を高速表示させるはずが、サイト自体に大きな影響が出たなんてないようにしましょう。
AMP導入を検討すべきサイトの種類は？
AMP導入にはモバイル対応ページの表示高速化などのメリットがありますが、何も考えずにWebサイトに導入すべきではありません。
AMP導入を検討すべきサイトの種類を下記にまとめました。
- 広告で収益化していないWebサイト
- メインコンテンツが記事のWebサイト
- AMP導入の実装の手間や工数に負担が少ないWebサイト
- WordPressのプラグイン導入みので、手間を賭けずにAMP化が可能なWebサイト
AMPには広告制限があるため、広告で収益化をしているWebサイトの場合、AMP導入には適しません。
また、AMPを導入することでページデザインが崩れる可能性があり、メインコンテンツが記事でない場合も導入を慎重に検討したほうがよいでしょう。
AMP導入は実際にAMP HTMLやCSSを使って見出し作成やリンク設定、フォント変更、デザイン制作を行う工数や負荷が大きいため、負担にならないサイトが望ましいです。
WordPressでサイト作成している場合は、AMPのプラグインを導入するだけでAMP導入が完了できるような、手間をかけずにできるサイトであることも重要な視点です。
現状のサイト運営で表示速度の改善に強い関心があり、上記に合致するサイトであればAMP導入の恩恵を受けることができるでしょう。
AMPの対応方法
AMPの対応方法は、次の2つの方法です。
- AMP HTMLを実装する場合
- WordPressで制作したサイトであればAMPのプラグインを導入する
ここでは、AMPページをAMP HTMLを使って実装する方法を解説します。
AMP導入は、AMP HTMLの宣言に基づき、AMP専用のHTMLタグを使い、AMPページを作成していきます。
DOCTYPE宣言と、lang属性をマークアップする
AMP HTMLは最初にDOCTYPE宣言でlang属性の定義を行います。
記述箇所はHTMLの最上部ですが、AMP対応文言を次のように記述します。
【記述例】
<!doctype html>
<html amp lang=”ja”>
日本語サイトの場合、lang属性は”ja”です。
headタグ、bodyタグを指定する
AMP HTMLでは、headタグ・bodyタグの指定が必須です。
headタグを指定することで、AMP HTMLファイル情報（文書ヘッダ情報）を記述できるようにし、bodyタグでブラウザに表示するAMPページの文書部分を記述します。
meta要素でUTF-8とviewportを指定する
AMP HTMLでは、meta要素でUTF-8とviewportの指定が必須です。
文字エンコーディングをUTF-８で指定し、AMPページに記載の文字を認識させます。
その後、viewport指定でブラウザの表示領域設定と、レスポンシブ対応を可能にします。
【記述例】
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
AMP JSライブラリを読み込む
AMP HTMLでは、AMP JS ライブラリを読み込むことが必須となります。
AMP JS ライブラリを読み込んで、AMPページの高速表示が実行できるよう記述します。
【記述例】
<script async src=”https://cdn.ampproject.org/v0.js”></script>
AMPページを正確に表示させるため、AMP JSライブラリの読み込み情報をHTML上に記載します。
AMP JSライブラリの記述がない場合、AMPページが正しく反映されないため、必ず設定しましょう。
canonicalタグを指定する
canonicalタグとは、同一ドメイン内の重複コンテンツを一つに統合する方法です。
【記載例】
<link rel=”canonical” href=”http://example.ampproject.org/article-metadata.html”>
AMPページは、元々1つの情報コンテンツをモバイルユーザー向けに高速化した別ページとして複製して作成します。
canonicalタグを指定して、URLを正規化すれば、重複コンテンツ判定を回避することが可能です。
そのため、canonicalタグ設定がないAMPページの場合、重複コンテンツとしてGoogleからペナルティを受ける可能性があります。
必ずcanonicalタグを記述するようにしましょう。
また、AMPページとAMP以外のページが存在する場合、AMP以外のページにアノテーションタグ（link rel=”amphtml”）を指定し、AMPページの存在をGoogleに認識させます。
headタグ内にAMPボイラープレートコードを含める
AMP HTMLでは、AMPページを高速化するため、AMPボイラープレートコード（amp-boilerplate要素）の定型句の指定が必須です。
amp-boilerplate要素を指定し、AMP JS ライブラリが読み込まれる最初の間、コンテンツを非表示にします。
【記述例】
<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>
最後に、作成したAMPページをツールで検証し、有効性確認後、AMPの導入となります。
WordPress環境の場合
通常、規模の大きいWebサイトやECサイトでAMP化を進めるには、ある程度の開発期間や費用が必要になります。
WebサイトをWordPressで制作している場合、ブログサイトや静的コンテンツが中心のWebサイトであれば、無料のAMP対応テーマやAMP化のプラグインを活用し、簡単にAMPページ実装が可能です。
WordPressのAMP対応テーマも次のようなものがあり、WebサイトをAMP化できます。
- Cocoon（コクーン）：無料
- Luxeritas（ルクセリタス）：無料
- WING（ウィング）：有料
- DIVER（ダイバー）：有料
ただし、やみくもなテーマ導入には注意が必要です。
たとえば、既存でAMP未対応のWordPressサイトに、AMP対応WordPressテーマを導入すると、サイト表示がおかしくなる可能性があります。
テーマを変えることになるため、必ず確認するようにしましょう。
また、WordPressテーマを変える他に、WordPressのプラグインを用いることでAMP化が可能です。
「AMP Pliugin」を導入することで、現状のWebサイトのページを可能な限り、AMP化してくれます。
AMPが想定されていないページをAMP化する場合、表示レイアウトが崩れる可能性があるため、表示テストをしっかり行うようにしましょう。
PageSpeed InsightsやAMP TestなどでAMPの有効性計測が可能
AMP化したWebサイトページがGoogleなどの検索で有効なページになったかどうかを判断するために、AMPのテストツールで確認できます。
例えば、PageSpeed InsightsやAMP Testなどで有効性の計測が可能です。
また、下記ツールを併用し、AMPページの有効性検証をおすすめします。
- Google Chromeデベロッパーツール：コンソール機能
- Google Chrome拡張アドオン：AMP Validator
- Googleサーチコンソール：Accelerated Mobile Pages機能
適切なAMP導入でWebページ表示を高速化し、ユーザー離脱を防ごう
適切にAMPを導入することで、メディア運営側だけではなく、ユーザー側にもメリットがある方法と言えます。
可能であれば、ユーザビリティーやGoogleなどの検索エンジンの評価にもつながるため、AMPを導入しておくことが望ましいです。
ただし、「高速化できる！」と何も考えずに導入を決断するのはリスクが高いです。
現在、運営しているWebサイトの特徴や状態を正確に判断した上で、ユーザーの離脱を防ぐための施策としてAMP導入を判断するのがよいでしょう。
ミエルカ研究所は、人工知能と言語処理の力で、「言葉」の持つ可能性を追及、研究していくための研究所です。
SEO&コンテンツマーケティング・オウンドメディア支援ツール「ミエルカ」を提供するFaber Companyが母体となってます。
