最近書きたいことは山積みなのにやらなければならないことも山積みで書くのが追いついていない状況です。
そんななかGoogleが推奨しているしやらなければと思っていた、AMP対応をおこなっておりました。
WordPressでのAMPの実装自体は超簡単でしたが、adsenseを入れるのに一苦労だったので備忘録を残しておきたいと思います。
(大変なのはAMPのプラグインが先週のアップデートでエラーを出すようになったからでしたが)
作業を行う際はバックアップをとって自己責任でよろしくお願い致します。
WordPressでのAMPの実装
AMPが流行っているらしいということで、１つのサイトに実験的にAMPをいれて運用してみることにしました。
WordPressでAMPを実装するにはプラグインをいれるだけです。
これで終わりです。
自分のwordpressのURLの末尾に/ampと追記すると確認することができると思います。
(ちなみにこのサイトはまだAMP対応できていません)
例：http:www.XXXXX.com/amp
adsense等の失敗(ここは思い出みたいなものなので飛ばしてください)
以前までAMPにはAdsenseは入らないと勘違いしており、どうせそんなにAMP表示されないだろうと思い放置していたら、
がくっとAdsenseの収入が下がりました。
またAMPのアップデートをおこなったところ、エラーがたくさんでるようになりました。
理由は私はAdsenseをAdsense managerというプラグインを使い表示させていたのですが、それがアップデートしたところ読み込まれてしまい、「script」はエラーだよとGoogleに怒られた次第です。
その後AMPは検索にひっかからなくなり、adsenseの収入も減ってきて、このままAMPやめようかなと思ったのですが、ユーザビリティ的にAMPはあった方がいいのかなと思ったり、AMPやめるのも大変そうな記事を見かけたり、何よりエラーをきれいにしたいと思ってしまいAMPを続行させることにしました。
また、気合いを入れてエラーを治そうと模索していたところAMPがバージョン 0.5.1になったので、Adsense managerのエラーが消えてくれました。
ただAMPのアップデートをおこなったことで一時的に対応していたAdsenseのコードも消えてしまいました。
毎回アップデートのたびにコード追記しなければならないのか!?と思い備忘録記事を書いている次第です。
AMP用adsenseの準備
本題のAdsenseに戻ります。
AdsenseはAMP用のコードの準備をしておく必要があります。
参考：AMP 広告ユニットを作成する | Googleサポート
自分のadsenseの広告ユニットから
data-ad-client=”ca-pub-1234567891234567″
data-ad-slot=”1234567890″
の数字を回収してきます。
広告ユニット例<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
回収したらAMP用のコードに当て込みます。
Adsenseは最初の画面いっぱいに広告がでるのはNGなので、場所によって広告のサイズが異なります。
スクロールせずに見える範囲AMP
※スクロールせずに見える範囲は高さを 100 ピクセルに固定されています。<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>
黄色の部分を自分のに書き換えましょう。
スクロールしなければ見えない位置AMP
300×250のレスポンシブが推奨されています。
<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>
黄色の部分を自分のに書き換えましょう。
これで準備完了です。
adsense広告の位置
がこのままコードを書き込むとadsenseは表示されるものの左側に表示されます
それはそうですね。位置の情報はないのですから。
せっかくadsenseをいれるなら中央にしたいって方は以下のコードのようにdivを追加してください。
WordPress AMPの記事に反映
ようやく反映できます。
まずはプラグイン一覧からAMPの編集を画面へ移動します。
そしてamp/templates/single.php の「/head」の前に以下のコードを貼り付けます。
これで準備したコードが動くようになるイメージです。
(amp-post-template-actions.phpに書き込むやり方もあるようです。)
AdsenseManagerで簡単追加
では上で準備したコードを配置していきましょう。
AdsenseManagerはショートコードを利用して記事内の任意の場所にAdsenseを表示させることのできるプラグインで、使用している人も多いかと思います。(アップデートがしばらくされていないので、このまま使うべきか悩みどころです)
Adsense managerを使っている場合は今使っているAdsenseManagerのショートコードの記述に準備したコードを追加するだけです。
AMPのコードはパソコンやスマホには表示されないので、続けて書いても影響がないのです。
同じようにパソコン・スマホの記述はAMPに表示されません。(ちょっと前のバージョンではこれでエラーになりましたが)
追加したらAMPのページを見てみてください。
実際に表示が確認できているかと思います。
AdsenseManagerを使っていない場合
AdsenseManagerを使っていない場合は例えばフッターやヘッダーであれば、比較的簡単に入れ込むことができました。
フッターの場合はamp/templates/footer.php の中のfooterのタグ内に上記の準備したコードを配置してみてください。
ヘッダーもしかりです。amp/templates/header-bar.phpのheaderタグの中にコードを設置するのみです。
表示を確認しつつ、位置を調整してみてください。
Adsense managerと併用して設置することで3個Adsenseを表示できました。(今はAdsense3個ルールなくなったようですね)
以上です。
AMPをアップデートすると記述が消えてしまうことがあるので、なんとかならないかなと模索中です。
この作業を行う際はついでにAnalyticsの実装も行うのがおすすめです。(エラーでるからできなかったのですが)
後日記事を書こうと思います。
