こんにちは、Keisuke です。
今回の記事はこんな方向け
- AMP ってなに？
- AMP 対応をしてみたいけど、実際どうなのか知りたい
- AMP 対応のメリットとデメリットを知りたい
本記事では AMP の概要からメリット・デメリット、実際に AMP 対応した結果まで詳しくご紹介します。
AMP について知りたい方は、ぜひ最後まで読んでいただければと思います。
AMP（Accelerated Mobile Pages）とは？
AMP（Accelerated Mobile Pages）とは、モバイル端末でウェブページを高速表示させる仕組みのこと。
Google と Twitter が共同開発した仕組みで、データ量が通常のページの10分の1、表示速度は4倍にもなります。
検索エンジン上でカミナリマークがついているページを見たことはないでしょうか？
AMP対応しているページにはカミナリマークがついています通常、ウェブページにアクセスしてページを表示させるには、ページの読み込みが必要になります。
画像や動画が多いページによっては、表示までにかなり時間がかかるケースもありますよね。
しかし、AMP ページの場合は事前に検索エンジンがそのページをキャッシュとして記録しているため、いちいち読み込む必要がなく高速表示が可能となります。
CocoonでAMP対応するメリットとデメリット
では AMP 対応させると、どのようなメリットやデメリットがあるのでしょうか。
メリット
まずはメリットから見てみましょう。
- 他の一般的なモバイルページより表示速度が速い
- ページを高速表示することにより離脱率を下げられる
- PV 数のアップと Google アドセンスの収益率アップを期待できる
さらに、Cocoon ではこの AMP 対応の設定が ON / OFF の切り替えだけで簡単にできるのもメリットです。
また、気になる検索順位への影響については Google が以下のように言及しています。
AMP であるかどうかが直接 Google 検索のランキングに影響することはありませんが、スピードはランキングに影響します。
出典元：Google 検索デベロッパー ガイド
AMP に対応するだけでは検索順位が上がることは無いようです。
ですが、表示速度が上がることは SEO においてプラス要素のひとつなので、結果として検索順位アップにつながると言えますね。
デメリット
一番のデメリットは、「デザインが大きく変わってしまう可能性がある」ということ。
AMP に対応する場合、Google が定める厳しいガイドラインに従わなければならず、データ量を極限まで抑えたシンプルなサイトにする必要があります。
そのためサイトをカスタマイズしてデータ量が大きくなっていると、制限がかかりデザインが崩れてしまうことがあります。
CocoonでAMP対応した結果とやめた理由
当サイトでも一時 AMP 対応していましたが、前述したデメリットの方が大きいと感じ1ヶ月でやめてしまいました。
結果としては以下のような感じでした。
- ページの表示速度は上がったが、離脱率にほぼ変化はなし
- PV 数と Google アドセンスの収益率もほぼ変化はなし
- サイトのデータ量が多く、スキンやカスタマイズしたデザインが反映されなくなった
1ヶ月という短い期間でしたのでもう少し続けていれば、もっと変化があったのかもしれませんが…
それよりもサイトのデザインが Cocoon の初期設定に戻ってしまったので、我慢できずに AMP 対応をやめました。
Cocoon で AMP 対応する際は、スキンを使用なおかつ何らかのカスタマイズをしている場合、データ量の上限を超えデザインが反映されなくなる可能性があります。
CocoonでAMP対応する方法と注意点
Cocoon で AMP 対応させる方法はとても簡単です。
AMPの有効化
Cocoon 設定 → AMP → AMPの有効化 にチェック。
これで AMP が有効化されます。
次に AMP 用のロゴ設定です。
AMP用のロゴ設定
AMP 用のロゴについては Google が以下のように定めています。
ロゴは 60×600 ピクセルの長方形に収まるようにし、高さを 60 ピクセルちょうどにするか（推奨）、または幅を 600 ピクセルちょうどにする必要があります。たとえば、450×45 ピクセルは、600×60 ピクセルの長方形に収まりますが、許容されません。
引用元：Google AMP ロゴ ガイドライン
高さ60 × 幅600 に収め、かつ、高さと幅どちらかをぴったり合わせる必要があります。
画像の設定方法は以下の通り。
AMPロゴ で画像を選択 → 保存
オリジナルの画像を設定しない場合は赤矢印の横にある「WordPress Blog」が表示されます画像を保存したら、 Cocoon 設定 → キャッシュ削除 → AMPキャッシュの削除 。
これで AMP 対応の設定は完了です。
CocoonでAMP対応をやめる方法
AMP 対応をやめる方法は、 AMPの有効化 を OFF にするだけ。
しばらくは AMP キャッシュが検索エンジン上に残って AMP ページが表示されますが、クロールに来てもらい自然に消えるのを待てば OK です。
どうしてもすぐに AMP ページを消したい場合は、「301リダイレクトの設定」をする方法もありますが、必要性を感じないため省略します。
CocoonでAMP対応した結果とやめた理由：まとめ
以上、Cocoon での AMP 対応についてでした。
記事のまとめ
- AMP とは、モバイル端末でウェブページを高速表示させる仕組みのこと
- AMP のメリット：他の一般的なモバイルページより表示速度が速い
- AMP のメリット：ページを高速表示することにより離脱率を下げられる
- AMP のメリット：PV 数のアップと Google アドセンスの収益率アップを期待できる
- AMP のデメリット：デザインが大きく変わってしまう可能性がある
Cocoon では AMP 対応の ON / OFF をとても簡単にできるので、一度試してみることをオススメします。
当サイトもデータ量を減らして再挑戦してみようと思っています。
少しでも参考になりましたら幸いです。
最後まで読んでいただきありがとうございました。
