【WordPress】プラグインを活用してAMP対応!導入とアナリティクスのトラッキングIDを設定する方法

更新日:

Image:Wordpress

これまで、iyusukeではワードプレスの超高速テーマ「Luxeritas」を使用していたので、モバイルでページのコンテンツを激速表示できるAMP(Accelerated Mobile Pages)には何もしなくても完全対応していた。

Stingerに変更してから、しばらく放置していたAMP対応ですが、プラグインを導入することで簡易対応させたので、AMPの導入方法アナリティクスのトラッキングID設定についてシェア!

AMP(Accelerated Mobile Pages)について

まずはじめに、AMP(Accelerated Mobile Pages)について超ざっくり噛み砕いてご紹介する。

AMPとは、簡単に言うと「モバイルページがものすごい速さで表示されるGoogle推進のオープンソースプロジェクト」で、AMPに基づいて構成されたページは端末やプラットフォームの種類を問わず、超高速表示される。

AMPの仕組みや構成については長くなるため割愛しますが、とにかく、ブログやサイトをAMPに対応させると、ユーザビリティを向上させるだけでなく、Google検索結果でカルーセル表示されるなど、SEO的にもプラスになることが多いため、まだ対応させてない!という人はぜひ、この記事を参考にしてAMPに対応してみよう。

AMPについて詳しく知りたいという人は下記の公式ページをチェックしてみるべし。

プラグインを活用して簡単にAMP対応する方法

Image:Wordpress

ワードプレスを使ってブログ・サイトを作成している場合、AMPにはプラグインを活用することでものすごく簡単に対応することができる。

もちろん、AMPに準じた構成でページを作成することができますが、こちらはPHPやHTMLの知識が必須となるため、まずは、プラグインでAMPに対応してみましょう!

AMP for WordPress(ダウンロード)

プラグイン「AMP for WordPress」を導入すると、ワードプレスの管理ページに「AMP」が追加される。

プラグインを有効化すればAMPへの対応はひとまずOK。プラグイン「AMP」には設定という設定がないため、固定ページもAMPに対応させたい場合はついでにチェックを入れておくといいかもしれない。

※AMPのインストールが完了したら、「ワードプレスの設定>パーマリンク設定」から、何も変更しなくていいので「変更を保存」を更新しておこう。

AMPページのデザインを変更する

プラグイン「AMP」を有効化したら、次は簡単なデザインの変更に移動する。管理画面の「外観>AMP」をクリックして開こう。

プラグイン「AMP」で調整できる外観はヘッダーテキストの色ヘッダーの背景色&リンク色テーマ配色のライト or ダークとものすごく簡単な変更しかできないですが、自分の好みの色に変更しておきましょう!

※AMPにはデータ量を減らすのと引き換えに様々なルールがあり、デザインにも制限がある。ある程度デザインに自由度を求める場合はCSS/HTML/PHPの知識が必要です。

自分のブログ・サイトがAMPに対応しているか確認する

プラグイン「AMP」の設定が完了し、ちょっとしか変更できないデザインを調整したら、自分のブログ・サイトがAMPに対応できたか確認しておきましょう!

AMPの確認はURLの最後に「amp/」を追加すればOKです。

元のURLhttps://○○/○○/
AMP対応https://○○/○○/amp/

ちなみに、現在AMPに対応しているのはコンテンツのみで、トップページには対応していない。「トップページがAMPに対応してない!おかしい?」と思ってもそれは正常なのでご安心を。

GoogleアナリティクスのトラッキングIDを設定する方法

最後に、プラグイン「AMP」でGoogleアナリティクスのトラッキングIDを設定する。

アナリティクスのトラッキングID設定は、「AMP>Aalytics」から行うことができるので、アナリティクスから自分のトラッキングIDをコピーしておくべし。

AMPのアナリティクス設定を開いたら、「Type」に「googleanalytics」と入力し、「JSON Configuration」に下記コードを貼り付ければOKです。※UA-○○は自分のGoogle アナリティクストラッキングID。

{
"vars":{
"account":"UA-○○"
},
"triggers":{
"trackPageview":{
"on":"visible",
"request":"pageview"
}
}
}

モバイルファーストな時代なのでAMPに対応しておこう

今回ご紹介した方法はプラグインを活用して簡単にAMP対応する方法でしたが、AMPに対応することで超高速表示によるユーザビリティの向上や、Google検索結果でのカルーセル表示など、受けられる恩恵は多い。

また、デザインに制限があるということや、エラーが出た時に修正が超大変など、AMP対応にはデメリットやぶちあたる壁もいくつかありますが、モバイルファーストな今だからこそAMPに対応しておきましょう!

※プラグイン有効化でAMP完全対応!Yeah!というわけにはいかず、CSSの調整Adsenseを利用している場合は広告のAMP対応など、いくつか対応しなければいけないこともある。

AMP用アドセンス広告の配置CSSの編集については以下の記事も参考に!

-Blog

Copyright© iyusuke , 2018 All Rights Reserved Powered by STINGER.