(O+P)ut

OutPut Log by SE in SIer



(O+P)ut

Output Log by SE

GoogleAdSenseの関連コンテンツにてタイトルが切れる問題の解決法

スポンサーリンク

環境情報

  • はてなブログ
  • 添付位置はフッター

現象

Googleアドセンスの関連コンテンツをデフォルトのコードのままフッターに貼ったところ

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

タイトルが途中で打ち切られ「...」となる。

ポイントは

  • 広告のタイトルは全て表示される
  • タイトルのどこから打ち切られるかはタイトル毎に違う

以下、観測した例です。

本来のタイトル 表示されるタイトル
【RHEL7】OpenVPNでクライアント接続する 【RHEL7】OpenVPNで...
opensslコマンドで「unable to load certificate」とエラーが出る opensslコマンドで「unable to load certificate...
【入門】マイクロLEDと有機ELの違い 【入門】マイクロLEDと...
「決めの問題」の意味 「...

最後の例は二文字目から ... に置き換わってしまっています。

デフォルトだとパソコン版の関連コンテンツの表示形式は以下のようです。

image_stacked

ちなみに、この事象はスマホからのアクセスでは発生せずにパソコンからのアクセスのみで発生しました。さらに、パソコンからのアクセスでもブラウザによって発生しないものもありました。

観測した範囲ではFirefoxとGoogleChormeでは少なくとも表題の事象が起こります。

解決策

パソコンでの表示形式を明示的に

image_card_stacked

に変更すると全文表示されるようになりました

参考までに修正後のコードを添付します。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-XXX"
     data-ad-slot="XXX"
     data-matched-content-ui-type="image_sidebyside,image_card_stacked"
     data-matched-content-rows-num="8,2"
     data-matched-content-columns-num="1,4">
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

このコードでは、スマホ版では横1列縦8列で関連コンテンツを表示し、パソコン版では横4列縦2列で関連コンテンツを表示します。
パソコン版のdata-matched-content-ui-typeimage_card_stackedにしている点がミソです。
コンテンツ同士の境目がくっきりしているのでデザイン的にはimage_stackedの方が好きなのですがタイトルが切れてしまう問題が発生するので避けています。

所感

ネットで検索しても同事象の解決策が見当たらなったので、そもそもこのような事象はかなりピンポイントな条件のみで発生するのかもしれません。

同様の事象が発生する方がいるのかどうかすら不明ですが、もしおられたら参考になると思い記事にしておきます。

以上、関連コンテンツの記事名が表示されない問題の解決策でした。


他の記事を読む