実用的なヒント付き Google AMP 完全ガイド

AMPとは

AMP は、正式名称を Accelerated Mobile Pages といい、Google が立ち上げたオープンソースのフロントエンドフレームワークです。
AMP の最も顕著な特徴はそのパフォーマンスです。現在の WEB 界で最速のフレームワークと言っても過言ではありません。 Google は、JS やウェブページのデータをキャッシュに保存するなど、AMP のパフォーマンスを極限まで最適化しました (詳細については、こちらの記事「AMP がパフォーマンスを向上させる仕組み」をご覧ください)。

AMP を行う必要はありますか?

もちろんそれは必要です。理由は2つあります。
まず第一に、速いです！
内部の事例によると、AMP ページは読み込み時間が PC ページより 1 倍速く、インタラクション時間が 2 倍速いそうです。
第二に、SEOトラフィックが増加します。（詳細は次のセクション「AMP キャッシュ」を参照してください）
Google は AMP ではランキングやトラフィックは向上しないと述べていますが、実際の経験からすると、AMP トラフィックは依然として大幅に増加します。

AMP キャッシュ

AMP ページが Google の検証に合格すると、Google の AMP インデックスライブラリに追加され、Google AMP キャッシュが確立されます。
AMP キャッシュが導入されると、ユーザーが Google 検索を通じてウェブページにアクセスすると、元のウェブページの URL ではなく、キャッシュ URL に直接アクセスすることになります。また、ウェブサイトサーバーにリクエストすることなく、Google の CDN キャッシュからデータに直接アクセスすることもできます。

例: Alibaba リストページ - パワーバンク
AMP アドレス: https://m.alibaba.com/amp/showroom/power-bank.html
CDN キャッシュアドレス: https://www.google.com/amp/s/m.alibaba.com/amp/showroom/power-bank.html

ユーザーが検索する際に、パフォーマンスを大幅に向上させる非常に重要なポイントが 2 つあります。
1 つ目は、Google がウェブサイトサーバーにアクセスすることなく、ウェブページのデータをキャッシュサーバーに配置することです。
もう 1 つの理由は、ユーザーが検索すると、 Google が AMP ページをプリロードし、数秒以内に AMP が開くようになることです。

これら 2 つの機能は、特にモバイルインフラストラクチャが貧弱な国や地域では、モバイルアクセスにとって非常に重要です。

キャッシュ更新戦略

AMP には、アクティブとパッシブの 2 つの更新戦略があります。

アクティブな更新。定期的に Web ページにアクセスしてキャッシュを更新してください。
パッシブアップデート。ユーザーがウェブページにアクセスするたびに、Google は同時にページをリクエストし、キャッシュを更新して、各ユーザーが最新のデータにアクセスできるようにします。

ただし、これら 2 つの更新戦略にもかかわらず、私たちの実験では、データにはまだ一定の遅延があることに注意する必要があります。したがって、パーソナライズされたデータ、P4P データなどのリアルタイムデータでは、引き続き非同期リクエスト (amp-list コンポーネント) を使用する必要があります。

上の図は内部統計の事例です。

AMPの適応方法

多くのウェブサイトにはすでに PC サイトと M サイトがあり、さらに AMP も登場しています。どのように適応できるでしょうか?適応には 2 つの種類があります。

PC + AMP

このフォームは比較的シンプルで、amphtml と canonical を設定するだけで済みます。aliexpress.com の場合もこれに該当します。関係図は以下のとおりです。

PC + Mステーション + AMP

この状況は少し複雑です。Alibaba.com はこの形式を採用しています。

PC、M ステーション、AMP、英語、多言語など、より複雑なアーキテクチャを持つ Web サイトもあります。完全なアーキテクチャ図は次のとおりです。

AMP実践経験

実際の結果から判断すると、 AMP は、Web ページのパフォーマンスの観点からも、SEO トラフィックの向上の観点からも、見逃せない新しいテクノロジーです。
まず、 AMP は WEB 側で最も強力なフレームワークであるはずであり、Google はパフォーマンスを極限まで最適化しました。 Alibaba のフロントエンドは、AMP のアイデアを参考にしてパフォーマンスをさらに向上させています。
第二に、GoogleはAMPがランキング優先にならないと言っているものの、実際の結果から判断すると、 AMPのトラフィックは依然として増加するでしょう。 AMP は近年稀に見る技術的な配当です。

AMP よくある質問

AMPの検証方法

ローカル開発が完了したら、AMP ページを検証する必要があります。検証に失敗した場合、Google に掲載されません (オンラインになったときに多くの問題が見つかります)。これは次のツールを使用して確認できます。

AMP オンライン検証ツール: https://ampbench.appspot.com/validate?url=https://ampbyexample.com/
AMP バリデータ: https://validator.ampproject.org/
別の公式検証ツール: https://search.google.com/test/amp
AMP Chrome プラグイン検証ツール: https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=zh-CN
AMP キャッシュリンク生成ツール: https://github.com/ampproject/amp-by-example/blob/master/src/30_Advanced/Using_the_Google_AMP_Cache.html (キャッシュが生成されているかどうかを確認しますが、Google 検索に表示されるとは限りません)

AMP WordPress プラグイン

Google は公式の WordPress AMP プラグインをリリースしました。プラグインをインストールすると、ワンクリックでウェブサイトを AMP バージョンに切り替えることができるので、WordPress ユーザーにとって非常に便利です。
公式プラグインアドレス: https://wordpress.org/plugins/amp/

AMPのカウント方法

AMP は amp-analytics コンポーネントを使用してデータ統計を実行できます。 Google Analytics と Baidu Tongji の両方がサポートされています。
実装は次のとおりです。

このコードを<head>領域に追加します

 <script async custom-element="amp-analytics" src='/images/loading.gif' data-original="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

ウェブトラッキングや時間トラッキング用のコードを追加する

<amp-analytics type="baiduanalytics" id="analytics2"> <script type="application/json"> { "vars": { "token": "你的token" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script></amp-analytics>

参考資料:

AMP ページに Google アナリティクスを追加する https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=en
AMP ページに Baidu 統計情報を追加する https://tongji.baidu.com/web/help/article?id=268&type=0&castk=LTE%3D

AMPの組み込み方法

AMP は、主に PC 上の amphtml リンクに依存して組み込まれます。
サイトマップを別途送信することもできますが、実際の結果は平均的です。
また、AMP の包含率は一般的な Web ページよりも低いことにも留意することが重要です。これは、AMP の品質基準が比較的高いことを示しています。

Baidu で AMP は使えますか?

わかりました。 Baidu はすでに AMP をサポートしており、送信、インクルード、キャッシュ更新をサポートする API を備えています。

Baidu AMP データ送信ポータル: https://ziyuan.baidu.com/mip/index?site=http%3A%2F%2Fwww.example.com/

AMP は Chrome でのみ使用できますか?

いいえ。 AMP は、すべてのブラウザをサポートし、すべての国からアクセスできるオープンソースのフロントエンドフレームワークです。

AMP はモバイルデバイスでのみ利用できますか?

いいえ。 AMP は PC ページもサポートできます。

PWA でも AMP は必要ですか?

AMP と PWA は実際には異なるアプリケーションシナリオであり、競合はないため、AMP と PWA は共存でき、補完的です。
alibaba.com は AMP と PWA の両方を使用しています。

AMP は有料ですか? 承認が必要ですか?

AMP は完全に無料で、既存のテンプレートを変更するだけですぐに有効になります。
最適なリソースは、公式ドキュメントのクイックスタートページです: https://www.ampproject.org/zh_cn/docs/getting_started/quickstart。

さらに、AMP は Facebook の React Native とは異なり、認証を必要としません。 AMP は完全にオープンソースであり、著作権侵害の問題はありません。私はジョン・ミュラーに直接このことを確認いたしました。

既存の M サイトを AMP サイトに変換するにはどうすればよいでしょうか?

まずは主要チャネルから開始し、効果を確認した後、各チャネルを 1 つずつアップグレードすることができます。
たとえば、Detail が最初に AMP に切り替わる場合、Detail M サイトの以前の URL は/detail/{id}.htmlであり、AMP の URL は/detail/amp/{id}.htmlに設定できます。
オンライン化後、効果が検証され、他のチャネルも徐々に変革していきました。
また、ホームページは1ページしかなくトラフィックも限られているため、結果重視で最初にホームページに切り替える必要はないと推奨されます。