【はてなブログ】AdSenseの関連コンテンツユニットをAMPに対応させて直帰率改善。

AMP対応関連コンテンツユニットのイメージ01

ガジェレポ！@gadgerepoです。こんにちわ。

2017年10月から当ブログは「Accelerated Mobile Pages（以下、AMP）」化しています。

AMPについての説明はコチラの記事をご参照ください。

www.gadgerepo.com

AMP化されたページでは、必要最小限に留められた専用タグやHTMLコードで構築することでアクセス時の読み込みを高速化しています。

そのため、Google AdSense の広告ユニットもまた通常とは異なる<amp-ad>タグで表示させることができますが、同様の方法で『関連コンテンツユニット』もAMP化されたページで使えるようです。

今回はその方法を、自身への備忘録も兼ねて記録に残しておきたいと思います。

AMP化ページは直帰率が高くなる！？

AMP化されたページは、モバイル端末から対応するサービス経由でアクセスすると、表示が高速化され一瞬で読み込まれるというのが利点です。

これは、GoogleやTwitter・はてなブックマークといったAMPに対応するサービス側が、ページのキャッシュを保存することでアクセスを減らしているという点、

そして、CSS等に制限をかけることで極力装飾を減らし、ページ自体を軽くしている点が要因となっています。

しかし、この「極力装飾を減らしている」ことが、サイトの直帰率を高める原因とも言えます。

コチラ、当ブログのAMP化されたページをご覧ください。

http://www.gadgerepo.com/entry/2016/09/04/020331?amp=1

ご覧いただいたとおり、当ブログにPC あるいは通常のリンクからアクセスしたモバイル端末で閲覧した場合だと表示されるサイドバー、そしてページ下部に表示される関連コンテンツが、AMP化されたページでは表示されません。

当ブログでは、サイドバーに「新着記事」や「筆者オススメの記事」「直近の人気記事」を、そして記事の読み終わりに「関連するコンテンツ」を掲載していますが、これはサイトの回遊率を高め、直帰率を低くするという意図があります。

ところが、AMP化されたページではこれらが表示されず、視覚的に次の記事へ誘導する仕組みが通常より弱くなっています。

モバイルユーザビリティ向上のためのAMPですが、サイト運営者にとってはありがた迷惑な仕様ですね。

「なんとかならないものか……。」と調べてみたところ、お馴染みGoogle AdSense の広告ユニット、その中の『関連コンテンツユニット』がAMP化されたページでも表示することができる、とのこと。

さっそく試してみました。

AMP用「関連コンテンツユニット」の表示方法

AMP用「関連コンテンツユニット」は、通常のAMP用広告ユニットを改変することで作成可能です。

Google AdSense のAMP用広告ユニットについては、ケー (id:photoblg)さんがコチラの記事で詳しく解説しておられます。

www.weblog-life.net

それでは、AMP用「関連コンテンツユニット」の表示方法。

まず、AMPページにAdSense の広告ユニットを表示させるには、以下のコードをはてなブログの管理画面から「設定」→「詳細設定」→「検索エンジン最適化」の「headに要素を追加」に貼り付けます。


<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

続いて AdSense の広告設定へ。

通常どおりに AdSenseから「新しい広告ユニット」→「関連コンテンツユニット」を選ぶと、次のようなコードが作成されます。


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

しかし、このまま記事中の表示させたい場所へコードを貼り付けても、AMPエラーで表示されません。

<amp-ad>タグで囲んだAMPに対応する「Google AdSense 広告ユニット」、こちらの「data-ad-client」と「data-ad-slot」の2つの値を「関連コンテンツユニット」のものに差し替えれば、AMPページでも表示されます。

具体的には、取得した「関連コンテンツユニット」コード中「data-ad-client」のXXXXXXXXXXXXXXXXと、「data-ad-client」のXXXXXXXXXXをそれぞれコピーし、


<div>
<-- AMP用関連コンテンツ -->
<amp-ad
layout="fixed-height"
height="500"
type="adsense"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX">
</amp-ad>
</div>

コチラの「AMP用関連コンテンツ」コード内の「data-ad-client」と「data-ad-client」にペーストすればOK。

出来上がったコードを記事内の表示させたい部分に貼り付ければ、関連コンテンツが表示されているはずです。

関連コンテンツの「広告で収益化」が有効であれば、広告収益の増加が期待できる点もウレシイですね。

どのように表示されるかは、当ブログのAMP化ページとなるコチラをご参照ください。

http://www.gadgerepo.com/entry/2018/05/15/001551?amp=1