はてなブログでAMP用の広告を入れる場合の注意

はてなブログでは、AMPの広告を表示できるようになっています。

www.miler-nabj.com

AMPは、GoogleなどのWeb業界各社が推進している、モバイル端末のWebコンテンツ表示を高速化する仕組みです。

はてなブログで使用する場合は、

管理画面 → 設定 → 詳細設定 にある、

↓こちらの項目にチェックを入れます。

AMP:ベータ版機能: Accelerated Mobile Pages (AMP) を配信する ・・・

今のところ、広告用のコードは、各記事の中に個別で記述しないとダメみたいですね。

そして、Google Adsense の AMPの自動広告 から取得したコードをはてなブログに貼ろうとすると、

<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<amp-auto-ads type="adsense" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"> </amp-auto-ads>

amp確認用のページ(?amp=1 を付けた状態)で、確認すると表示されませんでした。

そこで、タグにある「auto 」を消したら正常に表示されました。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script> <amp-ads type="adsense" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"> </amp-ads>

はてなブログでは、「amp-auto-ads」には、まだ対応していないのかな?

ちなみに、ブログの形式が markdown方式の場合、AMP用の広告を<div></div>タグで囲んでおくと良いようです。

どのように広告が表示されるかは、このページのURLの最後に、「?amp=1 」を付けると、この記事の上と下に広告の表示が確認できます。

https://titirobo-develop.hatenablog.jp/entry/2018/11/23/081925?amp=1