AMPの詳細ガイド–GoogleのAcceleratedMobile Pages

AMPはどのように機能しますか？ Accelerated Mobile Pagesを作成してカスタマイズするにはどうすればよいですか？ WordPress、Joomla！、Drupal、OpenCartなどの人気のあるCMSでサイト所有者が使用できるツールは何ですか？ AMPを実装するときにウェブマスターが直面する落とし穴と、問題を解決する方法は何ですか？

次のマニュアルで、これらの質問やその他の質問に対する回答を確認してください。

AMPとは何ですか？

AMPはAcceleratedMobilePagesの略です。 この用語は、モバイルユーザー向けにサイトのページを表示するテクノロジーを意味し、サイトの読み込み速度を最大にします。

AMPは、従来のWebページの根本的に切り捨てられたバージョンです。 Accelerated Pagesでは、メインコンテンツが残ります。 ウィジェット、コメントフォーム、推奨コンテンツのブロック、従来の広告など、ほとんどの補助要素は、アクセラレーションページにはありません。

Accelerated Mobile Pagesは、Googleが主導するオープンソースプラットフォームおよびプロジェクトです。 したがって、誰でもこのイニシアチブを無料で使用できます。

プロジェクトのイデオロギーのインスピレーションとマウスピースはGoogleです。 世界最大の検索エンジンは、AMPページを使用して検索結果ページ（SERP）に表示します。 さらに、Googleは高速化されたモバイルフレンドリーページをキャッシュし、そのCDNとして機能します。 このため、モバイルユーザーは低速のデータ接続でもAMPコンテンツをすばやくダウンロードできます。

この図と説明は、Will Critchlowのホワイトボードフライデーからのもので、プロセスを簡素化します。

Accelerated Pagesは、特別なタグが付いたHTMLマークアップと専用のJavaScriptライブラリで構成されています。

• AMPは、CSSの合理化されたバージョンを使用することを強制します。
• Javascriptはまったく許可されていません。
• AMPが提供する既成のJavascriptライブラリを使用する必要があります。これにより、画像が遅延ロードされます。

AMPページでは、限られたタグとスクリプトのセットを使用できます。 これにより、ページの機能と外部の魅力が低下しますが、読み込み速度が大幅に向上します。 また、Googleのプリキャッシュテクノロジーにより、ページの読み込み時間が短縮されました。

Webサーファーは、2つの根本的に異なる方法でAMPを使用できます。 1つ目は、サイト所有者のサーバーから訪問者のコンピューターにデータを転送し、ブラウザーにページの高速化バージョンを表示することです。 たとえば、AMP対応サイトでは、すべてのモバイルユーザーのAcceleratedPageへの自動リダイレクトを設定できます。 訪問者は、モバイルデバイスを使用してAMPにアクセスするか、ブラウザのアドレスバーのURLに接尾辞「/amp」を追加できます。

2番目の方法では、キャッシュされたバージョンのAMPをGoogleサーバーから表示します。

世界最大の検索エンジンは、加速されたページへのリンクをSERPのカルーセル形式で表示するか、AMPコンテンツにAMPロゴアイコンを付けます。

ページを表示するとき、ユーザーはサイトにアクセスせず、発行者のページから同じコンテンツを閲覧します。

残念ながら、Googleは、これらのデバイスで生成された問題のページにAMPカルーセルを表示する必要があるとは考えていません。 したがって、例として検索エンジンランドに感謝します。

Accelerated Mobile Pagesを使用する価値はありますか？

この質問に答えるには、AMPの実装の長所、短所、および結果に注意を払う必要があります。

AMPの利点

AMPの主な利点は、劇的な読み込み速度の最適化です。 この表は、いくつかの一般的なメトリックサービスによってページの基本および高速化されたAMPバージョンをテストした結果を示しています。

読み込み速度が遅いと、ユーザーエクスペリエンスに悪影響を及ぼします。 訪問者の半数以上は、コンテンツが表示されるのを3秒以上待たない。 Accelerated Pagesは、標準のページよりもはるかに高速に読み込まれます。

これは、AMPテクノロジーを使用して転送されるデータの量が大幅に削減されるために可能になります。

さらに、オンラインショッピングサイトが1日あたり100,000ドルを稼いでいる場合、1秒のページ遅延により、毎年250万ドルの売り上げが失われる可能性があります。

モバイルデバイスのユーザーにとって、高速読み込みは非常に重要です。 そのため、GoogleはAMPを事前にキャッシュし、低速のインターネットを使用する人々のCDNとして機能します。

ウェブサイトの読み込み速度とユーザーエクスペリエンスは、Googleの主要なランキング要素の1つです。 Accelerated Mobile Pages自体は、Googleのランキングに追加の利点を提供しますか？

2016年半ばにシカゴで開催されたGoogleの検索エンジンジャーナルサミットで、GoogleのスポークスマンHarry Illesは、AcceleratedMobilePagesはランキング要素に含まれていないと述べました。 しかし、Googleの担当者は、AMPが将来的にランキング要素になることはないと明確に言うことができませんでした。

どういう意味ですか？ AMPテクノロジーだけでは、サイトにランキングの利点はありません。 それにもかかわらず、それはグーグルランキングアルゴリズムの行動要因を分析するランクブレインによって考慮されるサイトの読み込み速度を大幅に向上させます。

ニュースサイトとコンテンツプロジェクトは、AMPカルーセルに入るときにAMP実装の恩恵を受けます。 この要素は、検索結果の上のSERPの上部に表示されます。 これにより、サイト運営者はクリック数を増やし、検索エンジンとSEOのランキングを間接的に向上させることができます。

したがって、Accelerated Pagesの主な利点は、読み込み速度が速いことです。 これにより、ユーザーエクスペリエンスが向上し、GoogleSERP内のサイトの位置に間接的に影響を与える可能性があります。 また、AMPカルーセルのおかげで、リソースは追加のビューを受け取ることができます。

AcceleratedMobilePagesのデメリット

AMPにはいくつかの欠点があります。 主なものは次のとおりです。

• AMPページの訪問者は、ウェブサイトのメインバージョンにある標準のGoogleAnalyticsコードでは追跡できません。 AMPビューと訪問者を追跡するには、AMPページに専用の追跡コードを追加する必要があります。 Glue for Yoast SEO＆AMPプラグインを使用すると簡単に実行できます。
• Accelerated Pagesは、基本的なページに比べて機能が低下しています。 ナビゲーションメニュー、関連する投稿のブロック、サイドバー、コメントフォームなどのすべてのクラシックモジュールは、手動またはプラグインを介して追加する必要があります。
• 読み込み速度を上げるために、サイトの視覚効果を犠牲にします。
• Googleがカルーセルでサイトの高速化されたページを表示する場合、ユーザーはSERPを離れることなくそれらを読むことができます。

読み込みを高速化するには、ページの機能と外観の代償を払う必要があります。 欠点のほとんどは完全にまたは部分的に取り除くことができることに注意する価値があります。 ただし、AMPは常にサイトのベースページの簡略化されたバージョンのままです。

AMP実装の結果

GoogleはウェブサイトでAMPをすばやく認識します。 インデックスに登録されたAMPページに関する情報は、サイトでAMPが公開されてから数日以内に、検索コンソールの「検索アピアランス>>AcceleratedMobilePages」セクションに表示されます。

インデックス作成のほぼ直後に、GoogleはサイトのAMPバージョンにトラフィックを送信します。 2018年5月末現在、訪問者の約50％が、基本的なページではなく、加速されたバージョンのページでGoogleから直接アクセスしています。 ここにいくつかの興味深い統計があります：

• 5月20日から26日までの1週間以内に、1812人の訪問者がGoogleからテストサイトにアクセスしました。
• 1812人のうち1011人がモバイルユーザーです。
• Googleの842人のユーザーがAcceleratedMobilePagesにアクセスしました。

代表的であると主張せずに特定のリソースの例を使用すると、Googleが訪問者をAMPページに積極的に送ることは明らかです。 検索エンジンの高速化されたページには、ユーザー総数の46％またはモバイルユーザーの83％が含まれていました。 スマートフォンとタブレットの所有者の残りの17％は、アダプティブレイアウトの基本ページを利用しました。

注意が必要なデータは次のとおりです。

• Accelerated Mobile Pagesのバウンス率は、標準ページのバウンス率よりも大幅に高くなっています。 Google Analyticsによると、通常のページの55％に対して86％に達しました。 これは、GoogleAnalyticsサービスによるAcceleratedPagesのパフォーマンスの誤った追跡が原因である可能性があります。 ユーザーがAMPから基本ページに移動すると、監視システムは新しい訪問をカウントします。 この場合、アクセラレーションページのバウンス率は増加し、セッションの深さは減少します。
• AMP訪問者のセッションあたりのページ数の比率は、アダプティブページまたは通常のページへの訪問者よりも低くなります。 ユーザーは、通常のページの訪問者よりも、関連する投稿のセクションを使用してサイトの他のページに移動する可能性がはるかに低くなります。

AMPの実装後、Googleからのトラフィックがわずかに増加しました。 適度な検索トラフィックの増加のダイナミクスは残っています。

AMPを使用した結果を評価するには、Googleからの平均出席者数が1日あたり約150人の1つのリソースだけでは不十分です。 したがって、他の誰かの経験に目を向ける価値があります。 ここにいくつかの興味深いデータがあります：

調査の結果によると、Googleは、基本的なページと比較して、AMPでのコンテンツターゲット広告の効率が高いと述べています。 画面の表示部分に表示されるAdSenseブロックは80％増加し、広告ブロックのクリック率は90％増加しました。

検索エンジンウォッチからの興味深いデータ。 Wired Magazineは、AMPのおかげで、検索結果のCTRリンクが25％増加しました。 また、Accelerated Pagesの広告のクリック率は63％向上しました。 Slateマガジンのサイトの月間出席者数は、AMPの実装後に44％増加しました。

ウォールストリートジャーナルとのインタビューでCNNの代表は、AMPと基本的なページは同じように効果的に広告の助けを借りて現金化されていると述べました。

AMPは、基本ページよりもはるかに高速に読み込まれます。 ただし、ページの機能と外観を犠牲にする必要があります。 テストサイトでは、AMPの実装後にトラフィックが突然増加することはありませんでした。 ただし、Googleは、モバイルユーザーの3人に2人の3人に1人の訪問者に、テストブログの標準ではなく加速されたページを表示するように指示しています。

一部のウェブマスターは、AMPをGoogleの不必要な気まぐれと見なしていますが、インターネット上の多くのサイト運営者は、サイトへの訪問者数の増加と広告の効果の向上を報告しています。 この情報は、AcceleratedMobilePagesを使用するかどうかを自分で判断するのに役立ちます。

WordPressにAMPをインストールする方法

WordPressユーザーの幸運のために、AcceleratedMobilePagesは1分以内に実装できます。 これを行うには、WordPress開発チームからAMPforWordPressプラグインをインストールしてアクティブ化する必要があります。 AutomatticによるAMPプラグインには設定がありませんが、通常のブログ投稿で完全に機能し、ほとんどすべてのWordPressテーマと互換性があります。

AMPページはAMPバリデーターでテストできます。

機能を拡張し、AMPページの外観を改善するには、WPプラグインに代替のAMPを使用することをお勧めします。 プラグインをインストールしてアクティブ化した後、管理パネルのクイックページセットアップメニューに移動します。

[全般]セクションで、必要に応じてサイトのロゴをアップロードします。 推奨される画像サイズは190×36ピクセルです。 [サイズ変更]ボタンを使用して、ロゴの任意のサイズを指定できます。 AutomatticによるAMPonWordPressプラグインとは異なり、静的ページのAMPバージョンが必要な場合は、ボタンをオンの位置に切り替えます。

[アナリティクス]セクションで、Googleアナリティクスを使用してAMP訪問追跡を有効にします。 これを行うには、GoogleAnalyticsIDを入力します。 さらに、ここでは、GoogleTagManagerを使用してGoogleAnalyticsを有効にできます。

[デザイン]セクションでは、AMPページのテーマとレイアウトを変更できます。 ここでは、既製のデザインオプションを選択できます。 AMPテーマフレームワークを使用して独自のカスタムテーマを作成することもできます。

SEOセクションでは、加速されたページでのYoast SEOプラグインからのメタデータの表示を構成したり、ヘッダーに任意のHTMLコードを追加したり、アーカイブやカテゴリのページのインデックスを構成したりできます。 Yoast SEOプラグインを使用しない場合は、デフォルト設定のままにします。

[広告]セクションで、AdSense広告の表示を設定します。 プラグインは、広告の4つのオプションを提供します。すべてのページのヘッダーの上、すべてのページのフッターの下、および出版物のページのコンテンツの上と下です。

投稿ページのコンテンツの下に広告を配置するには、[AD＃4]ボタンをオンにします。広告のサイズを選択します。 AdSenseアカウントに広告を作成し、ユーザーIDと広告ユニットIDを提案されたフィールドに追加します。 作成した広告のコードからデータを取得します。

必要に応じて、一致したコンテンツのブロックをアクセラレーションページに表示できます。 一致したコンテンツは、サイトの訪問者にコンテンツを宣伝する簡単な方法を提供する無料の推奨ツールです。 読者に関連性の高いコンテンツを提供することで、サイトのページビュー、サイトでの滞在時間、読者の忠誠心、広告の表示回数、そして最終的には広告収入を増やすことができます。 これを実現するには、プラグインの対応するフィールドにブロックIDを指定します。

[単一]セクションで、投稿ページの外観と機能を構成します。 画面の下部に添付されたソーシャルアイコン、前の投稿と次の投稿へのリンクを有効にしたり、関連する投稿のブロックを構成したりできます。

[ソーシャル共有]セクションで、ソーシャル共有ボタンを有効にします。 構造化データのセクションでは、高速化されたページのマイクロマークアップの画像が読み込まれます。 Googleはそれを使用して検索結果を生成できます。 また、ソーシャルネットワークでアクセラレーションページへのリンクを公開するときにスニペットで使用される画像のサイズを指定します。

[通知]セクションで、通知の表示を構成できます。 たとえば、Cookieの使用ポリシーについて訪問者に通知し、GDPR通知を表示できます。

Disqusのコメントセクションでは、AcceleratedPagesでコメントシステムDisqusを有効にできます。 これを行うには、Disqusコメントサポートボタンをオンに切り替え、DisqusシステムのリソースのURLと、サーバー上のコメントファイルへのパスを指定します。

コメントシステムを有効にしない場合、AMPページには、ベースページの訪問者が残したコメントのテキストと[コメント]ボタンが表示されます。 ボタンをクリックすると、ユーザーはページの基本バージョンにリダイレクトされます。

[詳細設定]セクションでは、メインページの高速化バージョンと、見出しおよびアーカイブのページを有効にできます。 この機能には、[ホームサポート]ボタンと[アーカイブページサポート]ボタンを使用します。

[モバイルリダイレクト]ボタンを使用すると、サイトのアダプティブバージョンからAMPへのすべてのモバイルユーザーの自動リダイレクトが可能になります。

すべてのユーザーをAMPにリダイレクトしないでください。 すべての訪問者がサイトへのアクセラレーションページを必要とするわけではありません。 リダイレクトにより、スマートフォンとタブレットの所有者は、機能が制限されたページの短縮バージョンを使用するように強制されます。 これにより、サイトのコンバージョン率が低下する可能性があります。

さらに、GoogleがサイトとAMPのデスクトップバージョンを確認した場合、モバイルファーストインデックスとしてデスクトップのバージョンを選択します。 これは、モバイルデバイスへのリソースの適応の欠如によるトラフィックの損失につながる可能性があります。

フッターボタンの[非AMPへのリンク]を使用して、フッターのページのフルバージョンへのリンクを有効にしてください。 これは、ユーザーが追加機能を備えた基本ページに移動するのに役立ちます。

[拡張機能]セクションでは、プラグインのアドオンを購入して有効にすることができます。 たとえば、追加のツールを使用して、Accelerated Pagesの広告を管理したり、マイクロマークアップ「Rating」をAMPに追加したりできます。

[AMPエラーの修正]セクションで、有料サポートを有効にできます。 プラグインの開発者は、設定を理解し、検索コンソールでエラー通知を取り除くのに役立ちます。

Import / Exportブロックを使用すると、アクセラレーションページの設定をあるサイトから別のサイトに移行できます。

そのため、WordPressサイトでは、AcceleratedPagesを数分で実装できます。 AMPforWPプラグインを使用してレイアウトと機能をカスタマイズするためにもう少し時間を費やします。

Drupal用のAMP

DrupalサイトにAcceleratedMobilePagesを実装するには、次のツールを使用します。

• AMPモジュール。
• AMPテーマ。
• AMPライブラリのHTML。

AMPモジュールを使用するには、プラグインTokenとChaosToolsが必要です。 AMPページにAdSense広告を表示する場合は、GoogleAdSense統合拡張機能をインストールしてください。

[構成]タブの[AMP設定]ページで、パブリケーションおよびページのアクセラレーションバージョンの表示を有効にします。 AcceleratedPagesの作成に使用するテーマを選択します。 Google Analytics IDを入力して、ページへのアクセスを追跡します。 また、ビューのカウントにAMPピクセルを使用できます。

[AMPメタデータ]タブで、サイトの名前を入力します。 必要に応じて、ロゴをダウンロードしてサイズを選択します。

構成後、ページの高速化バージョンの表示を確認します。 これを行うには、値「？amp」をURLに追加します。

Joomla！のAMP

Joomla！にアクセラレーテッドページを実装するにはサイトは拡張機能wbAMPを使用します。 このプラグインのフルバージョンは、年間44ドルの費用がかかります。 コミュニティバージョンは無料で利用できます。

プラグインをインストールしてアクティブ化した後、設定ページに移動します。 プラグインの無料バージョンは機能が制限されているため、アクセラレーションページを表示するための基本的なパラメータのみを設定できます。

AMPURLのデフォルトのサフィックス値のままにします。 この場合、アクセラレートされたページを表示するには、amp値を追加するだけで済みます。

また、メイン設定ページで、サイトと発行元のデータに関する情報を入力してください。 適切なタイプのマイクロマークアップを選択します。ニュースノートの場合はNewsArticle、ブログ投稿の場合はBlogPostingです。

加速バージョンを作成するページを選択します。 これを行うには、[ページの選択]タブに切り替えます。

「com_contentのルール」セクションを完了します。 出版物のみにアクセラレーションページを表示する場合は、[表示]フィールドで記事の値を指定します。 [カテゴリ]フィールドで、パブリケーションにAMPバージョンが含まれるカテゴリを選択します。 フィールドID、品目のID番号、および「タスク」を入力し、値「*」を入力します。 この場合、AMPは、選択したカテゴリのすべてのパブリケーションに対して作成されます。

プラグインの無料バージョンの他の設定は利用できません。

Joomlaでアクセラレーションページを作成するための別の商用ツールがあります！ サイト：JAmpプラグイン。 それは39ユーロかかります。 プラグインのテストサイトでは、ツールが標準ページを高速化されたページに変換する方法を確認できます。

WordPressやDrupalとは異なり、Joomla！ AMPを作成するための完全に無料のツールはありません。

オンラインストア用AMP

AMPテクノロジーは、主にコンテンツプロジェクト（ニュースリソース、ブログ）向けに設計されています。 eコマースサイトのアクセラレーションページを作成する必要がありますか？

AMPプロジェクトの作成者は、オンラインストアはアクセラレーションページを使用でき、使用する必要があると主張しています。 eコマースリソースにテクノロジーを実装することを支持する主な議論–モバイルページの読み込み速度を上げることは、コンバージョンにプラスの影響を与えます。 ちなみに、eBayは2016年半ばからAMPの実験を行っています。

OpenCart用のAMP

OpenCartのアクセラレーションページを作成するには、AcceleratedMobilePagesモジュールを使用します。 これは有料のソリューションです。 また、このモジュールを使用して作成されたAcceleratedMobilePagesのテストバージョンをリンクから常に表示することができます。

製品ページモジュールのAMPをテストすることもできます。 これは無料のソリューションです。 アドオンは、製品ページに対してのみAMPを作成します。 AMP for Product Pagesの作業には、SEOフレンドリーURLモジュールが必要です。

製品ページモジュール用の無料のAMPは、現時点では推奨されていません。これは、以前のソースで1日半稼働していて、動作していないためです。 OpenCartバージョン2.3.0.2でプログラムをインストールしてアクティブ化した後、サイトのアクセラレーションページは表示されません。 アドオンは、ページヘッダーにAMPバージョンへのリンクを追加します。 リンクをクリックすると、404エラーが表示されます。

また、モジュールをインストールした結果、定期的にサイトにアクセスできなくなり、ブラウザの画面にさまざまな種類の落書きや文字化けが表示されます。 モジュールを取り外して再取り付けすると、保守性が回復します。

おそらく、問題はOpenCartサイトを管理する実際の経験の欠如に関連しています。 プロファイルフォーラムのユーザーは、主に製品ページモジュールのAMPについて肯定的なフィードバックを持っています。

Magento用のAMP

オンラインストアがMagentoプラットフォームで実行されている場合は、有料プラグインのAcceleratedMobilePagesを使用してください。 このモジュールは、メイン、カテゴリ、および製品ページのAMPを作成します。

PrestaShopのAMP

PrestaShopストアのアクセラレーションページは、有料モジュールPrestaShopAMPを使用して作成できます。 メイン、カテゴリページ、製品カードの高速バージョンを生成します。

モジュールの機能は、テストサイトで評価できます。

AMPを実装するかどうか、それが問題です。

WordPressで実行されるコンテンツプロジェクトがある場合は、AMPページを迅速かつ費用対効果の高い方法で実装できます。 基本プラグインのインストールに1分、代替AMPプラグインのインストールと構成に30分かかります。

Drupalが管理するサイトには、すばやくインストールして構成できる無料のソリューションもあります。 しかし、Joomla！ AMPを作成するためのオンラインストアプラグイン用のCMSを購入する必要があります。

ただし、場合によっては、AMPの結果が期待したほど明るく光沢がないことがあります。 AMP実装のケーススタディでは、Kinstaが非常に重要な洞察を共有しています。KinstaブログでAMPが有効になっていた期間は次のとおりです。

• モバイルリードは59.09％減少しました。
• モバイルからのニュースレターの電子メール登録は16.67％減少しました。
• モバイルデバイスからのアカウント作成は10.53％減少しました。

さらに、AMPが完全に削除されたとき、Kinstaのランキングは実際に上がりました。 なぜそれが起こっているのですか？ おそらく最大の理由の1つは、AMPが広告を多用するニュース指向のプロジェクトのSERPパフォーマンスを向上させる可能性があることです。その間、ウェブサイトがすでにモバイルでかなり高速である場合、AMPによる大きなプラスの影響はありません。

グーグルによると、世界中のセルラーネットワーク接続の70％は2020年まで3G以下の速度で発生します。したがって、モバイル向けに最適化することは非常に重要ですが、すでに十分に最適化されたサイトを持っている人はおそらく大きな違いに気付かないでしょう。

機能と外観が標準ページより劣っていて、ランキングに明らかな利点がまだない場合、Accelerated Mobile Pagesを使用するのは理にかなっていますか？

検索市場のグローバルリーダーであるグーグルは、明らかにこのプロジェクトをさらに進めるだけであり、他の人はそのルールに従って行動しなければならないでしょう。 ロジックは単純です。モバイルトラフィックのシェアは増加しており、今後も増加します。 人々は電話や時計の助けを借りてだけでなく、オンラインになります。 現在、コーヒーメーカーや洗濯機もオンラインになっています。 したがって、モバイルデバイスの画面にコンテンツを表示する技術は進化します。

ちなみに、数年前、サイトの所有者は、サイトをモバイルトラフィックに適応させる必要性について懐疑的でした。 今日、モバイルバージョンまたはアダプティブレイアウトは、オンラインリソースを効果的に運用するために必須です。

AMP技術は、近い将来、サイトの有効性の基本条件の1つになる可能性が非常に高いです。