Nekonote

Nekonote（ねこのて）もかりたい

トップ > はてなブログ > 【AdSense】AMP 配信されたページに AdSense の広告を貼る方法

【AdSense】AMP 配信されたページに AdSense の広告を貼る方法

はてなブログ 技術
このエントリーをはてなブックマークに追加

いちにち、おつかれさまです。

f:id:herrscherinnen:20190509214108p:plain

今日は、AMP 配信 されたページに Adsense を載せる方法を紹介します。

はまりどころが とても多い です !!!!=͟͟͞͞(๑ò◊ó ﾉ)ﾉ

対象

はてなブログ で AMP 配信 を検討されている方

結論

はてなブログで AMP 配信 されたときに、
AdSense の 広告 を表示するには、以下のコードが必要です。

<center>
  <amp-ad
    layout="fixed"
    width=300
    height=250
    type="adsense"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxx">
      <div overflow></div>
  </amp-ad>
</center>

また、 記事 に貼ったものだけが、機能します。

これが、現状のサポート範囲で最適だと判断しました。

説明

はまりどころ を並べます。

  • はてなブログ 関連

    • AMP 配信 でユーザが指定した ヘッダ を使ってくれない
    • AMP 配信 でユーザが指定した デザイン を使ってくれない
    • AMP 配信 のプレビューを デザイン画面 で表示できない

  • Google AdSense 関連

    • 推奨されるコードでは、広告がはみ出てしまう
    • 紹介されている修正方法では、広告が左に張り付いてしまう

AMP 配信 でユーザが指定した ヘッダ を使ってくれない

デザイン設定でカスタマイズできるサイドバーモジュールや、
HTMLの自由記述（記事上下、ヘッタ、フッタなど）は配信されません。

AMP（Accelerated Mobile Pages）を使用する - はてなブログ ヘルプ

つまり、bodyタグ で 記事に共通なところは、まったく使えません ↷( ó╻ò)

AMP 配信 でユーザが指定した デザイン を使ってくれない

記事中のJavaScriptは反映されません（このため広告などが表示されないことがあります）

AMP（Accelerated Mobile Pages）を使用する - はてなブログ ヘルプ

これは、headタグ の設定 を無視することを指しているようです。

つまり、headタグ の中も、まったく使えません ↷( ó╻ò)

つかえれば、amp-script に可能性がありそうでした。
詳しくは こちら です。

amp.dev

AMP 配信 のプレビューを デザイン画面 で表示できない

記事編集画面（PC版）の「プレビュー」タブで、「スマートフォン (AMP)」タブに切り替えて、AMPでの表示をプレビューすることができます。

AMP（Accelerated Mobile Pages）を使用する - はてなブログ ヘルプ

昨日は、これにやられました ꉂꉂ(ᵒƐ ᵒ ๑)

なぜか、設定した画面 と違うところで確認するとのこと。

しかも、設定を保存しないと確認できません… ↷( ó╻ò)

失敗するたびに、見てくれている人に迷惑が… ↷( ó╻ò)

推奨されるコードでは、広告がはみ出てしまう

AMP 対応広告ユニットの作成方法 - AdSense ヘルプ

確認したところ、Amp 配信 では 左右に自然な余白がありました。

こちらの 推奨コードには width に 100vw が指定されているため、 広告の一部が、見えない位置にはみ出て表示されます ↷( ó╻ò)

また、単純に 100vw 以外に設定するとエラーになります ↷( ó╻ò)

後続の項目で解決しています。

紹介されている修正方法では、広告が左に張り付いてしまう

Google AdSenseでは、100vw から変える方法も紹介されています。

レスポンシブ AMP 広告コードを修正する方法 - AdSense ヘルプ

ですが、左に貼りついて、あまり見栄えが良くありません ↷( ó╻ò)

center タグで解決しています。

  • width=300 について
    • 横幅 240px の端末は少ないはず
    • 横幅 320px からをフォロー
    • 横幅 320px のとき、左右の余白は 10px ずつ

スマホでは、スクロールバーが 16px 場所をとることはありません。
そのため、幅が 320px の端末では、これでぴったりになります。

まとめ

すべてのページに共通する HTML を設定できる箇所がないため、
広告のコードを1か所にすることはできませんでした。

すべてのページに共通する JavaScript を設定できる箇所がないため、
広告を動的に差し込むこともできませんでした。

そのため、

AMP配信 での広告は、記事ごとに貼り付けていくしかありません。

また、AdSense の広告は、大きさとデザインに注意が必要です。

AMP 配信 について、はてなブログ の機能拡張が待ち遠しいです。


困りごとばかりを書きましたが、
AMP 配信 の設定は簡単で、効果も大きいです。

developers.google.com

こちらで測定したら 66 → 28 まで、急激にスコアがあがりました。

SEO にもいい影響がありそうです ( ๑╹ω╹๑ )


読んでくれて、ありがとうございます！

おわり
おすすめ 記事