WordPressのブログをAMP対応してadsense広告に対応してみました

公開日2017-11-21　更新日2017-12-29

こんにちは。

今日は前々から気になっていたブログの高速化、「AMP」対応したいと思います。

AMPは「アンプ」と読むのですが簡単に言うとページを簡素化してページの表示速度を早くしようって事なんですかね。

ワードプレスのプラグイン「AMP」は画像以外は全て？簡素化され通常のページのデザインとは大きく異なってしまいます。

もちろん広告も表示されないですし、ジャバスクリプトも読み込まれないです。

読み込む情報を「最低限」にしている分表示速度を飛躍的にUPするという対策ですね。

とはいえ「どこまで簡素化することが読み手にとっても望ましいことなのか？」は難しいところではありますが
書き手にとっては広告が表示されないのであればブログを書き続けるモチベーションを大きく阻害してしまいますよね。

なので私はAMP化しても広告の表示はしたい。

そして最低限のCSSの調整はしたいって事で今回挑戦してみることにしました。

全て終えて感じたことはそこまで難しくはないのですが、WindowsからMacにパソコンを変えたような感じで微妙に感覚が異なる部分があるので
理解するまではちょっと苦労したなって感じです。

とは言えわかってしまえば1時間もかからない作業ですのでワードプレスのページをAMP化してみたいと感じているかはぜひ挑戦してみてください。

ただ、仮にページに不具合があった場合は自己責任でお願いいたします。

ちなみに今回使用したAMPのプラグインは「AMP」です。

AMP

1 AMP専用のタグが必要
2 CSSも少しいじってみた
3 WordPressのブログをAMP対応してadsense広告に対応してみましたのまとめ

AMP専用のタグが必要

ワードプレスのAMPプラグインをインストールして有効化すればAMP化の80%作業は終わりだと思います。

このブログを読んでいる人はそこからあと20%カスタムをしたいわけですがAMPにはAMP専用のタグがあって
それ以外のタグはエラーになります。

ちなみにgoogleアナリティクスもampページでは通常のアナリティクスのタグは読み込まないのでAMP専用の
googleアナリティクスタグが必要です。

ちなみに私はタグマネージャを使っているので以下ページを参考にタグを挿入しました。

Googleタグマネージャが⚡AMPに対応

googleアナリティクスに関してが一番手間かもしれないので、googleアナリティクス設定に苦労する場合とりあえすっ飛ばしましょう。

私にとってはアクセス数が計測されない以上に広告が出ないほうが大切だったので。

次に本題のadsense広告のお話ですが、adsenseのヘルプページに書いてあります。

adsense ヘルプページ

[script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”][/script]

※使うときは[]を<>に変えてね。

このタグを内に書くことでAMPでもadsense広告が使えるようになります。

後は広告のコードを挿入すればいいだけなのです。

[amp-ad
layout=”fixed-height”
height=100
type=”adsense”
data-ad-client=”ca-pub-1234567891234567″
data-ad-slot=”1234567890″>
[/amp-ad]

※使うときは[]を<>に変えてね。

ca-pubとdata-ad-slotは一人ひとり違うのでadsenseのコードを見てご自分の現在の数字を入れてください。

adsenseの管理画面でも確認できますし現在使っているadsense広告のコードを直接見ればわかります。

これでgoogleのadsenese広告は無事表示されます。

ちなみにadseneseの関連コンテンツ広告までできる人は・・・

[amp-ad
layout=”fixed-height”
height=”1221″
type=”adsense”
data-ad-client=”ca-pub-1234567891234567″
data-ad-slot=”1234567890″>

[/amp-ad]

こうすれば関連コンテンツも掲載可能です。

ちなみになぜか「”」が全角文字化けしてしまうのでgoogleのヘルプページ見た方が確実です。

あと関連コンテンツについてはある程度ページにアクセスがある人限定でgoogleからメールが来るので、まだgoogleから関連コンテンツお誘いのメールが来ていない人は頑張ってアクセス数を伸ばしていってください。

CSSも少しいじってみた

別に少しじゃなくてがっつりでもいいのですがとりあえず私は見出しだけいじってみました。

プラグインの編集から「AMP」を押して選択ボタンをおします。

AMP

amp-styeを選んで一番下にCSSを追加すればスタイルを変更する事が可能です。

下の方の「templates」の中のcssいじればOKです。

single.phpにadsense広告が入れることが可能です。

AMP