AMPとは？キャッシュを使ったモバイル高速化技術

2018年、SEOを考えていく上で重要になってくるのはモバイル戦略です。テクニカルな方法は2通り。一つはモバイルフレンドリーなサイト作り。つまりレスポンシブサイトデザインです。もう一つがモバイルでの表示速度の高速化であるAMP（Accelerated Mobile Pages）です。
今回はAMPとは、AMPの利点、AMPを実際にWordPressに実装するというところまで説明します。

AMP（Accelerated Mobile Pages）とは何？

AMPとはGoogleとTwitterが共同で開発しているフレームワークです。
AMPプロジェクト（日本語）があり、キーワードは未来のウェブを、一緒に構築しようです。
カンファレンスが2018年2月に開催されており、その様子もYoutubeにAMP Conf2018としてアップされています。

AMPの目的

Accelerated Mobile Pagesという名前の通り、スマートフォンからのモバイルからのアクセスを高速化するという目的があります。

AMPを使うとなぜ高速化するのか

GoogleあるいはTwitterが、ページをキャッシュするからです。通常ホームページを見たとき、HTMLやCSSやJSを読み込んでサーバーと通信しながらレンダリングしていきますが、GoogleやTwitterがキャッシュしていることで読み込む時間を大幅に削減できます。
キャッシュとは、一般的にWEBブラウザ（IE、Edge、Chrome、Safariなど）が1度みたページの画像やCSS、JavaScriptなどデータのやり取りが多いものを覚えていてくれて、表示を早くしてくれる仕組みです。その代わりをGoogleやTwitterがしてくれると考えればいいと思います。

AMPを利用するためにはどうしたらいいか

AMP独自の要素が3つあります。「AMP HTML」、「AMP JS」、「AMP Cache」です。
この3つについて説明していきます。

AMPページを作るために必要な3つの要素

AMP HTML ⚡

基本的にはHTML5となりますが、一部にAMP固有のタグが必要になります。
下のコードでもhtmlのタグの横に⚡がついているのが分かるかと思います。これはampと置き換えるのも可能です。

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

⚡のマークですが、携帯で検索した結果にもこのマークが出てきます。
例えば今国会で話題の「森友問題」と調べて見ると、ニュースサイトのURLの横に⚡がついているのが分かります。
ニュースサイトなどは既に実装されているところが多い印象です。

また、img のタグが使えなくなります。代わりに<amp-img>というタグを使わなければなりません。
調べていて、今まで作ったサイトをAMPに対応させようと思うと少し厄介だなと感じました。また<img> だけではなく、<video> や <audio> も新しいタグが用意されてます。

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

それでなのか分かりませんが、ページをAMP対応とそうでないページを用意し、検出可能にする「 link 」タグも用意されてます。

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html"> ※AMP非対応のページに埋め込む
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">　※AMP対応のページに埋め込む

AMP非対応と対応をつなぐタグです。

AMP JS JavaScriptのライブラリ

AMPでは原則JQueryが使えません。なので、AMP用のライブラリが用意されています。これについては開発が進んでいるようで、githubにライブラリが公開されています。
また、AMP JSを使用するサンプルが公開されています。lightboxやsidebarなどを使用する場合のサンプルなどもおいてあります。
amp html サンプル

上を見ると独自に複雑なことをしているのではない限り、ある程度のことは実装可能な気がします。

AMP Cache　（キャッシュの利用）

AMP HTMLで書かれたページはGoogle AMP Cacheでフェッチしてキャッシュされるようです。
フェッチしてキャッシュしてくれるとは、ざっくり言うと「ページをクロールしてくれて保存してくれる」と考えればいいかと思います。

AMPのまとめ

どうでしょう。わかりますでしょうか。HTMLのサンプルを見ると「あーーー」と思えるのですが、何となくめんどくさい！と思ってしまいます。
WordPress　AMP　で検索すればプラグインが出てくるのでそれを使うのもいいでしょう。
基本的にモバイルの表示速度と相性がいいサイトは
ニュース
レシピ
ECサイト
かなと思います。特にECサイトではAMPを使っているのといないサイトとでは、コンバージョンが2倍違うという結果が得られたようです。
これからECを始めようとする方はAMPを実装したサイトを作っては如何でしょうか。

カテゴリー : SEO