web

簡単！速攻！秒殺！wordpressプラグインで簡単にAMP（Accelerated Mobile Pages）に対応させてみた

簡単！速攻！秒殺！wordpressプラグインで簡単にAMP（Accelerated Mobile Pages）に対応させてみた

AMP（Accelerated Mobile Pages）とは、GoogleとTwitterが共同開発しているモバイル向けのホームページを高速表示させるためのプロジェクトです。「AMPアンプ（Accelerated Mobile Pages）」という。

なんや、ようわからんけど、必要最低限の要素のみ表示させるので、容量は10分の1、表示速度は4倍。

いつも頼りにしている「ももねいろ」がAMP対応させているとのことだったので、実際にAMP表示させると爆速表示された！

これは、やっておいたほうがいい！と思い、即決でAMP対応させることにしました。

 

超簡単！wordpressのAMP対応手順

サイトをAMPに対応させるには、wordpressなら「プラグイン」か「htmlの操作」で対応できるようです。色んなサイトを見て参考にさせてもらい、プラグインが一番手っ取りばやそうだったので、プラグインで対応させてみることにした。

使用したプラグインはAutomattic社製プラグイン「AMP」。

wordpress-plugin-amp
  1. プラグインをwordressの管理画面から追加する
  2. プラグインを有効にする
  3. wordpressの「管理画面設」→「設定」→パーマリンク設定の設定を現状のまま「更新」する。
  4. AMP表示されるページを、googleアナリティクスで計測させるためのタグをAMPプラグインに埋め込む。
    wordpressの「管理画面」→「プラグイン」→「プラグイン編集」→「AMP」→下記引用参照

    AMPプラグインの中の amp/templates/single.phpを編集します。
    1.head要素の中にこちらを入れます。

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

    2.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アナリティクスの　アナリティクス設定→プロパティ→プロパティ設定→トラッキングIDを調べて入れて下さい。

    http://www.e-agency.co.jp/column/wordpress_amp_googleanalytics.html

     

と、簡単に設定できます。

感想

色んなサイトを参考にしましたが、AMPに「対応させる・対応させない」色々意見がわかれているようです。

対応させてアナリティクスでリアルタイム計測をみていると、ampアクセスしている人が意外にも多い。

2016年2月からはじまったAMP（Accelerated Mobile Pages）、2月から5月あたりの3ヶ月については影響もうすかったけど、年末には結構影響があったものと推測される。

wordpressなら難しい設定も必要ないし、とりあえずプラグインで対応させて様子をみるのがいいでしょうね。

ひきつづき計測、わかったことがあったら報告しますね！

 

ってこと！

おしまい！