SANGOでAMPを有効化するとデザインが崩れてしまう

SANGOのamp対応について

昨年末から何度かGoogleにモバイル最適化のためにAMP対応を勧められ、WordPressのプラグインを使ってAMPを有効化しました。

結果、サイトのデザインが大きく崩れてしまい無効化することに…。Page Speed Insightsでページの読み込み速度を確認してみましたが、私の場合はAMP化によるスコアの変動もありませんでした。

WordPressテーマ「SANGO」とAMPは現時点では相性が悪く、AMP対応は止めておいた方がいいです。(2021年1月時点)

SANGO公式のカスタマイズガイドをみても、AMP化には対応していないようです。

参考記事

WordPressテーマ SANGOについてのよくある質問

この記事には広告を含む場合があります。

記事内で紹介する商品やサービスの購入・申し込みによって、当サイトに売り上げの一部が還元されます。

AMPはプラグインで対応可

AMP化自体はプラグインの導入ですぐに完了します。

AMPをプラグインで有効化する方法
  1. WordPressメニューから「プラグイン」→「新規追加」を選択
  2. 検索窓から「AMP」で検索
  3. 「今すぐインストール」を選択
  4. 「有効化」を選択

デザインが大きく崩れる

AMP有効化から5日〜1週間も経つと、検索結果にアンプのマークが反映されるようになります。

安心したのも束の間、検索結果からクリックしてみるとデザインが大きく崩れてしまっていました。

SANGO AMP対応画面 タイトル
AMP対応
SANGO AMP非対応画面 タイトル
AMP非対応
  • タイトルロゴがAMPのデフォルト仕様に
  • 画面右上の検索アイコンが消える
  • Webフォントが反映されていない
  • シェアアイコン類が全て削除される
  • SANGOの吹き出しデザインが崩れる
AMP対応
AMP非対応
  • 目次デザインが簡略化される
  • ショートコードを使った見出しデザインも全く反映されず
  • 上へ戻るボタンが削除される

SANGOの強みであるデザインが、AMP化によって軒並み矯正されてしまいました。

Google広告&Analyticsが表示されなくなる

もう一つ困ったことに、AMP導入後サイトに掲載していたGoogle Adsense広告が全て反映されなくなりました

また広告と同様に、Google Analyticsの方も設定を変更しないとPVにカウントされません。

こちらはアドセンスのコードをAMPに対応した新しいコードに張り替えるなど、対応が必要なようです。

参考記事

AMPプラグイン導入の際の、グーグルアドセンスとアナリティクスの設置方法

AMP停止前にリダイレクト設定をしておく

もしもAMP導入後に停止する場合は、必ずリダイレクト設定をしておきましょう。

  1. 404エラーに対するリダイレクト設定をする
  2. AMPを停止する

この手順を踏むことで、エラーページが表示されて途方に暮れてしまうユーザー数を最小限に抑えることができます。


Search ConsoleのAMP画面から、どの程度のページがAMP化されているかを見ることができます。

Search Console AMP有効化画面
AMP停止後、約1週間でインデックスからAMPページが削除されました

AMPのプラグインを停止すると、約1週間ほどで元のページに戻ります。しかし停止〜復旧までの間にAMP化されたページを検索結果からクリックすると、404エラーが表示されてしまいます。

AMP停止後 404
404:エラー画面

検索結果にはそのまま残り続けるため、このままだとクリックしたユーザーを混乱させてしまいます。

.htaccess設定をする

私の場合はサーバーの「.htaccess」設定を編集し、AMP化されたページにアクセスしたユーザーを本来のページへリダイレクトさせることで方法を取りました。

エックスサーバーの場合はサーバーパネルから「.htaccess」の編集ができます。

  1. エックスサーバーのログイン→サーバーパネルにログインする
  2. 「ホームページ」→「.htaccess設定」→ドメイン名を選択する
  3. 以下のコードを「.htaccess」へ記入
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)/amp/?$ $1 [R=301,L]

</IfModule>

の前に記述すると機能します。

各サーバーの設定から「.htaccess」の編集ができるかどうかを確認してみてください。

設定後ページを確認してみると、一瞬だけ404エラーページが表示された後、自動で元のページに遷移するようになりました

「.htaccess」設定後にAMPのプラグインを無効化することで、404ページが表示されて途方に暮れてしまうユーザーをなくすことができます。

参考記事

AMP停止・削除・復旧の具体的手順を解説。AMP対応したブログを元に戻す方法

おわりに

SANGOユーザーには、まだAMP対応することをおすすめしません。

AMP対応するとサイトのデザインが大きく崩れてしまう可能性があることを覚えておきましょう。

今後SANGOでのAMP対応に進捗があった場合は追記します。