ウェブサイト検索

WordPress 向け Google AMP の概要

  1. 1.現在読んでいる記事: WordPress 向け Google AMP の概要
  2. <スパン>2. WordPress で AMP をセットアップする方法

Google AMP (Accelerated Mobile Pages) は、ウェブをよりモバイル フレンドリーにし、大幅に高速かつ信頼性の高いものにするために設計された破壊的な新しいテクノロジーです。この投稿シリーズでは、Google AMP と WordPress での設定方法について詳しく説明します。

この投稿シリーズで取り上げる内容のリストは次のとおりです。

  • まず、現在のモバイル ウェブのトレンドについて簡単に復習し、AMP の必要性を正当化します。
  • また、ページ速度がビジネスにどのような影響を与えるかについてもう一度簡単に概要を説明し、AMP がどのように役立つかを見ていきます。
  • 次に、AMP とは何かを学び、AMP で何ができるのか実際の例をいくつか見ていきます。
  • これでこの記事は終わりになります。次の記事では、WordPress 用に AMP をセットアップする方法を学びます。

さぁ、始めよう。

Google AMP

AMP に関する情報を詳しく調べる前に、投稿に関連する WPCrafter ビデオ ガイドを参照してください。

コンサルティング会社 KPCB が発行した 2015 年のインターネット トレンド レポートによると、2015 年に平均的な成人は 1 日あたり 5.6 時間をインターネットに費やしました。そのうち、モバイル デバイスの使用時間は合計 2.8 時間でした。これは、モバイル デバイスを介してインターネットに費やされた時間が 1 日平均わずか 0.4 時間だった 2010 年に比べて大幅な増加です。

出典: エゾイック

モバイル インターネットの平均使用量は 2010 年から 2015 年の間に 600% 増加しました

出典: エゾイック

米国の消費者デバイス嗜好レポートに掲載された調査によると、 電子メールの3 分の 2 以上がモバイル デバイスで開かれており、そのうち 52% はスマートフォンで開かれ、16% はタブレットで開かれています。

出典: エゾイック

comScore が発行した 2015 年の米国モバイル アプリ レポートでは、2015 年から 2013 年の間に米国の成人がモバイル デバイスに費やした合計時間が 90% 増加したことがわかりました。同じレポートでは、モバイル アプリがモバイル デバイスの使用時間の 54% を占めているとも述べています。デジタル メディアの消費に費やされる合計時間は、モバイル ブラウザーが合計時間のさらに 8% を占めます。

全体として、デジタル メディアの使用時間の 62% がモバイル デバイスで費やされています。

そうです、モバイルファースト戦略は非常に重要です。ここで速度について少し話しましょう。

読み込み時間は重要です - それは非常に重要です。これは、収益、直帰率、サイト滞在時間、検索ランキング、他のほぼすべてのデジタル マーケティング チャネルにおけるパフォーマンスなど、他の重要な要素に影響を与える可能性がある重要な要素の 1 つです。

どのようなビジネスや Web サイトでも収益が最終目標であるため、デジタル マーケティング会社 Protent が実施した 2014 年の調査研究「サイト速度が全員の収益を損なっている」から興味深い事実をご紹介します。この研究のハイライトはページの速度が速いほど、 より多くの収益が得られるということです。

出典: プロテント

読み込み時間を 8 秒から 5 秒に短縮すると、ページ ビューあたりのドル (DPPV と呼びます) が 20% 増加します (37.5% 削減)。

しかし、本当の勝利は、ページの読み込み時間が 1 秒以下の場合に起こります。読み込み時間が 2 秒から 1 秒になると、ページビューあたりの金額が 2 倍に増加します。

収益だけでなく、 サイトの速度もソーシャルシェアのパフォーマンスに影響します。 Protent のチームは、(Facebook 広告からの) 100 回の有料クリックを 2 ページに送信するという、それほど網羅的ではない実験を実施しました。

ページ A は 2 秒でロードされ、ページ B は 4 秒でロードされました。何だと思う？ページ A は 10 株を取得しましたが、ページ B は 2 株しか取得できませんでした。サンプルサイズが小さすぎて仮説を検証できませんでしたが、重要なストーリーを伝えています。

モバイル インターネット市場の爆発的な成長を目の当たりにして、より高速なインターネット アクセス、速度、アクセシビリティ、信頼性の点で優れた Web テクノロジーに対する需要が最も重要になりました。 Google のような先駆者は、この増大する需要に応えるために多くのことができることにすぐに気づき、プロジェクト AMP が誕生しました。

AMPとは何ですか?

出典: BusinessofApps.com

AMP (Accelerated Mobile Pages) は、より高速で標準化され、応答性の高いモバイル Web を構築するためのオープン フレームワークです。 AMP の利点は、既存の Web テクノロジー上で動作し、モバイル ユーザー エクスペリエンスを劇的に向上させることです。これが、Google が AMP ウェブページを好み、SERP で上位にランク付けする理由です。

AMP はどのように速度を向上させますか?

AMP のオープン フレームワークは、既存の Web テクノロジーを活用し、その上に構築するように設計されています。そのため、WordPress などのコンテンツ管理システムでは、箱から出してすぐに機能します。

AMP は、標準化されたフレームワークに従って Web ページを構築し、既存のすべての Web ページがそのフレームワークに適応できるようにします。もう少し専門的な用語で言うと、非同期スクリプトのみを許可し、レンダリングをブロックする外部メカニズムを禁止し、インライン CSS のみを許可します。

簡単に言うと、AMP はまず Web ページのレイアウトを (ほぼ瞬時に) レンダリングし、優先順位に基づいてコンテンツを読み込みます。これにより、リソースの待機がなくなり、リクエストの数が大幅に最小限に抑えられます。これらすべての要素が互いに完全に調和して機能すると、ほぼ瞬時に読み込まれる超高速の Web サイトが得られます。

PenguinWP によってコンパイルされた次の速度テストを確認してください。「AMP 効果」が示されています。 AMP を使用することで、次のことが可能になりました。

  • PageSpeed スコアを 3 ポイント増加させます
  • ページの読み込み時間が 5 秒から 1.4 秒に 72% 短縮されました。
  • ページ サイズを 80% 削減し、リクエスト数を 82% 削減します。

数値をまとめた表は次のとおりです。

PageSpeed Score Load Time Total Page Size Requests
Original Version 92 5 1024 118
AMP Version 95 1.4 206 21
The AMP Difference 3 -3.6s -794KB -97
Percentage Improvement 3% -72% -80% -82%

コンテンツの保存

AMP は、ウェブを美しく、モバイル デバイスでの応答性を高めるように設計されました。これは、既存の Web テクノロジーのいくつかの重要ではない機能を削除することで実現されました。

それは、最新の Web の優れた機能がすべて取り除かれるという意味ではありません。いいえ。これらのリッチ コンテンツ機能をすべて、最小限の変更余地で標準化されたフレームワークに移行するだけです。

AMP は画像カルーセル、地図、ソーシャル プラグイン、データ ビジュアライゼーション、ビデオを完全にサポートしており、パブリッシャーのストーリーをよりインタラクティブで目立たせることができます。

ケーススタディ: ワシントン・ポスト紙

出典: AMP プロジェクト

AMP を使用したワシントン ポストのケーススタディを見てみましょう。 AMP の導入後、The Post ではモバイル検索からの再訪ユーザーが 23% 増加しました。これには少し説明が必要です。

The Post のトラフィックのほぼ 55% はモバイル デバイスからのものであり、これもこの記事の冒頭で共有した統計と同期しています。データが 3 秒以内に読み込まれない場合、ユーザーは離れ始めます。

従来、モバイル検索ユーザーの 51% は 7 日以内にワシントン ポストに戻ります。 AMP で公開されたストーリーを読むユーザーの場合、この数字は 63% に跳ね上がります。したがって、AMP を使用すると、モバイル検索トラフィックの維持率が 23% 増加しました。

それだけでなく、ページの読み込み時間は平均 400 ミリ秒となり、AMP 後は 88% 改善されました。現在、彼らは AMP 経由で 1,000 以上の記事をプッシュしています。

素晴らしい。 AMP にアクセスするにはどうすればよいですか?

ウェブページの URL に「/amp」を追加すると、ウェブサイトの AMP バージョンにアクセスできます。サイトが AMP をサポートしていない場合、またはレンダリング エラーが発生した場合は、Web サイトの元のモバイル対応バージョンに正常に降格するように設計されています。

コンテンツ配信

「AMP 記事用の無料 CDN としても知られています」

Google AMP Cache として知られるこの Google の無料サービスを使用すると、パブリッシャーはコンテンツをホストしながら、Google の高性能グローバル キャッシュ ネットワークを通じて効率的に配信できるようになります。言い換えれば、AMP サイトの無料 CDN のようなものです。

素晴らしい。どのように機能するのでしょうか?

AMP と互換性のあるウェブページは、Google によって特別な注意が払われます。ウェブサイトのページの AMP バージョンのインデックス作成を開始すると、Google はページを AMP キャッシュと呼ばれるものに保存します。コンテンツの所有権は依然としてユーザーにあり、Google は単に地球の遠く離れた場所にコンテンツを提供することに手を貸すだけです。キャッシュされたコンテンツの更新に関して、Google は次のように述べています。

「ユーザーがキャッシュから AMP コンテンツにアクセスするたびに、コンテンツは自動的に更新され、コンテンツがキャッシュされると、更新されたバージョンが次のユーザーに提供されます。」

どうやってアクセスするのでしょうか？

さて、見てみましょう。 Web ページの URL がある場合は、まず AMP が有効になっているかどうかを確認する必要があります。これを行うには、URL に「/amp」を追加するだけです。 AMP 化されたウェブサイトの Google AMP キャッシュ URL を取得する簡単な式を次に示します。

  1. URL に「/amp」を追加して、Web ページの AMP バージョンを取得します。有効な場合は、次のステップに進みます。それ以外の場合は停止します。
  2. 404 ページが表示された場合、その Web サイトには AMP が実装されていません。
  3. コンテンツが読み込まれている場合は、AMP がインストールされています。
  4. Google AMP キャッシュからコンテンツを取得するには、AMP URL の「www」部分を除いた先頭にhttps://cdn.ampproject.org/c/を追加します。
  5. メインのドメイン名 (「www」 を除く) から始めて、ウェブページの AMP URL をコピーします。
  6. URL に https://cdn.ampproject.org/c/s/ を追加すると、Google AMP キャッシュ URL が得られます。

Forbes の記事の例を取り上げて、上記の式をテストしてみましょう。

  • 元の Forbes 記事の URL は次のとおりです。
http://www.forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/
  • AMP バージョンを取得するには、/amp を元の URL に追加するだけです。
http://www.forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp/
  • ここで、Google AMP キャッシュ URL を取得するには、まずメイン ドメイン名から始まる、つまり「www」部分を除いた AMP URL を最後までコピーします。これにより、次のことが得られます。
forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp/
  • 次に、https://cdn.ampproject.org/c/s/ をその URL に追加して、同じページの Google AMP キャッシュ URL を取得します。
https://cdn.ampproject.org/c/s/forbes.com/sites/allbusiness/2015/10/24/10-great-paid-wordpress-themes-of-2015/amp

チェックしてみてください、うまくいきます!

スマート広告

高品質のコンテンツを作成するには、多大なリソースが必要です。広告は、ウェブ上の無料サービスやコンテンツの資金調達に役立ちます。 AMP はこのアイデアを組み込むように設計されており、75 以上の主要な広告ネットワークと提携しています。

AMP は、幅広い広告フォーマット、広告ネットワーク、テクノロジーをサポートしています。 AMP を使用しているサイトでは、ユーザー エクスペリエンスを損なわないフォーマットだけでなく、広告ネットワークの選択も維持されます。

分析

パブリッシャーは、コンテンツを操作するときのユーザーの行動を理解する必要もあります。そのため、AMP は comScore、Google Analytics、Krux など、25 以上のトップ分析ソリューション プロバイダーともうまく連携します。

2016 年 11 月 1 日st 時点で AMP によってサポートされる分析プロバイダー。 出典: AMP プロジェクト

結論

主要なコンテンツ生成、集約、分析プラットフォームは、Web サイトに AMP を実装し始めています。 Twitter、Pinterest、WordPress.com、Chartbeat、Parse.ly、Adobe Analytics、LinkedIn は、AMP HTML ページの統合を計画している最初のテクノロジー パートナー グループです。 Googleはまた、Google NewsをAMPファーストのプラットフォームにする計画もある。

この野心的なプロジェクトが進化してウェブの未来をどのように変えるかを見るのは興味深いです。

私は個人的に AMP ページのコンセプトが大好きです。これらは読むのが楽しく、モバイル対応の Web サイトに比べてデータ消費量がはるかに少なく、まったく目立たない方法で広告が表示されます。

AMP を使用すると、コンテンツの読み取り、消費、共有がはるかに簡単になり、楽しくなります。次の記事では、AMP を WordPress と統合する方法を学びます。

AMP についてどう思いますか?それは拾うつもりですか？