ANAじゃなくてJALで陸マイラー ~not ANA but JAL~

ANAに比べると少し貯めにくいJALマイルも工夫をすれば年間10万マイル以上貯められる様になります。 ポイントサイトやクレジットカードの話を中心にJALマイルの貯め方を発信しています。

はてなブログのAMPでGoogleアドセンスを表示したら収益が増えた!

はてなブログのAMPでGoogleアドセンスを表示したら収益が増えた

皆さんのブログは「Accelerated Mobile Pages(AMP)」に対応していますか?

そして、

ブログ記事がAMP版で表示されている時にもGoogleアドセンスの広告がちゃんと表示されていますか?

AMPは、モバイル端末でWebコンテンツを素早く表示することに特化したWebコンテンツ用のフレームワーク(AMP HTML)です。

このAMPに対応したWebコンテンツは、本当に瞬時に表示されますから、モバイルユーザーにとっては素晴らしい技術ですね。
それによって、モバイル端末でのブログ閲覧の増加も期待できそうなので、ブロガーとしても注目すべきものだと思います。

はてなブログProなら、簡単な設定でAMPに対応することができるので、当ブログもAMP対応に設定してあります。

でも、ある時、

自分のブログ記事のAMP版を確認していたらGoogleアドセンスの広告が表示されていない事に気が付いたのです。

「これは、非常にマズイ」

と思いました。

当ブログのアクセスの約60%はモバイル端末からなので、モバイル向けのAMPで広告が表示されなければ、せっかくのGoogleアドセンスが活かしきれていない事になってしまいます。

このままではマズイので、AMPでもGoogleアドセンスの広告が表示されるように対策をしました。

【目次】

スポンサーリンク

Accelerated Mobile Pages(AMP)とは

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

AMPのWebコンテンツを構成するフレームワーク「AMP HTML」では、JavascriptやCSSなどの使用に大きな制限をかけることで、Webコンテンツの読み込みを高速化しているそうです。

つまり、デザインのカスタマイズなどリッチな表現を犠牲にしてでも、ユーザーのモバイル端末にコンテンツを出来るだけ素速く表示することに特化した仕組みです。

このAMPに対応したWebコンテンツは、スマホなどのモバイル端末でGoogle検索をした際に表示される検索結果一覧に「AMP」と表示されています。

Google検索でAMP表示

この「AMP」マークが付いているWebページは、本当に瞬時でページが開きますので、驚きです。

その一方で、AMPではJavascriptやCSSなどの使用に大きな制限がかけられているので、表示されるページはとてもシンプルなものになります。

はてなブログでは、記事の編集画面の「プレビュー」でAMP版の表示を確認することが出来ます。
そのプレビューで当ブログの「通常のスマホ向け表示」と「AMP版の表示」を比較するとこんな感じです。

こちらが通常のスマホ向け表示。

通常のスマホ向け表示

そして、同じページのAMP版ではこんな表示になります。

はてなブログAMP版の表示

見出しのデザインが無く、記事本文を枠線で取り囲んだ装飾も無い、とてもシンプルな表示になっています。

このAMPに対応することでSEO効果があるかは定かでは無いようですが、Googleが取り組んでいることなので、対応しておいて損は無いんじゃないかと思います。

はてなブログのAMP対応は簡単

はてなブログでは、有料プランの「はてなブログPro」に加入していれば、簡単な設定をするだけでブログ記事をAMPでも配信することができます。

「設定」で「詳細設定」のタブを選び、

「設定」の「詳細設定」

下にスクロールすると、「Accelerated Mobile Pages (AMP) を配信する」という項目があります。

Accelerated Mobile Pages (AMP) を配信する

この項目にチェックを入れて、「変更」するボタンを押したら設定は完了です。

これで、はてなブログの記事がAMPでも配信される様になります。

AMP用のCSSが設定できる

AMPでは、通常のCSSが反映されないので、見出しのデザインなどのカスタマイズが適用されず、とてもシンプルな表示になりますが、別途、AMP用のCSSを設定することが出来る様です。

はてなブログProでAMPを設定すると、「設定」の「デザイン」の「スマートフォン」タブの「詳細設定」に「AMP用CSS」欄が表示されます。

AMP用CSS

ここにAMP用のCSSを記述すればAMP版のブログデザインをカスタマイズできるようなのですが、AMP用のCSSがどういうものなのかが分っていないので、今後、勉強をしてからチャレンジしたいと思います。

AMP版の注意点

はてなブログでAMPを利用する際には、次のような注意点・制約があります。

  • はてなブログのデザインテーマは反映されません
  • デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)は配信されません
  • 記事中のstyle属性など、スタイル関連のHTMLは反映されません
  • 記事中のJavaScriptは反映されません(このため広告などが表示されないことがあります)
  • (HTTPSでなく)HTTPで配信されている画像は表示されません(はてなフォトライフやInstagramなどはHTTPSに対応しています)
  • AMPではページ上部にあるiframeの表示に制約があるため、例えば記事の先頭にブログカードを配置したときには表示されません

この中の、

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

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

この2つが問題です。

はてなブログでGoogleアドセンスの広告を表示する方法として、JavaScriptを使って記事中や記事後に広告表示を自動挿入している人が多いんじゃないでしょうか?

記事を書く度にGoogleアドセンスの広告コードを埋め込むのは面倒ですからね。
私もそうしています。

AMP版では、そのGoogleアドセンスを自動挿入するJavaScriptが効かないので、自動的に広告が挿入されません。

そもそも、AMPでは、通常のGoogleアドセンスの広告コード(JavaScript)では反映されないので広告が表示されません。

つまり、何も対策をしないとAMP版ではGoogleアドセンスの広告が表示されないのです。

AMP版でGoogleアドセンスを表示する方法

Googleアナリティクスによると、当ブログへのアクセスの約60%がモバイル端末からなので、モバイル向けのAMP版で広告が表示されないのは、アドセンスの収益的に大きなマイナス要因になっている可能性が大です。

せっかくのGoogleアドセンスを活かすために、AMP版でも広告が表示されるように対策します。

はてなブログのAMP版でGoogleアドセンスの広告を表示するには、

AMP用の広告コードを作成して、

その広告コードを記事に埋め込みます。

AMP用の広告コードを作る

まずは、AMP用の広告コードを作ります。

その作成手順は、

  1. Googleアドセンスで広告ユニットを作って、
  2. 1で作った広告ユニットの広告コードの一部を使って、AMP用の広告コードをつくります。

表示する広告毎の収益性を把握するために、表示する箇所毎にAMP用の広告コードを作っておくのが良いと思います。

私は、「最初の見出しの前」と「記事の最後」の2つの広告コードを作りました。

広告ユニットを作る

Googleアドセンスの管理ページで、「広告の設定」>「広告ユニット」>「新しい広告ユニット」と進み、レスポンシブ広告ユニットを作成します。

作成した広告ユニットで「コードを取得」をすると、この様な広告コードが出来上がります。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ここで取得した広告コードの

data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx" 

この2つの部分をこの後で使います。

AMP用の広告コードを作る

作成した広告ユニットの広告コードの一部を流用して、AMP用の広告コードを作ります。

AMPでアドセンスの広告を表示するための広告コードがこれ。

<div>
<amp-ad layout="responsive" width="300" height="250" type="adsense" data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"> <!-- adsense --> </amp-ad>
</div>

編集モードが「見たままモード」の場合は、コピペで使えます。
(当ブログでは「見たままモード」で記事を作成しているので、見たままモードの場合で説明しています。Markdown記法でもコピペで使えそうです。はてな記法の場合は広告コードを<div>タグで囲む必要が無いみたいです。)

このコードの
client="ca-pub-xxxxxxxxxxxxxxxxxxx"

data-ad-slot="xxxxxxxxxx"
の部分に、

先ほど作った広告ユニットの文字列を代入します。

これで、AMP用の広告コードは完成です。

スポンサーリンクを表示するタグを追加

AMP版で広告を表示する際にも、Googleアドセンスの利用規約が適用されますから、お決まりの「スポンサーリンク」を表示する必要があるので、そのタグを追加します。

スポンサーリンク表示のタグを追加したAMP用の広告コード一式がこうなります。

<div class="amp-ad-title">
<center>スポンサーリンク</center>
</div>
<div>
<amp-ad layout="responsive" width="300" height="250" type="adsense" data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"> <!-- adsense --> </amp-ad>
</div>

 

記事にAMP用の広告コードを貼り付ける

作成したAMP用の広告コードを、ブログ記事の編集ページの「HTML編集」で、表示させたい箇所にコピペして埋め込めばAMP版でGoogleアドセンスの広告が表示される様になります。

今のところ、記事中に自動で挿入する方法は無さそうなので、面倒ですが記事毎にHTML編集で広告コードをコピペして埋め込みました。

このAMP用の広告コードは、AMPでしか表示されないタグなので、PCや通常のスマホ向けでは表示がされません。
よって、自動挿入している広告と重複して表示されることはありません。

ただし、

スポンサーリンクを表示するために追加した、

<div class="amp-ad-title">
<center>スポンサーリンク</center>
</div>

このタグは、このままだとPCや通常のスマホ向けでも表示されてしまい、「スポンサーリンク」が重複して2つ表示されてしまうので、その表示を消すコードを設定しておきます。

AMP用スポンサーリンク表示を通常ページで消す設定

このコードを、

<!-- AMPスポンサーリンクを通常で消す -->
<style type="text/css">
.amp-ad-title { display: none};
</style>

「デザイン設定」>「カスタマイズ」>「ヘッダ」>「タイトル下」に設定します。

スマートフォン用にHTLMを設定している場合には、「デザイン設定」>「スマートフォン」>「タイトル下」にも設定します。

これで、PCや通常のスマホ向けで「スポンサーリンク」が重複して表示されることはありません。

AMPでGoogleアドセンスが表示され収益増加

これでAMP版の記事でもGoogleアドセンスの広告が表示されるようになりました。

AMP版でもアドセンスが表示されるようになった

表示されるようになってからは、明らかにGoogleアドセンスの収益が増えています!

もっと早く気づけば良かった、、、

もし、まだAMP版でGoogleアドセンスの広告表示をしていない人は、是非、対策することをおすすめします。

ここで書いた対策方法は、Googleアドセンスのヘルプページを基に、私がネット検索で情報を収集しながら実行したものなので、適切ではない部分があったり、もっと良い方法があったりするかも知れませんので、その点をお含みおきください。

今後は、AMP用のCSSについて勉強して、AMP版のデザインのカスタマイズにチャレンジしようと思います。

スポンサーリンク