WordPress

【Cocoon】AMP対応した結果とやめた理由【メリット&デメリットも】

こんにちは、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 の切り替えだけで簡単にできるのもメリットです。

Keisuke
Keisuke
メリットだけみると、すぐにでも AMP 対応したくなる内容ですよね。

また、気になる検索順位への影響については 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 をとても簡単にできるので、一度試してみることをオススメします。

当サイトもデータ量を減らして再挑戦してみようと思っています。

少しでも参考になりましたら幸いです。

最後まで読んでいただきありがとうございました。

ABOUT ME
Keisuke
Keisuke
スペイン滞在3年目。一般企業を退職→バレンシアへ留学→マドリードで就職。WordPressとWebデザインを勉強&仕事受注中。学んだことを当ブログで発信しています。たまにスペインのことも。 訪問国は欧州20ヶ国50都市。