AMP化しようとしてデザインが壊れてしまう場合の対処方法

googleで推奨しているモバイルファーストの設定に「AMP(Accelerated Mobile Pages)」というものがあります。簡単に言うとモバイルでの表示を早くできるというモノです。ワードプレスを使っているなら、プラグイン「AMP」をダウンロードして、有効化するだけでAMPが行えます。

最近ではパソコンからよりもスマホなどのモバイルでのアクセスが増えてきているので、サイトの表示が遅くて気になる人は、暇な時にでもAMP化を進めていきたいですね。Google推奨ですので、SEO対策的にやっておいて損はありません。

ページが高速で表示されると聞くと素晴らしいと思うはずですが、そこには今までのホームページ表示とは少し違った技術が使われています。ですので、多少手を加えないとそのままでは表示できません。

早く表示されるにはそれなりの準備がいるということですね。まだ新しい技術なので、トラブルは色々出てくると思いますが、その中でも一番やっかいな「デザイン」が反映されないという問題を今回は考えていきたいと思います。

WordPressにデザインが反映されないとき

特定のタグや必須タグ、そしてJavaScriptやjQueryが使えないなど、最初はちょっと戸惑うはずです。しかし、通常のHTML＋CSSで作っているのであれば、AMP化してもデザインが大きく崩れることはあまり多くはありません。

それでもデザインが全く反映されないときは、プラグインを疑ってみてください。AMP以外の全てのプラグインをオフにして、デザインが反映されるか見てみましょう。これでデザインが表示されれば、プラグインとの相性という事になります。

怪しいプラグイン

こちらで作業していて、プラグインを導入するとAMPのデザインが反映されなくなるものがいくつかありましたので紹介します。

「WP External Link + Google Site Kit」
こちらを同時に有効化していると、なぜかAMPのデザインが反映されなくなります。対象方法はコードを書き換えるしかなく、プラグインがアップデートされるたびにコードを書き換えなければならないので面倒です。両方のプラグインを同時に使いたいという人はAMP化を見送った方がいいですね。

まとめ

AMP化はサイトのデザインによってかかる時間は大きく変わってきます。プラグインが多いとチェックするのも大変です。それでもAMP化することで、サイトの表示が速くなり、訪問者に無駄な通信をさせずに済むというのは大きいですよね。

AMP化によるトラブルは色々あるので、また新しい問題が出てきたら、このページも更新していきます。もしも、デザインがうまく反映されないときはプラグインを疑ってみてくださいね。AMPのプラグインだけならすべてのプラグインをオフにすれば問題なく表示されるはずです！

それでもどうしても解決できないようであれば、ぜひ弊社の無料メール相談をご活用ください！