[レベル: 上級]
東京都港区のコクヨホールで4月26日に開催された『 Google Developers Summit Tokyo 2016』に参加してきました。
開発者向けのイベントですが、テーマは「Progressive Web Apps(プログレッシブ ウェブ アプリ、以下PWA)」で、ウェブに関連してくる注目の技術です。
Googleがプッシュしていることもあり、Googleのエキスパートたちの講演を聴きに行くことにしました。
この記事では、山口能迪(やまぐち よしふみ)氏によるAMPをトピックにしたセッションのなかから、特に、僕の興味を引いた2つをレポートします。
AMPキャッシュさせるには構造化データが必須
AMPコンテンツとしてGoogle検索に表示されるには、有効なAMP HTMLでページをマークアップすることが大前提です。
そして、有効な構造化データも必要になります。
もっとも、これは新しい情報ではありません。
このブログで触れたことがあります。
- AMPコンテンツとしてGoogleモバイル検索に表示させるには、有効なAMPページと構造化データが必須
- Googleモバイル検索のAMPカルーセルに掲載させるために必要な構造化データ/schema.org
気を付けたいのは、AMP用の構造化データが正しく設定されていないとGoogleのAMP CDNにキャッシュされない点です。
Googleが公開しているAMP CDNにキャッシュされなければ、当然Googleのモバイル検索には表示されていません。
しかしGoogle以外のプラットフォームでも、AMPコンテンツとして利用してもらえないことがありえます。
たとえば、TwitterとはてなブックマークはアプリでAMPコンテンツを表示するようになっています。
しかしバックグラウンドでは、TwitterもはてブもGoogleのAMP CDNからAMPキャッシュを取得しています。
GoogleのAMP CDNにキャッシュされるには有効なAMP HTMLと構造化データが要求されると先ほど説明しました。
したがって、この2つの要件を満たしていなければGoogleのAMP CDNにキャッシュされないので、Twitterでもはてブでも利用されないということになります。
TwitterのAMPは日本ではまだ提供されていないのでほとんど関係しないとしても、はてブでもAMPページを表示させたいのであればやはり構造化データは必須です。
となると、GoogleだけでけではなくTwitterでもはてなブックマークでもAMPコンテンツとして利用されるのは、今のところは、ニュースやブログの記事だけに限られますね。
Google以外のプラットフォームでも、Googleが定めたAMP仕様に従わないといけないケースが増えてきそうです。
AMP + PWAでさらに爆速に
AMPとほかのテクノロジーを組み合わせることで、さらに高速化を目指す取り組みも山口氏は紹介しました。
今回のイベントの主テーマであるPWAとの連携です。
AMPページでService Workerを登録させることが可能です。
amp-install-serviceworker
カスタムタグを使います。
どんな点で効果を発揮するかというと、”アプリ シェル”のプリフェッチやキャッシュが可能になることです。
“アプリ シェル”はどのコンテンツにも共通しているページの枠(普通のウェブページでいうなら、ヘッダーやフッター、サイドバーなどの共通テンプレート部分と考えてください)です。
Service Workerが稼働していると、あなたのAMPサイトにユーザーが再度アクセスしたときに、AMP HTMLを取得するよりも前にアプリ シェルをService Workerの機能によって返すことが可能になります。
ただでさえ高速な表示のAMPが、Service Workerの力を借りてさらに高速になります。
ただし、AMPでのService Workerはまだ実験中とのことです。
正式に実装可能になるかどうかはわかりませんが、PWAとAMPの両方を導入しているのであれば期待できる拡張になりそうです。
amp-install-serviceworker
タグの詳細はAMPプロジェクトの公式サイトで確認できます。
おまけ: AMP対応パブリッシャーとして紹介
ここはおまけです。
山口さんのセッションで、AMP対応しているパブリッシャー紹介のスライドの中にこの海外SEO情報ブログが含まれていました。
僕以外はだれも気にもとめなかったと思いますが、名だたる大手のメディアの中に混ぜていただいて光栄なことでございます。
山口さん、ありがとうございました。:)