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-typeをimage_card_stackedにしている点がミソです。
コンテンツ同士の境目がくっきりしているのでデザイン的にはimage_stackedの方が好きなのですがタイトルが切れてしまう問題が発生するので避けています。