【AMP解除】Twitter+WordPress+AMPはヤメとけって!!デザイン崩壊すんぞ

 Googleの検索結果から爆速表示されるGoogle AMP(アンプ)ですが、WordPressで対応できるブラグインがありますが、やらない方がいいと思います。

 デザインテンプレート次第ですが、AMP対応と書いてあるテンプレート以外は使用しないことをおすすめします。

 爆速を期待して導入したら、WordPress再構築になってしまった失敗談をここに披露します。

WordPressはSEO最強

 WordPressは、テーマにもよりますが標準のテーマでも内部リンクは完璧すぎるほどの対策がされています。SEOの点から見ると、WordPressは最強といってもいいほどです。

 外部リンクの対策さえすれば、比較的コンテンツの上位表示はしやすくなります。特にSEOに強いテーマを使うと効果はさらにアップします。

 WordPressの唯一の弱点とも言えるのが、表示速度。ただし、表示速度も最近は高速レンタルサーバーがありますし、特にコノハスのレンタルサーバーなら超高速とも言っていいほど表示速度が改善します。

 一般的には、表示速度を速くするには、サイトを軽量化するかレンタルサーバーを高速なところに変更することが推奨されています。これよりも表示速度を速くする方法として、Google AMPが出てくるわけです。

Google AMPは爆速表示

 Google AMPは、検索結果からの表示を爆速にするためにGoogleが推し進めるプロジェクトです。表示速度のみで考えるなら、現状で最強の解決方法となります。

 ただし、Google AMPの規格内でページを作ろうとすると、かなり制限があります。専用のタグを必要とする場合やJavaScriptが使えないなどの欠点もあります。従来のサイト作成でJQueryや広告などの表示を重くしている原因を排除した結果なので、速いのは当然ではあるのですが。

 できないことが多いことを理解して、これまでのコンテンツからAMPに移行するのも手間がかかることを理解した上でAMPを使う必要があります。WordPressでも、「簡単にAMPに移行できる」可能性があるプラグインが出ていますので、一度検索してみると参考になるかと思います。

 ただし、こうしたプラグインを入れた結果、失敗した経験からすると安易にAMP移行する必要はありません。慎重に検討したほうが良いです。

  今ご覧いただいているこのページは、Google AMP対応で作成したものですがWordPressは使っていません。残念ながら表示速度にこだわる点を追求するとWordPressは除外せざるを得ないのが実情ですが、それはまた別の話。

AMPにしたらデザイン崩壊

 実際にAMPにして、みると一部のページはものすごく表示は速くなりました。ただそれも束の間のこと、左寄せにした画像サイズ小さめのアイコンがやたら大きく表示されたり、レスポンシブでスマホの画面幅ちょうどに表示されるべき画像が、デカデカと表示されてしまいページからはみ出してしまったのは、100ページを超えてしまいました。

 AMPは、画像を表示するためのタグは、専用のamp-imgタグを使う必要があります。さらにwidthとheightで幅と高さを指定しておく必要あり。さらにレスポンシブデザインで表示しようとするとlayout="fixed"を指定しないければいけないわけで。

 また、CSSカスケードスタイルシートは、外部から読み込みができないので、ページ上部に記述することになっているので、こちらも少々やっかい。

 この点をWordPressで解決するのはかなり困難。WordPressでもAMPのプラグインを使ってAMP表示が可能になった経験談は検索で見つけることができるのですが、うまくいかないことがかなり多いことも事実。

 うまくいかなかった場合が、元に戻すのが超たいへんなわけで。個人的な経験から言うと、WordPressでもう二度とAMPに対応は考えようとは思いません。そもそもWordPressならコンテンツを充実させるだけで検索結果の上位に表示させることは可能ですので。

ツイッターからのアクセスは404エラー

 もう1点、非常に悪質なトラブルとしてAMP対応させたはずのページURLを、ツイッターで共有しようと思って引用ツイートしたら、アクセス先が404エラーで表示されなかったというもの。

 これはAMPの深刻な問題で、ツイッターで引用されるURLはGoogle側のURLであると言う点。このページのURLを例にすると、/AMP-wordpress-trouble.phpが本来のURLなのですが、ツイッターで引用表示されるのは、example.ampproject.org/~で表示作成されるGoogle側のサーバーにキャッシュされたURLとなる点

 元のページがGoogle側にキャッシュされていれば、example.ampproject.org/のURLでも表示されるのですが、作ったばかりのページであれば残念ながらGoogle側にキャッシュされるまでにはかなり日数がかかります。

 もともとGoogleのクローラが頻繁に訪れるサイトであれば、Google側のサーバーにキャッシュされる期間も短くなるはずなのですが、なかなか反映されないことも多くあります。日数は、はっきりしたことが公表されているわけではないのですが、3日から10日前後はかかることが多いように感じます。

 こうしたURLをツイートして、それをみた人が404エラーだった場合には、その後の反応が最悪です。「エラーだよ」「見れないじゃん」の返信ツイートが。そんなはずは、ページは公開しているのに…。再度自分でブラウザのURL欄をコピペする必要があったりの二度手間も発生。

 こうなると、使いづらい、トラブルが嫌だとなってしまうのはご理解いただけるかと思います。

 デザインが崩壊してしまい、さらにツイートでもURLが404エラーになってしまうということがあってからは、AMPに対して疑念しかなく、正直迷惑なモノでしかなくなってしまったわけです。

バックアップから復活するもすごく後悔

 こうなってからは、即元通りにすることにしました。WordPressのバックアップを定期的にダウンロードしていたので、それから元に戻すことに。画像データは、そのまま残っていたので、FTPで一度ダウンロードしてから、再度アップ。

 完全に元通りにするには、細かい点を手作業でやる必要がありましたが、テーマをシンプルなものにして、比較的短期で元に戻す事ができました。

 えーと、正直WordPressでAMPの導入は二度としようと思いません。もし、WordPressのテーマでAMP対応していると表示されている有料テーマがあれば検討はしますが、そもそもWordPressが今後変更が加えられるであろうAMPの規格にうまく対応し続けられるとは考えにくい気がしています。

 今回は、比較的短期で元に戻すことができましたが、ものすごく後悔しています。

 AMPで表示速度を期待したはずが、デザインはガタガタに崩れるわ、画像ははみ出すわで、この時点でもうコリゴリの感じです。ツイッターとの連携を考えないのであれば、もしかしたらいいかもしれませんが、AMP対応をする=表示速度を優先するということであり、それならばテキストエディタでAMP対応ページを打ち込んで仕上げていった方が確実で速いのがやってみた感想。

 実際に、このページはAMPに対応させるために手打ちで作成しています。おそらくこちらの方が確実でトラブルも少ないはず。今後も、表示速度を考えたページを作るなら手打ちで、WordPressはこれまでどおり通常の運用でいろいろと試してみたいと考えています。

 【AMP解除】Twitter+WordPress+AMPはヤメとけって!!デザイン崩壊すんぞ、のページは以上です。AMP導入してけっこう後悔する方が多いようです。慎重な検討をおすすめします。

■更新履歴
2019/8/26 記事を公開しました。

↑ページの上へ戻る