モバイル端末からインターネットを利用する機会は増えつづけており、  Google 検索もモバイル端末からの利用がデスクトップからよりも多くなってきています。一方、現在のモバイル インターネットは、特にスピードの面において、必要な情報を求めるユーザーの期待に応え切れていないという現実があります。この状況を改善するため Google は業界各社の協力のもと、昨年 10 月にオープンソース プロジェクトである Accelerated Mobile Pages （AMP） プロジェクトを発足しました。

以来、モバイル インターネットの向上という共通課題のもとに、多くの企業が AMP プロジェクトに参加し、新たな AMP カスタムタグや AMP ページの公開を含む進化が続いています。そして本日より、Google は AMP ウェブページをモバイル検索に導入いたします。日本の対応パートナーは日々増えておりますが、本日の時点で、朝日新聞、映画.com、zakzak、THE PAGE、産経ニュース、SankeiBiz、SANSPO.COM、シネマトゥディ、日刊スポーツ、BLOGOS、毎日新聞、マイナビニュース、レスポンスの 13 メディアが対応しています。これにより、日本語の主要記事においても素早くアクセスと高速表示が可能となりました。

これらの AMP 対応されたページはどのように Google 検索に表示され、どうして瞬時にモバイルブラウザで表示されるのでしょうか。次の図で説明します。


ニュース記事を提供しているメディアやコンテンツ提供者が、これまでのモバイル向けのウェブページに加えて、AMP HTML に準拠したウェブページを公開すると、Google のクローラーが AMP ページをキャッシュします。キャッシュされたコンテンツが検索クエリに関連が深いと判断された場合、検索結果にはキャッシュされたページの URL がリンクされます。検索結果に表示されたキャッシュ済みの AMP ページにユーザーがアクセスする場合には、キャッシュ済みのためコンテンツの取得までの時間が短く、また広告やアナリティクスといったタグは遅延読込されるため、記事の表示が瞬時に行われます。

すでに先日のブログポストで AMP ページの実装方法をご紹介しましたが、再度簡単に AMP ページの実装手順をご紹介します。なお AMP の仕様はまだ策定が進んでいる途中ですので、新規に対応される場合には常に GitHub にある最新の情報をご確認されることをおすすめします。

  1. AMP ページと正規版のページの URL の対応を検討する
    • 正規版の URL にパスを追加する 例） https://foo.com/article/amp/index.html
    • ファイル名に文字を追加する 例） https://foo.com/article/index.amp.html
    • URL パラメータを追加する 例） https://foo.com/article/index.html?amp
  2. AMP ページ設置予定の URL に Google のクローラーがアクセスできるようにする
    • robots.txt を確認する
    • 正規版のページのメタタグに nofollow 等がないようにする
  3. AMP HTML の仕様にしたがい、AMP ページを作成する
    • Required Markup の項目がすべてあるか確認する
    • Google の検索結果に表示されるためには schema.org に準拠したメタデータの付与が必要
  4. validator を用いて AMP ページが正しくマークアップされているかいずれかの方法で確認する
    • URL に #development=1 というフラグメントをつけて Google Chrome の開発者ツールで確認
    • node.js 製の validator をコマンドラインで実行して確認する
  5. Structured Data Testing Tool を使ってメタデータが正しく記述されているかを確認する
  6. Search Console の AMP レポートツール を使って AMP ページがインデックスされているか確認する
    • Google のクローラー側でエラーを検出した場合はこちらでレポートされるのでよく確認する

AMP プロジェクトはオープンソース プロジェクトであり、いまも多くの方々から多くの新機能や改善点がソースコードや Issue Tracker を通じて実装・提案され、随時取り入れられています。ぜひ Google 検索で AMP のスピードを体感してみてください。皆様の AMP プロジェクトへの参加と AMP ページのご対応を楽しみにお待ちしております！

Posted by Yoshifumi Yamaguchi - Developer Relations Team