Follow @papepo100
    

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

SNS連携
0 0 2016/10/09
FC2ブログからTwitterに画像付き記事をツィートしてみたところ、簡単にできました。詳しくはコチラを参考にするとよいと思います。※メタタグの設定はtwitter:cardとtwitter:siteだけで十分です。また、Twitter Cards Validatorでの承認は特に必要なかったような。。Twitter Cards Validatorは別の目的で使っています。
twittercard0.pngところが自分のPCで見る限りは、左図のようにちゃんと表紙の画像とタイトル、省略された説明文が表示されているのにもかかわらず、「画像とタイトルだけでなく内容もつぶやいて」との反応がありました。
twittercard4.pngなんでかな?と思って確認してみたら、どうやらスマホではdescriptionで指定されている箇所を表示していないようですね。 他の人はキャッチ―な感じにする為に長いタイトルにしている人が多いからあまり気にならないのかな。 Twitterのユーザってスマホが多いんじゃないの?スマホでの表示を重視して欲しいのに。。そもそもtitleは通知文に表示されてるし。。 とはいってもTwitterの仕様なので仕方ありません。あまりきれいではないですが、以下の対処をしました。
TwitterCard対応の際にテンプレートの<head>~</head>内に記述したtwitter:cardとtwitter:siteに加え、次の赤字部分を追加します。
<!--topentry-->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@自分のTwitter ID">
<meta name="twitter:title" content="<%topentry_description>">
<!--/topentry-->"

これはFC2に限った記述の仕方ですが、他のブログサイトでもtwitter:titleに同様の変更を行うことで対応可能です。要はtwitter:titleにdescriptionを設定してしまうという事です。
twittercard5.png結果はこのようになりました。
PCの方には説明文が重複して見えてしまっていますが、スマホの方には変更前はタイトルが入っていた箇所に説明文が表示されています。ここはスマホでの見栄えを優先しておきます。。。
ん?画像が変に切れてる。。なんじゃこりゃ?

画像をもう少しきれいに見せる方法は次回の記事で説明します。

参考URL
このエントリーをはてなブックマークに追加

コメント

非公開コメント