ウェブと食べ物と趣味のこと

格安SIMのこと、windows10、迷惑メールネタ、写真ネタなど。困った方の参考になる記事を心掛けます。

【朗報】はてなブログでamp-adタグが入るようです【AMPでAdsense】

スポンサードリンク

f:id:photoblg:20161123223140j:plain

追記:2017/5/7

はてなブログのAMPはβ版ということで広告が入らないと思っていたのですがどうやら入るようです。






きっかけはTAKUMI SHIROMAさんのこのツイート

以前、既に試していたのでダメだと思っていたのですが、まさかMarkdownがダメだったとは・・・

タグは以下の通り。

<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-XXXXXXXX"
data-ad-slot="XXXXXX">
<!-- adsense -->
</amp-ad>

追記(22:24)

<amp-ad ~></amp-ad>の間にコメントアウトなど何か入れないと消えてしまうようです。上記タグ修正しました。

※見たまま投稿のHTML編集の場合のみコメントアウトが必要なようです。Markdownやはてな記法の場合は間のコメントなしでも大丈夫です。


以下の部分のみ差し替えでOKです。

data-ad-client="ca-pub-XXXXXXXX"
data-ad-slot="XXXXXX"

AMPページはURLに?amp=1を付与するだけで確認可能です。このページはここでチェック可能です。

AMP設定している場合、記事プレビューでも表示確認できました。

f:id:photoblg:20161123223954p:plain

追記(23:25)

Markdownでも表示できました。Markdownの場合は<div></div>で囲むと出ました。恐らくpタグでも何でも良いのでタグで囲めば表示されると思われます。

<div>
<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-XXXXXXXX"
data-ad-slot="XXXXXX">
</amp-ad>
</div>

f:id:photoblg:20161123232727p:plain


今までAdsenseが入れられなくてAmpを避けていた方はこの機会にいれてみてはどうでしょうか?

2016/11/23現在、デザイン設定の記事上やフッターに書いた場合は反映されないようです。

※記事ごとに入れるのはちょっと手間だな・・・

www.weblog-life.net


きっかけのきっかけになった、「このブログ」さんにも感謝です!

sore.konoblog.com

まとめ

まず現状、デザイン設定での埋め込みでは表示できません。記事内に直接追加〜表示が確認できました。

あくまで?amp=1のパラメーターが付いた記事だけの話ですので、AMP経由でのトラフィックが多い記事だけ入れるのがよいでしょう。

投稿別の記述方法を以下の通りです。

見たまま

「見たまま」投稿で記事を書いている方はHTML編集に以下のタグを入力。ポイントはamp-adタグの間にコメントアウト。

<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-XXXXXXXX"
data-ad-slot="XXXXXX">
<!-- adsense -->
</amp-ad>

はてな記法

はてな記法は間のコメントアウトなしで表示されます。

<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-XXXXXXXX"
data-ad-slot="XXXXXX">
</amp-ad>

Markdown

Markdownはそのまま記述するとタグが表示されてしまうので、HTMLタグで囲むと表示されます。

<div>
<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-XXXXXXXX"
data-ad-slot="XXXXXX">
</amp-ad>
</div>


f:id:photoblg:20161124174200p:plain

追記

この記事を書いた時点ではCSSの設定などが用意されていませんでしたが、現在は【デザイン】ー【スマートフォン】ー【詳細設定】よりAMP用CSSが設定可能になっております。

広告もわたしの環境では(表示、収益化)反映されています。

CSSについてはざっくりはスマホ用のCSSをそのまま入れると表示上は反映されますが、制約がいろいろあるためAMPテストツールでチェックしながらの追記をオススメします。

広告は、スマホアクセスの多い記事に絞って、以下のように入れています。

<div class="amp-ad">
<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-XXXXXXXX"
data-ad-slot="XXXXXXX">
</amp-ad>
</div>

CSSは以下のようにしています。

.entry-content .amp-ad::before {content: "スポンサードリンク";font-weight: bold;text-align: center;}

これでPCや通常のスマホアクセス時の表示に影響なく広告を挿入することが可能です。

気になる方は当ブログの記事ページに「?amp=1」を追加して確認してみてください。




なお、この記事の内容は非公式ということと、動作保証はできませんので、ご利用する際は自己責任でお願い致します

追記(2017/5/7)

非同期の広告ユニットを記事に直接記載した場合、自動でamp-adに変換されるようです。詳しくは以下の記事を参考にしてみてください。

はてなブログのAMPでは、アドセンスのコード(非同期)を自動変換する - わたしと納豆ごはん