はてなブログのAMPページ
はてなブログでは、有料アカウントであるPROになるとページをAMPに対応させることができます。
AMPページは高速にページを表示することが可能で、ユーザにとってすぐに情報を見れるような仕組みでありSEOにも効果がある(対応しないよりはましというレベルだが)と言われています。
そんな有用な機能をはてなブログでは使えることができるのですが、いくつか注意も必要です。
最も注意しなければいけない点は、AMPページではデザインテーマが反映されないという点です。
ただデザインがシンプルになるだけでしょ？と思われる方もいるかもしれませんが、それだけではないのです。
デザインのカスタマイズの設定が効かない
デザインテーマが反映されないということは。。。
AMPページでは、デザインで設定していたカスタマイズの設定が効かないのです。
カスタマイズで設定するものといえば、広告系ですよね。
タイトル下、記事上、記事下、フッター...あらゆる箇所に広告のタグを貼り、毎回記事を作成するたびに広告のタグを入れ込む必要がないようにしておくものでしょう。
ところがこのような設定が効かなくなるため、AMPページで広告を表示する場合は記事の中に毎回広告のタグを貼らなければいけないのです。
面倒ですがAMPは制約が多いので仕方ないですよね。
Google AdsenseをAMPページで反映
広告系のタグの代表格といえばGoogle Adseneseですよね。
よってここではGoogle AdsenseをはてなブックマークのAMPページで反映させる方法を記します。
記法によって微妙に変わるので注意が必要です。
はてな記法の場合
以下のタグを該当箇所に入れ込めばOKです。
ただ、data-ad-clientとdata-ad-slotの箇所はそれぞれのAdsenseのアカウントに応じて値を設定してください。
<amp-ad width="100vw" height=320 type="adsense" data-ad-client="ca-pub-1234567891234567" data-ad-slot="1234567890" data-auto-format="rspv" data-full-width> <div overflow></div> </amp-ad>
Markdown記法の場合
はてな記法の場合とは若干異なりまして、上記のタグをさらにdivで囲むことになります。
<div> <amp-ad width="100vw" height=320 type="adsense" data-ad-client="ca-pub-1234567891234567" data-ad-slot="1234567890" data-auto-format="rspv" data-full-width> <div overflow></div> </amp-ad> </div>
divで囲まないと、上記のコードがそのまま画面に表示されてしまうので注意してください。
Headにamp-adのJavascriptは必要？
基本的にAMPページでGoogle Adsenseを表示させる場合、まずはheadタグ内で以下のコードを入れることになりますよね。
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
はてなブログでもheadタグ内にコードを入れることができるため、上記の1行を入れた方がいいのかな。。。と思うものかと思います。
結論としては上記の1行は入れる必要はありません。
amp-adタグを使用するだけで勝手にAdsenseが表示されるようになっています。
