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

読者です 読者をやめる 読者になる 読者になる

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

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

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

はてな

スポンサードリンク

f:id:photoblg:20161123223140j:plain

追記:2016/11/25

はてなブログの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>

追記

この記事で紹介したタグを挿入した場合、広告は表示されますが、はてなブログではamp-adのスクリプトが読み込まれていないため、バリデーション警告が出ている状況です。

しばらくはこのままでも表示できますが、amp-adのスクリプトを読み込んでいない場合将来的に表示できなくなる可能性があります

はてな側で対応してくれればよいのですが、今のところscripttタグは記事内に挿入しても反映されません。ご利用する際は自己責任でお願い致します。

さらに追記

確認したところ、amp-adのスクリプトは読み込まれているようです。ただ、非公式ということと動作保証はできませんので、ご利用する際は自己責任でお願い致します


f:id:photoblg:20161124174200p:plain

さらに追記

【朗報】はてなブログでamp-adタグが入るようです【AMPでAdsense】 - ウェブと食べ物と趣味のこと

記事の趣旨はわかるが『広告テスト↓↓』の辺りは実際のタグじゃなくスクショとかにしとかないとAdSenseの規約的に不味そう。<"矢印またはその他の画像やレイアウトを使用して、広告にユーザーの注目を集めること。"

2016/11/24 12:27
b.hatena.ne.jp

広告部分の表記を削除しました。ご指摘ありがとうございます。

参考記事

www.suzukikenichi.com

スポンサードリンク