【WordPress】AMP化する際に行った事の備忘録

昨今のモバイルファーストSEOを鑑み、WebサイトのAMP化を進める為に行った事の備忘録です。

AMP(Accelerated Mobile Pages)について簡単に説明すると、モバイル（iphone等）でのWebページ表示速度を高速化させる手法だと思って頂ければ良いと思います。

もっと詳しく知りたい方は、AMPの本家で詳しく書かれているので、一読する事をオススメします。

なぜAMP化をするのか

AMP化

WebサイトをAMP化したいと思った方は、SEOに効果的と聞いて始める方が多いと思います。

なぜSEOに効果的なのかを軽く説明いたしますと、AMP化されたページの読み込み速度は非常に速いので、Googleが掲げているモバイルファーストインデックスにのっとった施策だからです。

検索結果はPCの要因ではなく、モバイルでの要因が優先されるので、モバイルの表示速度が早ければユーザーの満足度が上がるので、結果として検索結果上位に上がるという事だと思っていただいて問題ないと思います。

もちろん様々な要因によって検索順位は上下するので、AMP化したからといって確実に検索結果上位に表示されるわけではありませんが、Googleが公式にサイト表示速度が遅いサイトは検索順位を下げるといっているので、AMP化しておいた方が安心できます。

WordPressをAMP化する際に使うプラグイン

上記で説明している通り、Googleが推奨している施策のAMPですが、Googleが開発に協力しているプラグイン『AMP』があるので是非活用しましょう。

AMP化プラグイン『AMP』

『AMP』以外にもAMP化プラグインはあるのですが、Googleが開発協力している『AMP』以外を使うメリットがあまり考えられないので、『AMP』を使うのが一番だと思われます。

簡単にWordpressでAMP化する方法

『AMP』をインストールし『有効化』して、AMPプラグインの設定画面に行くと、『Website Mode』というものが3つ用意されているのが分かるかと思います。

AMPプラグインのWebsite Mode

簡単に3つの差異を説明します。

大きく違うのは、『自動的にAMP化するかしないか』と『AMPページだけになるか、従来のページ+AMPページになるか』の2つの違いです。

簡単にAMPを実装したいと考えている方は『Standard』か『Transitional』を選択して保存してしまえば、他に何も作業しなくてもAMP化は終わりです。

WordPressの記事を自動AMP化するときの問題点

簡単にWordpressでAMP化する方法は前述した通りですが、問題が何点かあります。

AMPページの表示崩れが起きる

自動AMP化による表示崩れ

上記画像は自動AMP化をした時に、画像のサイズを自動的にリサイズする事によって起こっているようです。

他にもJSで表面上のデザイン（アコーディオンメニューやハンバーガーメニュー等）をしていたりすると、AMP化によってJSが動かなくなるため不格好になってしまう事もあるようです。

全てのJSをamp-scriptというAMP用のJSに切り替えれば対応はできるかと思いますが、制限も多い（最大150KB等）ので既存のJSを全て切り替えるのは難しいかもしれません。（基本的に自動でAMP化すると、JSは全て削除されます）

アドセンスコードや広告コードがAMP化されず空白になる

本来広告が表示される場所が空白

広告が表示されないのは、AMPプラグインによって自動的に広告コードがAMP化されない為起こっている問題です。

対応策としては、試していないのですがfunction.phpにAMP分岐を作って、AMPページの時だけに挿入されるAMP用アドセンスタグを設置する作業をすれば、アドセンス等の広告表示は改善できるように思えます。

Web制作ナビ様のWordPressのfunctions.phpで使える便利なカスタマイズコード41個まとめでAMP分岐について、AMPプラグイン有り・無しでやり方が説明してありましたので、興味がある方は見てみるといいかもしれません。

AMP化されたコードにPC用の記述も入ってしまう

私が一番自動AMP化によって気になる所です。

AMP化はモバイルのWebページ表示を高速化する目的で実装するものだと私は思っているのですが、自動AMP化を使用するとなるとレスポンシブデザインを採用しているWebサイトだとPC版・モバイル版のCSSが混同してしまいます。

AMPページを見る事はAMPファーストサイトでない限りモバイルでしか見る事は無いので、PC用のCSS記述は完全なる無駄といえます。

対策するとなると、AMP分岐タグを使用してレスポンシブデザイン用とAMP用にCSSを分けるかで対応はできるかと思いますが、そこまでやるならもうAMPテーマごと自分で作った方がキレイにできるんじゃないかな？と思ったので、AMPテーマを自作していきます。

AMP化テーマを自作する

前述しました問題により、AMP化テーマを自作した方が自動AMP化より自分の理想に近いページを作れると思いましたので、AMP化テーマを自作していきます。

まずはAMP化の自作テーマを作る為に/wp-content/plugin/amp/にあるtemplatesの中身を/wp-content/themes/『使っているテーマ』/にampというフォルダを作り、全て入れましょう。

自作AMP化テーマの用意

ファイルをコピーし終わったら、AMPの設定にて『Reader』を選択し、保存すれば自作AMP化テーマの実装が完了です。なんでもいいので記事のURLの末尾に『/amp』を加えて表示してみましょう。

自作AMPテーマ実装のデザイン

多分こんなデザインのAMPページになっているではないでしょうか。

これは自作AMP化ページの初期デザインなので、ここからCSSとテーマを編集してデザインを整えていきます。

/wp-content/themes/『使っているテーマ』/amp/の中身のファイルを適宜修正していけばAMP化完成です。

WordPressのテーマを自作した経験があるのであれば、AMPHTMLの仕様とAMPCSSの仕様を把握すれば、AMPページと通常のモバイルページの差異を少なく実装する事ができると思います。

WordPressテーマの自作経験がないとかなり難しいと思いますので、AMPバリデートを随時掛けつつ少しづつ勉強しながら実装していきましょう。