前回の記事では、CocoonとTwitterなどのSNSと連携させる方法について解説しました。
今回はモバイル端末でWebページを高速に表示させることができるAMPについて、そのメリットやデメリット、そして設定する方法を分かり易く図解で説明します。
Cocoonテーマは初期設定で使用しないように設定されています。
しかし、使用する為の設定方法はとってもカンタン！
余計なプラグインも不要なので、ぜひお試しください！
・モバイル端末で高速表示できるように設定したい人
・モバイル端末からのPVを増やしたい人
・余計なプラグインを入れずにAMPを設定したい人
AMP(Accelerated Mobile Pages)とは？
AMP(Accelerated Mobile Pages)とは簡単にいうと、「モバイルページを高速に表示させるための方法」のことです。
モバイルユーザーのユーザー体験向上を目的としてGoogleとTwitterが協同開発したもので、Googleが推奨しているものになります。
対応するにはAMP HTMLの仕様に沿ったWebページ（AMPページ）を作成する必要があります。
このAMP化によってサイトの読み込み速度が向上し、SEO的に良い効果が期待できます。
Webページにアクセスするとページを読み込んでから表示しますが、画像や動画が多いと表示するまでに時間がかかる場合がありました。
そこで、AMP ページでは検索エンジンが事前にそのWebページをキャッシュとして記録しているため、毎回読み込まずに高速表示を可能としています。
AMP化させるメリット・デメリットについて
次にWebページをAMP化させた際のメリットとデメリットに解説します。
メリット
AMP化により、モバイル端末利用者に対して読み込み速度の早いページであることをアピールすることができます。
これにより、主に下記のような複数のメリットが見込むことが出来ます。
・多くの一般的なWebページよりモバイル表示が速い。
・高速表示を求めてる検索ユーザーのレスポンスが上がる。
・スピード向上により検索順位の上昇が期待できる。
・クリック率の向上が期待できる。
・PV数の増加が期待できる。
・アドセンスの利益率が高い。
メリットを見ると今すぐにでも導入した方が良いように感じられますね。
特にブログ収益を上げたい方には重要かもしれません。
デメリット
当然何事にもデメリットというものは存在します。
AMP化も例外ではありません。
例えば、読み込みのデータ量を減らすということは、サイトの表示に変更が出る可能性があります。
それらをまとめると下記のようなデメリットが存在します。
・サイトのデザインが大きく変更される可能性がある。
・離脱率が高い。
・AMP非対応の広告が表示されず、収益は発生しない。
・プラグインなどの関係で上手くAMP化できない場合がある。
・スマホ性能の向上などにより、AMP化しても表示速度にほとんど変化が感じられない。
上記2つに関しては通常ページとAMPページの表示をほぼ同じにすることで、対策は可能です。しかしながら、他にもAMP化した際にGoogleからエラー検出で怒られたりしてその修正に時間が取られたりする問題もあるうえに、AMP化してもあまり変化を感じないといった問題があるので、AMP化する際には自分のサイトについてよく考えたうえで検討したいですね。
とはいえGoogleが推奨しているのです。
今後開発が進んで、より使いやすくなったり、必須になる可能性も考えられますから今後の動向に要注意です。
CocoonテーマでAMP化してみよう！
さて、メリットとデメリットを見比べたうえで、導入してみようと思った方のためにCocoonテーマでのAMP設定方法をお伝えします。
この記事を見ながら一緒にやってみてくださいね。
とはいえオンオフ設定する箇所は1か所だけなのでとってもカンタンです。
やっぱりAMPを非設定にしようと思った際にもすぐに変更できます。
AMPを設定する
まずはAMPを設定します。
まずは、WordPressの編集画面から「Cocoon設定」→「AMP」と進んでみましょう。
すると、「AMPの有効化」という項目があります。
ここにチェックするだけでAMPが設定できます。
逆に非設定にしたい場合はチェックを外しましょう。
変更したら最後に変更を保存することを忘れないでくださいね。
これでAMP化の設定は終了です。
簡単でしたよね。
他の項目についてはデフォルトのままでも問題ありませんが、初めて設定した場合はロゴが初期画像のままになっているので、変更したい方も多いかと思います。
そこで次の項目ではロゴの変更について設定をしていきます。
ロゴの変更
さて、初めてAMPを設定した場合、AMPのロゴは初期設定のままになっているかと思います。
↓画像はWordPress上のCocoonテーマから見た際の初期ロゴです。
AMP用のロゴ画像はGoogle検索結果に表示されます。
せっかくですからこれもオリジナルの画像に変更しちゃいましょう。
ロゴのサイズは幅600px、高さ60px以下にします。
更に高さと幅のどちらかはぴったり合わせる必要があります。
たとえば450×45pxは、600×60pxの長方形に収まりますが許容されません。
*Google AMP ロゴ ガイドラインより
変更したら保存するのは忘れないでくださいね。
また、画像保存後はキャッシュのクリアもしておきましょう。
「Cocoon 設定」 →「キャッシュ削除」→「AMPキャッシュの削除」
「AMPキャッシュの削除」を選択後に、本当に削除して良いか聞かれますのでOKを押したら完了です。
エラー確認方法
導入しているプラグインなどによっては、AMP設定を行うとエラーが出る可能性があります。
まずは、自分のサイトにエラーがないかを確認しましょう。
Google Search ConsoleのAMPテストに自分のサイトリンクを入れて「テストを実行」を押します。
1~2分ほどで結果が判明します。
問題がなければ下画像のように表示されます。
問題があればエラーの内容やURL、修正方法について表示されますので、それに沿って対応していきましょう。
エラー対応方法
ここでは、よく表示されるエラーについて対応方法を記載しておきます。
「許可されていない属性または属性値がHTMLタグにあります」
これはWordpressのプラグイン「Contact Form 7」がAMP対応になっていないことが原因で表示されることがあります。
「Contact Form 7」を使って「お問い合わせ」の固定ページを作成しているのではないでしょうか。
解決方法として、別のプラグインを使うか、その固定ページをAMP非対応にする方法が挙げられます。
手っ取り早いのはAMP非対応に変えてしまうことです。
固定ページからContact form7を使っているページへ移動し、「AMPページを生成しない」にチェックを入れて保存しましょう。
これで問題は解決するはずです。
他にもエラーが見つかりましたら対応方法を記載していきます。
まとめ
今回はWebサイトのAMP化についてのメリット・デメリット、そしてCocoonテーマ上でAMP対応をするための方法について説明しました。
また、よく表示されるであろうエラーとその解決策を記載しています。
他にも数多くのエラーがあると思いますが、出たらその都度修正していきたいですね。
AMP化はあまり変化が感じられないという意見もありますが、収益を上げたいという方は挑戦した方がメリットの恩恵を受けられるようにも思います。
Cocoonテーマでは気軽に変更できるので、モバイルユーザーの方にもサイトを訪問してもらえるようにまずは設定してみても良いかもしれません。
りんね☆のひとこと
現状は問題なく動作しているのでON設定にしてはいますが、あまりに不具合が多いようならAMP対応を取りやめるかもしれません。
CocoonテーマはAMP対応のON/OFFは簡単に変更できるので、気軽に試せるのは素晴らしいですよね。
まだ試した事がない皆さんも是非一度は試してみては如何でしょうか。
コメント