WordPressのサイトでGoogleが推奨しているAMP対応の設定方法

AMPとは、Accelerated Mobile Pages (アクセラレイティッド モバイル ページ)の頭文字をとってAMPといいます。
今回は、ワードプレステンプレートサイトでのAMP対応を行ってみたので設定方法をメモします。
AMP対応じたいは簡単ですが、皆さん、グーグルアドセンスやアナリティクスの設定を再度やらないといけないの？と考える人も多いのではと。
自分も色々調べましたが設定がややこしそうだなと思っており、今まで設定してはいなかったですが、
2つのプラグインを使う事で簡単に設定ができるとあった為、自分も試みました。

なんといっても、モバイル高速表示の「AMP」であり、現在はグーグルも検索対策の推奨をしているぐらい、これから必須となるAMP設定です。
早期の設定で、モバイル検索時のAMP表示位置に自分の記事がでてきたりするために対策をするのがベストです。

それでは、ワードプレスでのAMP設定です。

■WordPressのプラグインを使用したAMP設定方法＆アドセンス・アナリティクスの設定方法

①プラグインより「AMP」のプラグインをインストール

AMPと検索すれば一番上にでてきたり、評価が高いアプリです。
インストール後、有効化するだけで、AMP化されるのですごい楽な作業です。
確認方法としては、記事のURL最後に「/amp」と打ち込み表示させてみればすぐ確認が可能です。

②プラグインより「Facebook Instant Articles & Google AMP Pages by PageFrog」をインストール

上記プラグイン名で検索やAMPと検索したりすればでてくるプラグインアプリです。
まずは、こちらをインストールします。AMP化したページのグーグルアナリティクスやアドセンスを設定する為のプラグインです。

③Google AMP HTMLが「Ready」になっているか確認

アナリティクスやグーグルアドセンスなどは、AMP化したとしても、そのままではだめです。
AMP化した場合のコードを入れ込み対応しないと機能しないため、こちらの設定が必要になります。

④ワードプレス管理画面、左メニューの「Mobile Formats」にある、「Styling」を選択

上記の「Styling」を選択します。

「Choose Logo」を選択し、ロゴを指定しておきます。
AMP化された記事に必ずでてくるものであり、正方形の画像サイズが見やすいです。
また、AMP化された記事にワードプレスのプロフィール名もでてくる為、管理画面右上にあるプロフィール名等も確認しておきましょう。

⑤アナリティクスの設定を行う

先ほどの左メニューより「Analytics」を選択し「GoogleAnalytics」を選択します。
googleのログインを画面から行い、そのサイトのアカウントを選択します。
※１つのアカウントで複数のサイトを管理している場合は、今回設定したサイトのアカウントを選択してください。
今回のサイト用のアカウントが見つかれば「Choose Site」をクリックし、画面上部にもどり、「Enable Integration」をクリックで完了です。
※自分も間違いましたが、先に「Enable Integration」をクリックしても設定されませんので注意が必要です。

⑥アドセンス設定を行う

AMPページ用のアドセンス設定を行います。
先ほどのプラグイン左メニューより「Ads」を選択します。
画面からAMPの項目までスクロールを行い、先ほどのアナリティクス設定時と同じようにグーグルにログインを行い設定します。
また、広告コードを選択することになりますので、設定する前にAMP用のアドセンスコードを作成しておくのもよいかとおもいます。
※自分はレスポンシブ対応でAMP用のコードを作成しました。

⑦今後の新規記事＆公開済み記事をAMP化

最後に右下の「Save All Settings」で設定終了です。
どちらも設定しておく方がよいかとおもいます。

※ワードプレステンプレートスティンガー5での設定。