Follow @papepo100
    

TwitterCardをスマホで見るとDescriptionが表示されないことの対処法-続き

SNS連携
0 0 2016/10/14
twittercard10.png 前回の記事でスマホのTwitterCardにdescriptionを表示するための対処法を書きました。その際、descriptionが表示される代わりに、画像が変に切り取られてしまう現象が発生しました。今回はその対処法について試した結果を記述します。
まずは以下の3つのアプローチで、改善がみられるか検討することにしました。
  1. summaryカード以外のTwitterCardを使う
  2. FC2での連携以外の方法でTwitterに投稿する
  3. Twitterに送るdescriptionの文字数を減らす
1 . TwitterCardの公式ガイドによるとTwitterCardには7つのタイプがあるそうなので、大きな画像付きのSummaryカードとGalleryカードが可能性がありそうなので試してみました。
twittercard6.png
大きな画像付きのSummaryカード:
Summary画像の切り出し方がこちらの意図にあわずダメそうです。画像を縦長に表示する方法はないのかと調べてみたらこのページを見つけました。どうやら以前はPhotoカードで縦長の画像を表示することができたのですが、既に廃止されているようです。

Galleryカード:
結局、Photoカード以外にGallery,Productカードも廃止との記事がありました。。ちなみに英語のガイドではすでにカードタイプは4つになっています。

画像サイズを小さくしたり、画像の下部に余白を入れたりもしてみましたが、Twitter側でカードタイプにあわせて画像をトリミングしてしまうので、無駄なようです。
2. 次に「IFTTT」「Buffer」「Taberareloo」でTwitterに投稿する方法を試してみました。

IFTTT:
FC2から投稿したのと同じ形で表示されてしまう。

Taberareloo:
PhotoでTwitter投稿とするとエラーになる。

Buffer:
PC上では何故か下図のように縦長の画像が表示され、いい感じだったが、スマホでは大きな画像付きのSummaryカードと同じようになってしまった。。おしい。なお、BufferはOGP設定のog:titleからメッセージ表示箇所を取得しているので、環境設定のOGP設定を無効にし、テンプレートで以下のようにOGP設定を手動で登録しました。
<!--topentry-->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@自分のTwitter ID">
<meta property="twitter:title" content="<%topentry_description>">
<meta property="og:site_name" content="<%blog_name>">
<meta property="og:title" content="<%topentry_description>">
<meta property="og:type" content="blog">
<meta property="og:description" content="<%topentry_description>">

<!--/topentry-->
twittercard12.png
3 .最後に<%topentry_description>の内容を短くする方法ですが、このブログの環境ではJavascriptしか使えず、しかも調べてみたところJavascriptでは動的なOGPの変更は反映されないそうです。 こちらの意図にあう対応方法はなさそうだなと思っていたところ、たまたま、descriptionが「...」だけになっている自分のTwitter記事があることに気づきました。よく見てみるとその記事には壊れたhtmlタグ(例えば<a href<></a>)が記事の頭に入っていました。ブログの記事上はそのタグは無視されて表示されていないのですが、<%topentry_description>ではそのタグ以降が「...」になってしまっていたのです。そこでこれを利用してdescriptionを切ることにしました。
後になってスマホのブログ記事では壊れたタグがそのまま表示される(スマホの<%topentry_body>の中で出力するように変換してしまっている)事に気づいたので、不要な文字を非表示にする為、「<div style="display:none"><</div>」を使用しています。
twittercard9.pngようやくイメージに近い形でTwitterCardが表示されました。FC2のみでの対処法になってしまいましたが、PHP等を使える環境であればもっときれいな形でできると思います。

※方法を変えました。後日記事にします。
スポンサーサイト
このエントリーをはてなブックマークに追加

コメント

非公開コメント