AMP for WordPress（Ver1.0.2）の使い方

きっかけはGoogle Adsenseからお勧めされたことでした。

ん？
Google AdsenseからWordpressをAMP化するプラグインをお勧めされた。

ずっと気にはなってたけど面倒でAMP対応はしてこなかったけど、プラグインでいいなら入れてみよっかなー。

「AMP for WordPress」使ってる人いるのかしら？ pic.twitter.com/LiFt9LPr5Q

— なお湯@在宅ワーク育児日本嫌煙党ブロガー (@naoyunet) 2018年6月29日

1 AMPとは？
2 プラグインでAMPを実装する
3 AMPの適用を確認する
4 AMP for WordPressの設定方法
5 Google AnalyticsトラッキングIDの確認方法

AMPとは？

「Accelerated Mobile Pages」の略で、モバイル端末向けに最適化したWEBページを指します。

「モバイル向けの最適化」とは、余計なデザイン要素やスクリプト等を排除し読み込み速度を最大化することですね。

もっとざっくり言うと、
超軽いページにしてサクッと開けるようにする
という事です。

ページがサクッと開いて読めるなら、それに越したことはないですよね。
モバイル端末の場合は特に、読み込み速度が遅いとすぐに離脱してしまいます。

参考サイト様
AMPとは？ – SEO HACKS

AMPに対応すると、検索結果ではこんな風にカルーセル表示されるようになります。
左右にスライドすることで、検索にヒットしたコンテンツをサクサクっとめくって一覧できます。

雷のようなアイコンが付いているページ。
これが「AMP対応したページだよ」という印になります。

関係ないですが「日本終わってるな」と考えてしまうニュースですね…

プラグインでAMPを実装する

今回、Googleにオススメされたという事なので「AMP for WordPress」を使います。

管理メニュー「プラグイン＞新規追加」から「AMP for WordPress」で検索。
インストールと有効化します。

管理メニューに「AMP」という項目が追加されました。

AMPの適用を確認する

AMP for WordPressを入れたら既存の記事を編集してみましょう。

AMPのプレビューが出来るようになっています。

AMP for WordPressの設定方法

管理メニューから「AMP ＞ General」を開きます。

Template Mode

AMPページのテンプレートモードを選択します。
テンプレートモードは「Native」「Paired」「Classic」の３種類。

Nativeモード

アクティブなテーマのテンプレートを再利用してAMPの応答を表示しますが、AMPに個別のURLを使用しません。つまり、あなたのサイトはAMPファーストであり、あなたの正規のURLはAMPです。

現在のテーマのデザインを維持したまま、AMPに最適なページに変換されます。
その際、AMP用のURLは生成されず、オリジナルのページがAMPに最適化されたページになります。

Pairedモード

アクティブなテーマのテンプレートを再利用してAMPの応答を表示しますが、AMPには別々のURLを使用します。コンテンツが完全にAMP有効である場合、各正規URLには対応するAMP URLがあります。

現在のテーマのデザインを維持したまま、AMPに最適なページに変換されます。
その際、AMP用のURLが別途生成されるので、オリジナルページとAMPページの２種類になります。
AMPページでは、オリジナルページのURLに正規化されるので、重複コンテンツになることを防いでます。

Classicモード

テーマのテンプレートと一致しない基本的なデザインで、従来の（従来の）投稿テンプレートにAMPレスポンスを表示します。

AMPに最適化されたAMP for WordPressで定義されたデザインでAMPページが生成されます。
味気ないデザインになりますが、サーチコンソールでエラーになりにくい最も無難なモードです。

AMPページの確認方法

記事ページのURL末尾に特定のパラメータを追加するとAMP化したページが開きます。

http://your-domain.com/postname/amp/
http://your-domain.com/postname/?amp

パーマリンク設定がデフォルトの場合、末尾に「&amp=1」を追加します。

http://your-domain.com/?p=123&amp=1

実際にAMP化ページがどのように見えるか確認してみてください。

WordPressのテーマによっては、NativeとPairedはデザイン崩れが発生する可能性があります。

個人的におすすめなのは「Paired」。
一旦、Pairedモードにしてみて、実際にAMPページをチェックしてデザインが崩れていなければそのまま問題ないでしょう。
デザインが崩れてしまったらClassicモードで。

Validation Handling

ここは基本的にオールチェックで問題なし。

Supported Templates

Supported Templatesにチェックを外すと、AMP化したいページを細かく設定できます。

初期値では「固定ページ」のチェックは外れているので、固定ページもAMPを有効にしたい場合はチェックを入れておきます。

Analytics

ナオユ

パッと見、どうしたら良いかわかりません…

ナオユ

ここはGoogle Analyticsなどアクセス解析ツールを使っている人向けの設定です

Google Analytics AMPページのデータを取得するには、次のコードを入力します。

Type:には
googleanalytics
と入力。

JSON Configuration:には次のコードをコピペして、accountの値を編集します。

{
  "vars": {
    "account": "UA-XXXXXXXX-YY" // Google Analytics のトラッキングIDを入れる
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}

Google AnalyticsトラッキングIDの確認方法

Google Analyticsの「管理」からプロパティ設定で確認することができます。

プロパティ設定をクリックすると、トラッキングIDが表示されます。

トラッキングIDをコピペして「Save」ボタンをクリック。

はい、これで設定はおしまいです！

お世話になったサイト

Adsenseを貼っているサイトをAMP対応するなら、こちらも合わせて読んでください。

AMP for WordprssdeでGoogleAdsenseの広告が表示しなくなった時の対処方法

サイトのスピードアップなら、こちらの記事もどうぞ！

WP Fastest Cacheを入れた結果！サイト表示速度が大幅改善したのでデータを公開します