Twitterカードの見栄えをちゃんと気にしていますか?【こぼれ話】

ブログ管理Twitter, Twitterカード, ブログ管理, 初心者

Twitterカードのサイズヘッダー

トリ師匠
トリ師匠
ここ2回ほどTwitterの埋め込みについて触れたの。

ぐず夫
ぐず夫
それがなんやの?
トリ師匠
トリ師匠
ところでぐず夫は他人様の呟き見てて、たま~に気になることないか?
ぐず夫
ぐず夫
あるで。
この人、いつもくぅ~だらないことしか言うてへんな! とか。
トリ師匠
トリ師匠
いや…、そういうんやなくて…

ということで、今回は皆さんTwitterでブログを宣伝する時に、ちゃんとTwitterカードの画像を設定していますか?というこぼれ話です。

Twitterカードをちゃんと使えていますか?

ちゃんと設定してますか?

トリ師匠
トリ師匠
まずはこれを見てみそ。

ぐず夫
ぐず夫
なんやこれ、他所様んとこの記事やないか。ワシの呟きもあるで。
トリ師匠
トリ師匠
コレ見て何か思わへんか?
ぐず夫
ぐず夫
ワシの心の声がうま~く表現されてるな。それがなんや?
トリ師匠
トリ師匠
そんなとこどーでもええ。
そこより見るんは画像やろ、画像!
ぐず夫
ぐず夫
画像?
確かに出てるな。なんやのこれ。
トリ師匠
トリ師匠
なんやと思う?
ぐず夫
ぐず夫
……人やろな。知らんけど。
トリ師匠
トリ師匠
な?
誰か分かれへんねん。
ぐず夫
ぐず夫
せやな。それがどないや?
トリ師匠
トリ師匠
せっかくブログ記事書いて、誰かにTwitterで紹介してもらったに、こんな画像が表示されるてガッカリや思えへんか?
ぐず夫
ぐず夫
確かにな。
これみてブログ読んでみよとは思わへんかもしれへんわ。
トリ師匠
トリ師匠
最近はまだ減ったかもしれへんけど、まだまだ世の中にはちゃーんと設定してへん人がぎょーさんおる。今回は簡単やけど、Twitterカードの規定サイズをお勉強や。ぐず夫、お主もやで!
ぐず夫
ぐず夫
はぁ。(めんどくさッ!)

Twitterカードには規定のサイズが存在します

ポイント1

トリ師匠
トリ師匠
Twitterカードについては、以前ウチでも勉強したな。

ぐず夫
ぐず夫
そんなんあったか?
1ミリも覚えてへんけど。
トリ師匠
トリ師匠
ちゃんとやったわ!
覚えてへんなら、こっち読んで思い出してこい!

○ Twitterカードについてはコチラ!

トリ師匠
トリ師匠
まず前提として、一般的なユーザーの皆はんは「サマリーカード」「大型画像サマリーカード」どちらか2種類を設定することになるとこまではええな?
ぐず夫
ぐず夫
…なんとなく。
なんとなくやで?
トリ師匠
トリ師匠
一個は画像のちっさいカードで、一つは少し大きめの画像が付いてるこんなカードのイメージや。
カードの表示例
サマリーカードと大型画像サマリーカードのイメージ
ぐず夫
ぐず夫
…ふむふむ。
トリ師匠
トリ師匠
見たまんまやで、小さい「サマリーカード」は分かりやすいな。
こっちの画像の縦横比は1:1で、800×800ピクセルが規定になってるわ。

800×800イメージ

ぐず夫
ぐず夫
なにそれ、サイズ決まってるんか?
トリ師匠
トリ師匠
実際はもっと小さくても構わへん(最小144ピクセル)けど、一般的に綺麗に表示できる画像の縦横サイズ比ってことやろな。ギュッとして、ここに表示するってことかの。企業やと1:1でもっと大っきく表示できる形式があるで、それも合わせてってことやろな。
ぐず夫
ぐず夫
ふーん。なら「サマリーカード」使う場合は、カードの画像設定に800×800ピクセルの画像使えばそれなりに収まるてことやな。
トリ師匠
トリ師匠
せや。なら次は「大型画像サマリーカード」の方や。
こっちも規定のサイズは決まってて、画像の縦横比は横1.91:縦1で、800×418ピクセルが規定サイズになってるわ。

800×418イメージ

ぐず夫
ぐず夫
1.91:1て微妙な数字やな。
トリ師匠
トリ師匠
まぁ確かにそうやな。
でも規定がそうなんやから、それに合わせるんがベストっちゅうことやろな。「大型画像サマリーカード」を使う時は、800×418ピクセルのサイズ画像を使うか、それに準拠する縦横比の画像にすることで、上みたいに誰か分からへん画像にならんようになるってことや。
ぐず夫
ぐず夫
ほへ~。
そんな細かく決まってるんやのう。気にしたこともなかったで。
トリ師匠
トリ師匠
せっかくブログのカード設定もしてるんやし、綺麗に表示されるんに越したことはないからな。みんなもちゃんと画像の設定するんやで!

ついでにFacebookの画像設定も…

ポイント2

ぐず夫
ぐず夫
まだ何かあるんか?

トリ師匠
トリ師匠
お主はつこてへんけど、ここで設定した画像はFacebook向けのカードにも使用されてるでの。そっちの規定も確認しとこか。
ぐず夫
ぐず夫
ふーん。
ま、見るだけやで。ワシFacebook使わへんし。
トリ師匠
トリ師匠
そう言うなて。
Facebookのカードはサイズが決まってての。画像は用意してへんけど、
画像の縦横比は基本1.9:1で、
推奨の画像サイズは1200×628ピクセルてことになってるわ。
ぐず夫
ぐず夫
……ん?
そうなると、Twitterの設定と多少違ってしまうけどええんか。
トリ師匠
トリ師匠
ほんのちょっと規定がちゃうけど、そこまで大きく変わらへんから逸脱しすぎてへんのなら見た目はそこまで変わらへんて。
ぐず夫
ぐず夫
あともう1個。
1200×628は無駄にでかないか。いっつもデータサイズはちっちゃしろて口うるさく言うてるやん。
トリ師匠
トリ師匠
まぁそこはブログ管理者との兼ね合いやな。
スマホやパソコンの解像度が上がるたびに多少見た目が荒くなってしまうかもしれへんけど、正直そこまで気にするもんでもないと思うわ。
ワシ的にはTwitter側の規定に合わせて、Facebook側を多少荒めで済ませばええと思ってるで。

ぐず夫
ぐず夫
ふーん。
まぁ色々あるんやな。覚えとくわ。

それぞれまとめてみるで!

Twitterカードの規定サイズ!

○ サマリーカードは?
・縦横比は 横 1:縦 1
・規定サイズは 800×800ピクセル

○ 大型画像サマリーカードは?
・縦横比は 横 1.91:縦 1
・規定サイズは 800×418ピクセル

Facebookカードの規定サイズ! 

・縦横比は 横 1.9:縦 1
・規定サイズは 1200×628ピクセル

トリ師匠
トリ師匠
規定の画像サイズをまとめるとこんな感じやな。
無難な設定やったら、Twitterカードの選択を「大型画像サマリーカード」にして、画像をTwitterの規定サイズ800×418ピクセルにしとけば、Twitterカードの表示もFacebookカードの表示も大崩れはしないって感じかの。
ぐず夫
ぐず夫
はいはい、分かった分かった。
ま、ウチは最初から適当にサイズ合わせてるで関係ないけどな!
トリ師匠
トリ師匠
これからブログ始めよかな~て人は、
これらの数字を参考に綺麗に表示したってな!
ぐず夫
ぐず夫
(…だ、誰に話しかけてんねん)
おいトリ、情緒不安定なんか?
なんやったら病院連れてこか、金は払わへんけども…

ということで、Twitter・Facebookカードの規定サイズについてでした。せっかくですから、正しいカードのサイズを設定し、TwitterやFacebookに投稿するよう心がけましょうね。

ぐず夫
ぐず夫
ワシがそんなこと呼びかけるか!
肥溜め落ちろ!

ではまた次回。

【 参考:Twitter規定Facebook規定