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

公開:2021年04月09日（最終更新:2021年05月11日）

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化を見送った方がいいですね。