wordpressをAMP化対応してモバイルでの閲覧速度を上げる方法[無料2分]

wordpressのAMP化対応を無料3分で行う方法を紹介します。

AMP化対応の方法を紹介しているウェブサイトは結構あるのですが、複雑だし、ステップが多くて途中で挫折しそうだったので、

素人でもわかるよう無料3分で簡単に行う方法を紹介します。

1.AMP化対応とは

wordpressのページのモバイルでの閲覧速度を上げることです。

これをすると、スマホでアクセスした読者が、読み込みが遅いから「このサイト見るのやめた」と、サイトから離脱してしまうことを防ぐことができます。

今はスマホでのアクセスが増えてきているので、表示速度を上げることは重要ですね。

2.無料2分でwordpressをAMP化対応しましょう

ステップは以下の通りです

  1. プラグインを有効化する(20秒)
  2. パーマリンクの更新をする(10秒)
  3. AMP化されたページデザインがおかしくないか確認する(30秒)
  4. AMP化が正しくできているか診断する(60秒)

早速やっていきましょう。

1.プラグインを有効化する(30秒)

こちらのプラグインをインストール&有効化しましょう。

青いAMP for WordPressは投稿をAMP化するものです。こちらは必須です。

赤いAMP for WP-Accelerated Mobile Pagesは外観をAMP化するもの。余裕があれば、こちらもダウンロードしましょう。(こちらは5.おまけで解説していますが+2分で設定できます。)

wordpressをAMP化対応

プラグインの有効化の方法は、管理画面>プラグイン>新規追加で、AMPと検索してインストール&有効化しましょう。

2.パーマリンクを更新する

設定>パーマリンク設定を選択し、変更はせずに「変更を保存」をクリックしましょう。

WordPressでパーマリンクを変更している場合、パーマリンクの設定をリフレッシュする必要があるからです。「なんのことや?」という人はとりあえず変更を保存のクリックをすればOKです。

wordpressをAMP化対応

3.AMP化されたページデザインがおかしくないか確認する(30秒)

記事のURLの末尾に/amp/をつけてamp化されたページがおかしくないか確認しましょう。例えば、https://guuten.net/blog/2018/04/12/post-1137/というページの場合はhttps://guuten.net/blog/2018/04/12/post-1137/amp/と入れて検索しましょう。

amp化する前のページ

wordpressをAMP化対応

amp化したページ

wordpressをAMP化対応

ここでデザインが気に入らない場合(例えば、吹き出しを使っている場合など、消えることがあるようです)は、他にもCSSのコードを書き換えるなど設定が必要です。

今回はデザインがOKだとして進めていきます。

4.AMP化が正しくできているか診断する

こちらのAMPテストツールに先ほどのamp化したURLを入れて確認します。

wordpressをAMP化対応

こちらのように表示されればamp化できています!完成です。

wordpressをAMP化対応

5.おまけ(2分)

AMP化したときの外観を変えたい人は以下の設定を行いましょう。

ダッシュボードのAMP>settings>Designから外観を変えましょう。

下記では、AMP>settings>Design>Themeからデザインを変えてみました。

wordpressをAMP化対応