サイトの検索結果に雷マークが表示される!？⚡大丈夫！それAMPサイトです。

どうも。あねまるです。

今回は

AMPについて

お話致します。

検索結果に表示されている雷マークが気になる件

さて、私の弟、とのまるのサイトをモバイル端末から検索すると・・・

ご覧の通り、謎の雷マーク⚡が付けられています。

タップしても特に何の変化もないですが、サイトの横に表示されていると、前回ご紹介した、サイトの安全性評価と似ていて、ちょっと心配になりますよね。

ですがこれは、AMPに対応しているページだという証拠のマークです。

そもそもAMPとは・・・

AMP(Accelerated Mobile pages）の略で、アンプと言います。

モバイル端末からウェブサイトを閲覧する際、AMP対応のサイトでは、高速＆少ないデータ量でページの読み込みが可能となります。

GoogleとTwitterが立ち上げたプロジェクトで、日本では2016年頃から導入されているそうです。

AMPのウェブページは、これまでのウェブページと比べ、読み込み速度4倍、使用するデータ量は 1/10 にまで抑えられたというデータも出でおり、ほとんどのページが瞬時に表示されるとGoogleが発表しています。

https://japan.googleblog.com/2016/02/blog-post_25.html

AMPに対応したページは、キャッシュとして GoogleやTwitterに 保存される為、ユーザーがクリックしてからサイトが読み込まれるのではなく、既に保存されたページが瞬時に表示されます。

この為、高速＆低データ量が可能となるのですね！

ユーザーが待ってくれる時間は3秒以内！

ユーザーがサイトをクリックしてからそのページが読み込まれるまでにかかる時間が3秒を超えると一気にサイトの離脱率が上がり、5秒を超えると38％にもなるという事が、2016年に Pingdom で伝えられました。

またこの時、読み込みにかかる時間が2秒以内である場合、訪問者の70％がサイトエクスペリエンスに満足するという事も書かれています。

更に2年後の2018年にThink with Googleに発表されたデータでは、ページの表示に3秒以上かかると、53％のユーザーが離脱してしまうということも発表されました。

それほど、ページの読み込み速度は、ユーザーの直帰率と満足度に影響しているということです。

このような事から、GoogleもAMPを推奨しているのですね！

AMP対応させるには

そんな素晴らしいAMPですが、htmlで対応化させなくても、ワードプレスではAMPのプラグインをインストールし有効化することで簡単にAMP対応することが可能です。

また、テーマによっては、プラグインをインストールしなくても、AMP化できるものもあります。

とのまるのサイトで使用している、ワードプレスの無料テーマcocoonでは

cocoon設定→AMP→AMP効果を有効にするにチェック！

たったこれだけでAMP対応ページになっちゃいます。

AMPの注意点

ただ、 この時AMP対応をしていないプラグインを有効化していると、Google Search Consoleなどでエラーが表示されることもあります。

私は、smashという画像圧縮のプラグインを入れているのですが、これを有効化した状態でAMPでサイトを表示すると、全ての画像が二重に表示されていてビックリしました。

また、cssが多様されているサイトや、かなりデザインに凝っているサイトでも、うまくAMPが対応しないことがあるようです。

まとめ

今回は、AMPについてザっとではありますが、お話させていただきました。

以前は、メディアやニュースサイト、通販サイトなど、スピード感が重要となるサイトでの使用が有効だと言われていたようです。

ただ、現在では個人ブログなどでもパソコンからのユーザーよりも、モバイル端末からの閲覧の多いサイトでは、AMPに対応させることで、ユーザーにとってもストレスのかからないサイトにすることができ、 結果、表示速度が上がることで、離脱率を下げることへと繋がります。

Googleの理念でも”ユーザーの貴重な時間を無駄にせず、必要とする情報をウェブ検索で瞬時に提供したい ”と挙げられており、今はまだ知らず知らずに利用している雷マーク⚡の正体をユーザーが認識し、利用するようになれば、ユーザビリティの観点からも、今後ますますAMP対応が重要視されるように思います。

プラグインの関係でまだAMP対応していませんが、今後 この、あねまる日記でも対応化していきたいと思っています。