釣りとキャンプとコーヒーが好きなサラリーマンの趣味サイト。釣り場やキャンプ場とかの見てきたことや、Webの仕事で困ったことを記録していきます。

WordPressのサイトをプラグインを使ってAMP化する!

AMP

12月7日に公式のWordPressのAMP化プラグインがリリースされました!
AMP(Accelerated Mobile Pages)はひたすらにページの表示速度を追いかけるため、javascriptが動作しないなどの制限があったり、HTMLの記述においてもAMP対応用のタグで記述する必要があるなどの制約があります。従来のWordPressの公式AMPプラグインでAMP化されたページは、オリジナルぺーじよりもかなり簡易化されたページでしたか、今回の1.0版のリリースにより、かなりオリジナル近い状態でAMP化ページを簡単に生成できるようになりました!
それではさっそくAMP化してみましょう!

目次

1.AMPプラグインをインストールして、有効化する
2.AMPプラグインを設定する
3.AMP化されたかを確認する

1.AMPプラグインをインストールして、有効化する

まずは、WordPress公式のAMPプラグインをインストールしましょう。WordPressの管理画面から、「プラグイン」⇒「新規追加」⇒キーワードで「AMP」と入力して検索⇒「AMP」というプラグインをインストールします。

 

AMPプラグイン

 

 

インストールしたらさっそく有効化しましょう。有効化すると以下のような画面になり、WordPress管理画面の左側に「AMP」というメニューが追加されます。

AMPプラグインの有効化

2.AMPプラグインを設定する

プラグインを設定するとWordPress管理画面に「AMP」のメニューが追加されるので、その中で設定を行います。
設定項目としては以下が表示されています。

項目名 設定内容
Native(ネイティブ) Cannoncal AMPページを生成します。すべてのページをAMP し通常の PC ページやモバイルページはなくなります
。私のサイトでは、メニューがうまく動作しなくなり、ページ遷移も遅くなってしまったのでこの設定はやめました。
Paired(ペア) モバイルページに相当したデザインと機能の AMP ページを生成します。WordPressの管理画面「AMP」にAMPページとして変換した際に発生したエラーが表示されますが、私のページでは大量にエラーが出力され、メニューがやはりうまく動作しなかったため、結局この設定もやめました。
Classic(クラシック) プラグインに搭載されたシンプルなテンプレートで AMP ページを生成します。1.0以前での表示ページです。デザイン的にもこの設定が一番よい感じだったのでこれを採用しました。

3.AMP化されたかを確認する

GoogleがAMP化していることを確認できるテストサイトを用意してくれています。
AMPテストにAMP化後のURLを入力するだけで確認できます。
AMP化されたURLは、例えばこのサイトのURLでいくと以下のようになります。

  • オリジナル: https://sumida-seabass.sakura.ne.jp/wordpress/wordpress-for-amp/
  • AMP化ページのURL: https://sumida-seabass.sakura.ne.jp/wordpress/wordpress-for-amp/amp

URLの後ろに/ampを付けます。
※パラメータ付きのURLの場合は、&と付与したページがAMP化後のURLになることもあります。

AMPテスト結果
AMP化が成功していると上記のように表示されます。

また、AMPページのURLの末尾に「#development=1」を付けることで確認することも可能です。

  • オリジナル: https://sumida-seabass.sakura.ne.jp/wordpress/wordpress-for-amp/
  • AMP化確認のためのURL: https://sumida-seabass.sakura.ne.jp/wordpress/wordpress-for-amp/amp#development=1

AMP確認のためのURLにアクセスし、Chromeのデベロッパーツールを起動して「console」タブを開いてください。
以下の方法でChromeのデベロッパーツールは起動できます。
・[Google Chromeの設定](右上の3本バー) − [その他のツール] − [デベロッパー ツール]
・F12 (Windows) / Cmd + Opt + i (Mac)

以下のように表示されればAMP化成功です。
amp化をconsoleで確認する
成功すると、「AMP validation successful.」と表示されます。

まとめ

いかがでしたでしょうか?プラグインを利用してWordPressをAMP化する方法をご紹介しました。
Clasic以外のモードでは、オリジナルページを極力再現しようとする都合上、javascriptの動作が再現しきれない部分が発生していますが、こちらはサイトに応じてどの設定を選択いただくのがよいと思います。
いずれにしてもシンプルな設定でAMP対応は可能ですので、やっておいて損はない設定です。
ぜひトライしておきましょう!
追記:AMPページでAdsense表示する方法を書きました!