ガイコツブログ

お酒、ラーメン、映画、etcの気ままな雑記ブログ

ガイコツブログ

はてなブログのAMPには手動でアドセンス広告を貼る必要がある。※追記あり

どうもー、ガイコツです。しょぼいブログですがボチボチ頑張ってます。


さて、突然ですが、はてなブログPROをご利用のブロガーのみなさん、AMP設定はどうしてますか?

わたくしガイコツはなんとなくAMP設定にチェックを入れていたんですが、先日、大変なことに気がついたんです。

そう、AMPにアドセンス広告が掲載されてなかったんです。


web上では嫌というほど言及されている本件ではありますが、一応わたしもこれを記事にしておきますよ。


AMPとはなんぞや

聞き慣れない方もいらっしゃるかもしれないので最初に軽く触れておきます。


AMPとは(Accelerated Mobile Pages)の略称です。

Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである[1]。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。
出典:wikipedia

webアクセスの比重がモバイルに移っていくのを見越したgoogleさんが推進している、モバイルページを高速で表示させる手法のことなんです。

通常のhtmlの約4倍の早さで表示できるという説もあり、これは通常のザクシャアザクの関係よりもさらに上をいきます。


スマホでweb検索をかけたとき、カミナリマーク(⚡←こういうやつ)が付いた検索結果を見たことありませんか?

検索結果に現れたAMP
↑これがAMPです。

試しにアクセスしてみると、鬼のように表示が早くてびっくりします。


今はまだ普及の最中かと思われますが、これが大多数に認知されたら、モバイルアクセスの人は同じような検索結果だと感じたら迷わずAMPを選んでクリックすると思われます。

はてなブログもAMPに対応

そういうわけで、はてなブログさんも「これはどげんかせんといかん」と思ったか思わなかったは定かではありませんが、2016年から有料のPRO向けにβ版機能としてAMP配信機能を追加したんですね。

staff.hatenablog.com

はてなブログPROをご利用の方は、[設定]→[詳細設定]から、AMP配信設定を行うことができます。

はてなブログPROのAMP設定

(いつまでβ版なんだろうか)


これを設定している方は、アナリティクスからAMPへのアクセスがどのくらいあるかを確認できます。

アナリティクスでページビューを確認すると、URLの末尾に ?amp=1 とついているページがあると思います。

それがAMPへのアクセスです。


このAMP設定をしたほうがいいのかしないほうがいいのかについては緒論あるようですが、拙ブログのAMPへのアクセス数をみるかぎり、設定しないと大損こくような気がしています。

そのくらいアクセスが多いです。

AMPにはデザイン設定による広告埋め込み設定は適用されない

アドセンスを利用されている方は、デザイン設定を用いて一括して各記事に同じように広告が挿入されるよう設定されている方が多いかと思います。

わたくしガイコツも然り。


で、先日、ふとした拍子に自分の記事のAMPにアクセスしたんです。そしたら。

広告が無い。

またやらかしたかなと思って色々調べてみると、表題の通り、AMPにはデザイン設定が効かないことがわかりました(気づくの遅すぎ)。

「どげんかせんといかん!」(古

ということで対策しました。

AMPに広告を貼るには各記事にタグを記述する必要がある

はてなブログのAMPに広告を貼る方法は様々なブログが言及していますが、おそらくこの方がパイオニアだと思われます。

https://www.weblog-life.net/entry/hatena_amp_ad

こちらケーさんの記事を多くの方が参考にしています。

わたくしガイコツも参考にさせていただきました。感謝。

頻繁に追記してくださっているので最後まで読んでください。

特に最後の、AMPにCSSを設定できるようになったこと
staff.hatenablog.com
を受けた追記は必見ですよ。


これを参考に書いたタグを、AMPのアクセスが多いページから順にせっせと手動で貼っていくわけです。

結構大変。


AMPにちゃんと広告が貼れているか確認したい場合は、当該記事のURLの末尾に ?amp=1 をつけてアクセスすればOKです。

まとめ…CSSで自動で挿入できるようにして欲しいものだ

色々と苦労しましたが、ある程度アクセスを集めてくれている記事には概ね広告を貼れたと思います。


当ブログ、最初の100記事くらいは「見たまま」で書いていたので、現在使用している「はてな記法」で書いている記事とタグを使い分けなければならない点が大変面倒でした。

AMPに広告が貼れました☆
とにもかくにも現在は↑こんな感じで対策でき一安心といったところです。


AdSenseさんが推奨してくるAMP自動広告は使えないの!? ※18.07.29追記

先日アドセンスさんから、『AMP 自動広告のご紹介』というメールが来ました。

調べてみると、従来のインフィードの自動広告のAMP版のようです。
AdSenseのAMP自動広告


これははてなブログに使えないのか?

結論から言うと、やはり使えないようです。


ただし、もし使えるようになったとしても、従来の自動広告が大変評判が悪い(自分で試してみたところ、非常に不適切な位置に広告を放り込んでくることが多かったです…今後のAIの進化に期待)ので、拙ブログでは、AMP自動広告も様子見ということになりそう。


今のところ、本記事でご紹介した方法でそれほど困ってはいません(過去記事に手動で広告を貼っていくのは苦行でしたが怒)ので、当面この方法でいきたいと考えています。

ちなみに、AMP広告を設定してから、PVとクリック数は2倍以上に増加しています。本当です。


そんなわけで今回はこの辺で。バイキュー☆