AMPで爆速Webライフ

2016-05-23 12:28

Accelerated Mobile Pages

こんにちは、日暮です。
今回は最近巷で話題のAMPについて調べてみましたのでメモレベルに残しておきます。

AMPとは

AMPとは、Accelerated Mobile Pages(アクセラレイティッド モバイル ページ)の略で、モバイル環境でウェブページの表示を高速化するためのプロジェクトです。GoogleやTwitterが推進するプロジェクトになります。

2016年2月から本格スタートし、ニュースサイトを中心に少しずつ広がってきています。また、アメブロなどでもAMP対応が進んでいて、快適な閲覧をすることが可能となっています。
現在のところ、まだニュースサイトやブログなどに用途が限定されている感じですが、今後急激な広まりを見せると思われるので、調べてみました。

AMPの魅力

AMPの魅力は何と言ってもページの表示速度です。
AMPの仕様に沿ってサイトを構築すると、Googleのスマホ検索結果に表示されたAMPページが一瞬で表示されます。
ページの閲覧に対するストレスが非常に少ないので、もう少し一般的にAMPサイトという認識が広がれば、気軽に閲覧してくれるユーザーが増えるかもしれません。

また、Googleの検索結果ページで、「トップニュース」というエリアが表示されます。AMP対応のページはここに表示されます。
例えば、朝日新聞や産経新聞は現在AMP対応をしていて、読売新聞はまだAMP対応をしていません。ここで、「新聞」とGoogleで検索してみてください。
「トップニュース」エリアに朝日新聞や産経新聞の記事は出てきますが、読売新聞は出てきません。
競合他社に対抗するためにも、これだけでAMP対応をする1つの理由になるのではないでしょうか。

AMPの仕組み

AMPはどのように高速な表示を実現しているのでしょうか?
Googleの検索結果画面のHTMLを見てみたところ、「トップニュース」エリアが表示された際に既に1つ目のAMPページはiframeで読み込まれています。
ユーザーがリンクをタップすると、ページ遷移するのではなく、検索結果画面内のiframeでAMPページを表示しています。
AMPページはCDNにキャッシュされていて、これらの仕組みで瞬時のページ表示を実現しているようです。

AMPの実装

AMPの実装は技術的には、さほど難しいことはありません
AMPの書式に沿ってHTMLを記述し、そのHTMLにschema.orgで構造化マークアップをするします。
全体としては、記事のHTMLとは別にもう1つAMP用のHTMLを作成し、metaタグで互いにリンクをはっておく感じです。(AMP用のHTMLのみ作成することも可能です。)

以下のサイトで分かりやすく実装方法が紹介されていたので、参考にしてください。

AMPとは~対応HTMLを作ってみてわかったこと~ – Webマーケティングのブレインネット

AMPの今後について

現在は「ニュース」と「ブログ記事」などに用途が限定されていそうですが、今後は他の記事などにも対応していくのではないでしょうか。

先日、ZOZOTOWNもAMP対応をしたようですが、現在ではトップニュースエリアから姿を消しています。
これは、ZOZOTOWNが初期はschema.orgのページタイプを「記事」に設定していましたが、現在schema.orgの記述がないことが原因だと思われます。
ZOZOTOWNのページでは、実際は商品の紹介・売買のページのため、正確にはschema.orgのページタイプを「商品」に設定することになります。
(GoogleのトップニュースエリアにAMPページを表示するためには「記事」、「ニュース」、「ブログ記事」のいずれかに設定する必要があります)
このことがGoogleから指摘されたのか、ZOZOTOWNが自主的に直したのかは定かではありませんが、現状はschema.org自体がなくなっています。

個人的には商品のページが素早く見ることができるというのは非常に面白い試みだと思ったのですが、まだまだECサイトにAMP導入は早いということなのでしょうか・・・
いずれにしろAMPが今後広まっていくのはそう遅くはないと思います。

まだまだAMPが広まっていない今が、AMP導入の絶好の機会なのではないでしょうか。

higurashi

著者:higurashi(Planer / Engineer)

テクニカルディレクターとしてWebサイトや展示系コンテンツの制作などに携わる。 好きなことは旅行とビール。