フロントエンドの地獄

みせてやりますよ。本当の地獄ってやつをね。

トップ > wordpress > Googleが推奨するAMPって導入すべき？メリット・デメリットをまとめてみました

Googleが推奨するAMPって導入すべき？メリット・デメリットをまとめてみました

wordpress

たまにAMPを入れるべきかどうかで相談受けるので、まとめてみました。AMP導入するかどうかの参考になれば幸いです。

対象読者

主にWordpressサイトでAMPを導入しようか迷っている人

AMPとは

AMP(Accelerated Mobile Pages)とはスマホサイトの高速表示を目的とした仕様のことです。

Googleが推奨しており、普通のHTMLとはちょっと違うAMPの仕様対応したHTML及びCSSなどを記述することでサイトの高速表示を実現します。

Google検索でのAMPの仕様について

AMPで出来たサイト自体が既に表示が早いのですが、更にAMPで最適化されたサイトをGoogleが検知すると、そのページをGoogleが自動でキャッシュし、検索結果からそのページを表示する際にそのキャッシュされたページを表示してくれるため高速で表示されるようになります。

サイト内リンクで遷移すると元のページに移ります。

もちろんGoogleの検索からの流入以外で、サイトをすべてAMP対応にしておくことも可能です。

メリット

スマホでの高速表示

これが一番ですね。検索結果からタップ後一瞬でサイトが表示されます。googleがキャッシュしてくれるため、サーバーの負荷も多少下がります。

検索結果一覧にAMPが導入されている記載が入る

AMPを認知しているユーザーにはクリック率が上がる？（基本web関係者だけですが笑）

AMPサイトの記載も結構仕様がコロコロ変わっているようで、今は雷マークですが英語検索だと"instant"みたいな文字になってたり？

f:id:tatsuaki_w:20180710104242p:plain

ままはっくでも現状はこんな感じでURLの横に「雷」マークが入ります。

順位への影響が出る場合がある

AMPを導入しているからといって検索順位があがるということは今のところなさそうですが、単純に元々表示が遅いサイトはGoogleからペナルティを受けるため、そういうサイトは順位がよくなることに繋がります。

導入コスト・デメリット

サイトでJavascript等は使えません

スクロールでページトップに戻るボタンなどが利用出来ません。

メニューなどの開閉するような動きのある機能はOFFになります。

Google Analyticsの集計などはAMP用のものを用意すれば動作します。instagramなどの挿入も同じように専用のものを導入しておけば大丈夫です。

※例として、記事内でslick.jsなどのコンテンツスライダーを表示していたり、目次の開閉などが使えなくなります。

画像タグなど基本的にすべてAMP対応したものに変更が必要

WordpressだとAMPプラグインが概ね一括で変換はしてくれますが、テーマの機能で追加している部分などは自力で変更が必要です。意外としんどい。

レイアウトの制限

CSSも使えるものが制限されるため、結構工夫しないと基本的にデザインは普通のサイトよりも少し平坦なものになります。

GAが見づらくなります

Googleのキャッシュサーバー上でサイトが展開されるため、URLが本サイトと別になります。

ページのURLなども全部個別でふられてしまうので、例えば「記事毎にコンバージョン率を計測したい」となったら、それぞれ別々に集計して統合する必要があります。

同じく、javascriptが使えないためGAでのPVなどと別でクリックイベントなどを設定していた場合の計測もできなくなります。

仕様がたまに変わるのに対応が必要

仕様が変わってエラーが出ると普通のページの表示になってしまいます。

サーチコンソールにエラーが通知されるので、それを見ておけば対応可能です。

同じく導入時にサーチコンソールでエラーが無いかチェックできます。

URLが変わるけどアフィリエイトの計測が対応していなかったりしない？

今の所それで計測が出来ていないというのは聞いたことがないので少なくとも大手は大丈夫そうです。

導入はどうすればいい？

まずはAMPプラグインをいれてみます。

一番楽なのは対応しているテーマに入れ替えちゃう事ですね。

記事のURLに ?amp をつけるとAMPページが表示されるので、エラーが無いかAMPチェック用ChromeExtentionでチェックして一つ一つ直していきます。

エラーが解消できたらサーチコンソールでAMPのクロール申請をします。（新UIのとこにあります）

AMPを入れるか悩む前に

そもそもサイトの速度が既に早かったら無理して入れないでいいです。また、PCでの速度には影響出ないのでまずはサイトそのものの速度向上を目指しましょう。

関連記事を出しているプラグインとか、そのままだと動かなかったりしますし。

一旦AMPプラグイン入れてみてAMPページがどうなってるか見てみてもいいです。エラーがあったらどうせ使われないので笑

AMP導入診断

AMP入れないでいいかも

  • 既に俺のサイトは早い！人(Page speed insightが80点とかなってる)
  • Javascriptで結構重要な役割を担っているサイト（サンプルもりもり技術ブログ）
  • HTML・CSS・PHPの知識が薄い人（エラー出ても直せないと意味ないので）
  • PCでのアクセスがメインの人

AMP入れてもいいかも

  • AMP対応テーマを利用していて、変にカスタマイズしていないので、導入コストが低い人
  • 俺はさらなる速さを求める！って貪欲な人
  • HTML・CSS・PHPチョットデキル人

こんな感じでしょうか。なにか間違っている情報あったら教えてくださいすぐ直します！