WordPressサイトをモバイル端末での表示を高速化するAMP（Accelerated Mobile Pages）対応にしてみました

この記事のURLとタイトルをコピーする

今回は、Googleがホームページの「セキュア化」と並んで重要視している「高速化」についてご紹介します。

~~2017年4月現在　当サイトでは、AMP対応しておりません。~~
~~手間>成果と、成果にほとんど影響しないので《現在不要》と結論しております。~~

2017年12月22日に、AMP対応に変更致しました。
当サイトが利用しているテーマがAMP対応を簡単に設定できるオプションが機能として追加されたからです。
成果としては、まだ未知数です。

2018年9月20日にテーマを変更しAMP非対応になりました。

Googleは、Accelerated Mobile Pages（アクセラレイティッド・モバイル・ページ）という、モバイル端末（スマホなど）でのWebページの表示を高速化するためのプロジェクトを公開しています。その名が Accelerated Mobile Pages　＝　AMP（アンプ）です。

Googleのモバイルでの検索結果に、AMP対応ページの表示を2月24日に開始しました。
AMP対応ページは、検索結果をクリックすると、ほぼ瞬間的に内容が表示されます。

Google公式ページでも2月25日に発表されています。

Google Japan Blog: モバイルウェブをもっと速く（Google Japan Blog）
Google モバイル検索が Accelerated Mobile Pages に対応しました（Google Developers Japan）

と、言っても今わざわざ対応したところで、全くと言っていいほど恩恵はないと思います^^;

さらに、AMP対応ページでは、javascriptが動作しないなどの制限があるのでGoogle Analyticsのタグやいいねボタンなどは、動作しないです。

アクセス解析は、設定をすればAMP対応ページにアクセスがあった場合は、カウントされるようになります。

なので、AMP対応は自己責任でお願いします（笑）ということで今回、人柱になってみたいと思います！

目次から読みたいところへ飛ぶ

WordPressのプラグインAMPをインストールしました
AMP（Accelerated Mobile Pages）の設定
AMP対応ページにアクセス解析をするための設定
AMP対応ページでアクセス解析が正常に動作しているか、Google Analyticsのリアルタイムで確認
AMPページのデザインは、超シンプル
- 通常のページデザイン
- AMP対応ページデザイン
AMP対応のまとめ

WordPressのプラグインAMPをインストールしました

当サイトは、WordPressなのでプラグインを入れれば対応できます！
やっぱりWordPress最高っ！簡単ですっ！

WordPressの管理画面から《プラグイン》
《新規追加》をクリック
「AMP」を検索
《今すぐインストール》をクリック

《プラグインを有効化》をクリックします。

AMP（Accelerated Mobile Pages）の設定

設定することは、ないのですが一つだけ操作が必要です。

設定は、変更せずに《設定》→《パーマリンク設定》で《変更を保存》ボタンをクリックします。

これをすることで、Rewriteルールを“フラッシュ”させるためだそうです。

AMP対応ページにアクセス解析をするための設定

今のままでは、Google Analyticsのjavascriptも削除されてしまうので、AMP対応ページヘアクセスがあるのかわからなくなります。

プラグインのファイルに２箇所追記して、アクセス解析ができるようにします。

FTPソフトを利用して、サーバー上のファイルを使ってもいいですし、
WordPressの管理画面内の「プラグイン編集」を利用してもいいです。

AMPプラグインの中の wp-content/plugins/amp/templates/single.php を編集します。

1.head要素<head>〜</head>の中に、以下を入れます。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

2.body要素<body>〜</body>の中に、以下のスクリプトを入れます。

<amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>

UA-XXXXX-Yの部分は、Google AnalyticsのトラッキングIDを入力してください。
Google Analyticsにて、《アナリティクス設定》→《プロパティ》→《プロパティ設定》→トラッキングID で確認できます。

入力は、以下の様な感じになります。別ソフトで開いた状態です。