ワードプレス最速のAMP化&アドセンス対応は2プラグインだけ

ワードプレスを最速でAMP化させて最速でアドセンス広告に対応させる方法がたったプラグイン2つで可能なの知ってます?
 

最近のWEBは速さ至上主義。兎に角、もっさりしているWEBページは嫌われます。SNSボタンで表示速度が落ちてる残念なこともあります。

そんな自体をGoogleが捨て置く訳ありません。AMPとかいう仕組みを作ってページの読み込み速度を向上しようともくろんでいるみたい。

そのやり方ってのが、「いらん装飾は読み込まず、コンテンツ部分だけ表示しちゃるばい!」というもの。CSSとかjs、SNSボタンとかの読み込みをせず、画像とテキストだけ表示させて表示を速くした!のです。ある意味、時代の最先端、ある意味、時代を逆行してる(笑)

 

ワードプレス最速のAMP化

ワードプレスのAMP化は、プラグイン1つで完了。そして、アドセンスの対応もプラグイン1つで完了。つまり、プラグイン2つで、AMP化とプラグイン対応が出来るということです!

AdSenseを表示するには、アドセンスの広告コードの一部が必要になります(詳しくは下部にて)

用意するプラグインは2つ

ワードプレスを最速AMP対応プラグイン

  • AMP
  • AMP for WP-Accelerated Mobile Pages

用意したいプラグインは2つだけです。インストールする順番も大事っぽいので、上の「AMP」からインストール&有効化して下さい

これで、AMP化は完了です。

AMP化が出来ているかをテストする

有効なAMPページです

プラグインをインストール完了すればAMP化は終わりです。AMP化しているかを確認するのは単純。

ページURLの最後に「/amp」と追記してみて下さい。表示が変わるはずです。この記事ページもAMP対応していますので見てみて下さい。

表示が正しくても、Googleが「これじゃない」とか言う場合があります。本当に正しくGoogleが認めるAMP化が行われているかを確認するためには、Googleが提供しているAMPテストツールを利用します。

Google AMPテストツール

AMPテストページでページURL(またはAMP用のURL)を入力してテストを実行します。

最速でAMPをアドセンス対応させる

AMP化が終わったらアドセンスの設定をして完了です。アドセンスの対応は、前の2つのプラグインを入れていたら、やることは1つ。

アドセンス広告コードに記載されている「data-ad-client=”ca-pub-000000000000″」「data-ad-slot=”000000000″」の部分をプラグインのAMP FOR WP – Accelerated Mobile Pageの管理画面にコピペするだけ

ワードプレスを最速AMP対応プラグインさせてアドセンスを載せる

ワードプレス管理画面に「AMP」というメニューがあります。そこから「setting→Advertisement」に進んでアドセンス広告を設定するページを開きます。

6つ表示できる位置が用意されているので自由に選んで下さい。私の場合は、AD#4の記事下を選択しています。

広告掲載位置を決めたら、その中の「Data AD Client」と「Data AD Slot」に先程のアドセンス広告コードの一部を入力して下部「Save Changes」ボタンを押して登録完了。

はい。終わり!

 

まとめ

以上で、ワードプレスをAMP化して、アドセンス広告にも対応させることが出来ました。お手軽に出来てプラグインは本当に優秀です。

新しい仕組みでWEBの未来を切り開くGoogleの姿勢は本当に尊敬できます。でも制作側にとっては迷惑な話(笑)モバイルファーストの話もあるし、やること多い割に利益が出ない!激おこぷんぷん丸です。

投稿日: 2017/10/15
 
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
よく検索されてる記事