Twitterカードの仕様を理解して、はてなブログのTwitter通知の見映えを良くする。

はてなブログの予約投稿で「Twitterに投稿」機能をつかって自動ツイートした時に残念に思う時はありませんか？

こんなのとか...

こんなのとか...

もうちょっとなんとかならないものでしょうか？

ちょっと調べてみました。

Twitterカード

この画像とキャプションがついているのは「Twitterカード」と言うそうです。

基本的には2種類ありました。

画像が正方形で横長の表示タイプです。

この場合の画像は、144x144から最大4096x4096ピクセルになります。

画像が横長の大きな表示タイプです、はてなブログもこちらですね。

この場合の画像は、2：1で、横300から最大4096ピクセルになります。

つまり横：縦＝2：1の画像にすればいいということです。

はてなブログでは「アイキャッチ画像」がこの設定画像になります。

今回はこの画像をアイキャッチにしてみます。四隅にマークをつけているのできっちり表示されているかがわかると思います。

うまくTwitterカードで表示できるでしょうか？

Twitterカードの表示はここから確認できます。

おっと、すこしトリミングされるようです。

実際にはこのくらいの表示領域になるようですね。

iMacのSafariで現物を測ったところ875x438ピクセルになりました。