Xでリンクをポストをする際、画像と見出しを両方表示する方法

Xの最近の仕様変更で、ポストのリンクが画像なのかリンクなのか、パッと見た時にわかりにくくなりました。

なんとかしたい...(๑╹ω╹๑ )

ということで、解決策を編み出しました。

Summary Card with Large Imageでなく、Summary Cardを使う

 <meta content='summary_large_image' name='twitter:card'/>と書いている部分を、

 <meta content='summary' name='twitter:card'/>

に書き換えます。

リンクと一緒に表示したい画像の部分は、

<meta content='ここに画像URL' name='twitter:image'/>

のような感じで指定すればOKです。

Blogger使いの人はこんな感じのコードになります。

※投稿に写真がない場合、サムネイルの画像URLを出す分岐を入れています。コピペの際はこのURLを変更してくださいね。

表示結果

PCから見ると、こんな感じ。

スマホアプリから見るとこんな感じになります。

画像サイズは小さくなるものの、はっきりリンクだとわかるようになりました。

まとめ

表示の仕様変更って面倒ですね。

これを逆手にとって、写真と見せかけてリンクを踏ませるスパム誘導も発生しているらしいです。

とりあえず当面はこの手法でわかりやすくリンクを入れておきたいと思います。