初心者がSTORKでアドセンス広告をAMPページに表示させた話


スポンサーリンク


スポンサーリンク



 

ブログのWordPressテーマを変えた事で色々な初期設定が必要になりました。

こんにちは。あだじょぱです。

前回までの流れで、WordPressのテーマを無料のSimplicity2から有料のSTORKに変更し、各種設定を行うところまで書きました。

初心者がSimplicity2からSTORKへの変更でやったこと

2017.08.10

初心者がWordPressテーマを有料のSTORKに変更してみた話

2017.08.09

 

前回は、AMPのプラグインでSimplicity2の時のようなAMP対応を目指しましたが、アドセンス広告がAMPページでは表示されないところで終わっていました。

通常のモバイル用ページと違い、AMPページではコードを書き換えないと表示されないのですが、AMP用のコードをストークの広告用ウィジェットへ書き込んでも表示できないようになっています。

Simplicity2だと、ウィジェットで設定している広告は自動的にAMPページで表示されるようにコードが変換され流という仕様だったんですけどね・・。

そのような問題から、AMPへの対応を見送っている人もいるような気がします。

そこで今回は、簡単にプラグインを使って、AMPページにアドセンス広告を表示させる事に挑戦しました。

 

 

プラグインAMP for WPを導入する

 

AMPでの恩恵は、サイトによっても差があるようで、AMP対応した事によって検索流入が大きく増える場合もあれば、それほど変化を感じないという意見も聞きます。

ですが、以前まで対応していたものが急に対応出来なくなるというのは、なんだか気持ちが良くないので、なんとかして対応させる方法がないかと調べたところ、AMPというプラグインを導入する方法に辿り着いた次第です。

最初に書いておくと、サイトをAMPに対応させるのは良い事ばかりではありません

導入済みのプラグインがAMPに対応していない場合は、不具合が起きる可能性もあります。

例えば、皆さんがよく使われている吹き出しの会話形式表示が簡単に出来るプラグイン、Speech Bubbleは暫く更新されていないのでAMPに対応していません。

ですので、Speech Bubbleを使って会話形式を表示しているページがAMPページになると、表示が崩れてしまい、会話しているように見えなくなってしまいます。

既にページ数が多く、Speech Bubbleを頻繁に使っている場合は、修正が大変になるのでAMPは待った方が良いかもしれません。

そんな危険も含みつつ、Speech Bubbleは殆ど未使用なあだじょぱこたんでは、関係ねーぜ!とプラグインを導入してみました。

 

ところが、AMPというプラグインをインストールし有効化して、AMP対応ページが生成されたまでは良かったものの、デザインの崩れや広告が表示されていない事に驚愕・・・。

エエーーー ΣΣ(゚д゚lll)!

そこで再び調査を開始。

発見したのが、AMPのプラグインを発展させたようなプラグインでした。

ややこしいけど、そのプラグインがAMP for WPです。

AMP for WPをインストールして有効化すると、設定が行えるようになるので、そちらの設定画面でAMPページのデザイン変更とアドセンスの表示位置を設定します。

直近のアップデート(更新)をしたら、先にインストールしていたAMPプラグインが勝手に無効になっていました。

手動で有効化を試みましたが、エラーが発生して有効にならないので、プラグインを削除してみましたが、特に影響が無いようです。

ですので、AMP for WPを使用する場合は、プラグインのAMPは必要ないと思います。

 

 

AMP for WPの基本設定をする

 

プラグイン側の設定を行いますが、全て設定項目は英語表記になっています。

最低限設定しておきたいところは、表示のデザイン設定と広告の位置設定。

まずは、WordPressの管理画面でプラグインをインストールし、インストール後にサイドバーの項目に、AMPという項目が追加されているのを確認します。

AMP→GettingStartedと進めAMP for WPの設定画面を開きます。

 

 

設定画面を開いたら、Designという項目でデザインの変更ができます。

ヘッダーにロゴを使っている場合は、Generalの項目からロゴを設定します。

デフォルトの設定では、固定ページもAMPページが生成されるようになっていますが、固定ページをAMP化させた場合は、Contact Form 7 を使用したページがAMPで機能しなくなる現象が確認できていますので、AMP for WPの設定画面、Generalの項目にある1番下のAMP on Pages をOFFにします。

これで固定ページは、AMPページを生成しません。

残るは、広告の設定です。

 

 

AMP for WPでアドセンス広告の表示位置の設定をする

 

まずは、事前に準備する必要があります。

AMPページで表示したいアドセンス広告のコードから、ca-pub-”◯◯◯” とdata-ad-slot=”△△△“の表記を探し、ca-pub-“◯◯◯”の部分と”△△△”の数字をメモやコピーしておきます。

次にAMP for WPの管理画面からAdvertisementの項目を開きます。

AD#1からAD#6まで設定項目があるので、広告を貼りたい位置の設定をONにします。

  • AD#1 ヘッダー
  • AD#2 フッター
  • AD#3 アイキャッチ画像下
  • AD#4 記事下
  • AD#5 記事タイトル下
  • AD#6 関連記事の上

 

すると、広告サイズの選択箇所と、先ほどアドセンス広告コードから取得していた数字を入力する箇所が入力可能な状態になりますので、サイズとコードの数字を入力します。

あとは、下側のSaveで設定を保存するだけで完了です。

広告を表示させているページのアドレス最後に、?ampを付けるとパソコンからでも、ampページを確認できるので、広告が正常に表示されるか確認してみて下さい。

 

 

実際にスマホで確認した画面ですが、正常に広告が表示されていました。

因みにダブルレクタングル表示や関連広告ユニットは、ampでは表示できません。

 

 

最後に

 

Simplicity2では、特に何もしなくてもAMPの項目をONにしておくだけで、自動でAMPページを生成してくれましたが、STORKではプラグインを使い自己責任で行う必要があります。

ただ、見た目はプラグインを使った方が綺麗になる感じがします。

そもそもAMPに対応させるべきか、まだ待つべきかで悩むところですが、これからサイトを運営しようと思っている人や、まだ始めたばかりの人であれば対応しておいても悪くないんじゃないかと思います。

ページ数が増えると、何かあった時の修正など、対応に手間が掛かるので、なかなか手を出せないというところもあると思います。

もし、STORKをお使いで、AMPで広告が表示されないと困った時は、このプラグインを試してみて下さい。


スポンサーリンク


スポンサーリンク





コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

大阪から札幌への移住者。二度の移住でトータル15年ほど。 会社は早期退職。仕事やプライベートで北海道全域を走破。 趣味はGuitarとCamera。どちらも未熟である。  HM/HRと綺麗な素敵レデーをこよなく愛す。怪しい者ではない。