アドセンスの関連コンテンツのカスタマイズ方法！効果的な関連コンテンツのおすすめレイアウトを大公開！

どうも、@NewsBank7です。

アドセンスにはアクセス数や記事数など一定の条件を満たしたサイトで、「関連コンテンツユニット」という便利な機能を使うことができます。

この関連コンテンツはサイトに設置するだけで端末に合わせてレイアウトを自動調整してくれますが、広告コードを改変することでレイアウトをカスタマイズすることが可能です。

そこでここでは、関連コンテンツをカスタマイズする方法について、わかりやすく解説していきたいと思います。

Googleアドセンスの関連コンテンツが使えるアクセス数(PV)は？利用条件や収益アップ効果を大解説！

2017.02.26

アドセンスの広告コードの改変はポリシー違反

まず前提として知っていて欲しいのですが、アドセンスの広告コードを変更することはアドセンスのポリシーで禁止されています。

ただしいくつか例外もあり、今回ご紹介する関連コンテンツのカスタマイズもその例外の１つです。Googleが許可している公式のカスタマイズなので、ポリシー違反になることはないのでご安心ください。

▶▶アドセンスのレスポンシブ広告のサイズを指定する方法！正方形・横長・縦長に指定できるぞ！

アドセンスのレスポンシブ広告のサイズを指定する方法！正方形・横長・縦長に指定できるぞ！

2018.02.04

関連コンテンツのデザインをカスタマイズする

関連コンテンツはデフォルトの設定では画像とテキストで表示されますが、どのようなレイアウトで表示させるかを好みに合わせてカスタマイズすることが可能です。

テキストのみ表示する

テキストのみで関連記事と広告を表示させるには、「data-matched-content-ui-type=”text”」を広告コードの</ins>内に追加します。

<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-アドセンスID"
 data-ad-slot="########">
data-matched-content-ui-type="text"</ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

「data-matched-content-ui-type=”text”」の部分を「data-matched-content-ui-type=”text_card”」にすることで、カード形式に変更することも可能です。

テキストと画像を横に並べて表示する

テキストと画像を横に並べて表示するには、「data-matched-content-ui-type=”image_sidebyside”」を広告コードの</ins>内に追加します。

<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-アドセンスID"
 data-ad-slot="########">
data-matched-content-ui-type="image_sidebyside"</ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

「data-matched-content-ui-type=”image_sidebyside”」の部分を「data-matched-content-ui-type=”image_card_sidebyside” 」にすることで、カード形式に変更することも可能です。

テキストの上に画像を配置する

テキストの上に画像を配置するには、「data-matched-content-ui-type=”image_stacked”」を広告コードの</ins>内に追加します。

<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-アドセンスID"
 data-ad-slot="########">
data-matched-content-ui-type="image_stacked"</ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

「data-matched-content-ui-type=”image_stacked”」の部分を「data-matched-content-ui-type=”image_card_stacked”」にすることで、カード形式に変更することも可能です。

表示する行数と列数をカスタマイズする

関連コンテンツは上記のレイアウトのカスタマイズに加え、行数や列数をカスタマイズすることも可能です。

関連コンテンツの行数と列数をカスタマイズするには、関連コンテンツの広告コードの</ins>内に以下のコードを追加します。

行数を指定：「data-matched-content-rows-num=”◯”」
列数を指定：「data-matched-content-columns-num=”◯”」

◯のところに指定したい数字を選択することで、関連コンテンツに表示される記事数を指定することが可能です。

ちなみに関連コンテンツで表示できる数は1～30までなので、◯に当てはめる数字は合計で1以上30以内に収めるようにしてください。

＜注意事項＞
行数と列数の設定にはいくつかの制約があります。関連コンテンツユニットに表示できるおすすめコンテンツの合計数は1～30です。表示しようとしているおすすめコンテンツの数が1より少ない場合、または30より多い場合、関連コンテンツユニットには何も表示されません。

状況によっては、指定した数の行と列を表示できないことがあります。たとえば、指定した列数が多いにもかかわらず、関連コンテンツユニットの幅が狭い場合は、ユーザーエクスペリエンスを損なうことなく、そのスペース内におすすめコンテンツが適切に表示されるよう、行数や列数が自動的に調整されます。

アドセンス公式ヘルプ

関連コンテンツの行数と列数を指定するカスタマイズ例を、以下にいくつかのパターン別に紹介してますので参考にしてみてください。

1列×4行で表示する

関連コンテンツを1×4のレイアウトで表示させるには、「data-matched-content-rows-num=”4″」と「data-matched-content-columns-num=”1″」を広告コードの</ins>内に追加します。

<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-アドセンスID"
 data-ad-slot="########">
 data-matched-content-rows-num="4"
 data-matched-content-columns-num="1"</ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

2列×2行で表示する

関連コンテンツを2×2のレイアウトで表示させるには、「data-matched-content-rows-num=”2″」と「data-matched-content-columns-num=”2″」を広告コードの</ins>内に追加します。

<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-アドセンスID"
 data-ad-slot="########">
 data-matched-content-rows-num="2"
 data-matched-content-columns-num="2"</ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

3列×3行で表示する

関連コンテンツを3×3のレイアウトで表示させるには、「data-matched-content-rows-num=”3″」と「data-matched-content-columns-num=”3″」を広告コードの</ins>内に追加します。

<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-アドセンスID"
 data-ad-slot="########">
 data-matched-content-rows-num="3"
 data-matched-content-columns-num="3"</ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>

スマホでは1列×4行でPCは2列×2行で表示する

関連コンテンツを1×4のレイアウトで表示させるには、「data-matched-content-rows-num=”4,2″」と「data-matched-content-columns-num=”1,2″」を広告コードの</ins>内に追加します。

<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-アドセンスID"
 data-ad-slot="########">
 data-matched-content-rows-num="4,2"
 data-matched-content-columns-num="1,2"</ins>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({});
</script>