✲✲✲ 自宅で印刷!プリンターはこちら ✲✲✲

Twitterカードの画像サイズって?|切れないで表示させるOGP設定

スポンサーリンク




Twitter見ているとよくサイトの紹介をツイートと一緒に画像を載せている人見かけます。

よく見ると2種類の大きさがあります。

❀こんな感じ

これどうやって設定するんだろう?
画像サイズっていくつだろう?

そんな疑問を解決するために紹介します。

❀この記事はこんな人におすすめ
  • Twitterをしている
  • Twitterで紹介したいことがある
  • 自分のサイトやお店HPを持っている
  • 画像作りたいけど、サイズが分からない
目次 ✲読みたい項目クリックできます

Twitterカード用の画像を作成

1:画像サイズ

❀Twitterカードサイズ   

Twitterカードサイズ大きさの種類画像サイズ比率
Summary Card小さいサイズ144px×144px以上1:1
Summary Card with Large Imag大きいサイズ600px×314px以上1.91:1

2:画像の見え方

小さいカード Summary Cardを選んだときは比率1:1になる為
画像の中央で正方形で切り取られて表示されます。
イメージとしては青い線で囲ったところが表示されます。

なのでたくさん文字の入った画像は
大きいカードSummary Card with Large Imag
表示させた方がいいです。

小さいカードを使うときは小さい画像
大きいカードを使うときは大きい画像
こんな風に2つ用意して
画像を設定しなおすのは大変なので
比率1.91×1の画像で一番アピールしたいものを
中央に配置した画像を1つ用意しておくといいと思います。


3:Canvaで画像を作る

Canva Pro  キャンバでかんたんに画像が作れます。

サイズの設定もカスタマイズから任意設定できます。

Twitterへ反映させるための設定

1:OGP設定で画像を設定する

Twitterに画像がTwitterカードが反映できるように
WordPressからOGP設定します。

①WordPressの管理画面:ダッシュボード入ります。

②プラグインで入れた SEO SIMPL PACKから

OGP設定をクリックして選びます。

④『画像』は基本設定から設定します

作成した画像を選択します

⑥最後に『設定の保存』を忘れずにクリック

2:画像の大きさを設定する

先ほどと同じ画面ですが今度は『Twitter』を選びます。

カードタイプは2種類

summary小さいカード
summary_large_image大きいカード

また、最後に『設定の保存』を忘れずにクリック

Twitterにどんな風に表示されるか確認する

これで設定は出来ました。

Twitterにどんな風に表示されるか確認します。

Twitterカードがどんな風に表示されるかを Card validator Twitter Developer でチェックしてみます。

Twitte にアカウントがありログインしていることが必要です

①カードのURLに自分のサイトのURL入れる

URLはhtpps:// で入力してください

②プレビューカードをクリックする 

うさこ

さっき変更したのに反映されてない!!!

設定変更したばかりの時は反映まで少し時間がかかります。
何度か更新して画面を確認してみてください。

Twitterで自分のサイトを紹介してみよう

Card validator Twitter Developerでどんな風に表示されるか確認できたらTwitterで紹介してみましょう!

Twitterのツイート画面で
https:// からのURLを入力します。

きっと、先ほど作成した画像が
希望したサイズの大きさで表示されたはずです!

まとめ


Twitterはたくさんの人とつながれるツールです。
皆さんに紹介したいときはTwitterカードを利用するといいです。
大きいサイズの画像の方が目立つので
ブログへのクリック率が上がります!

ぜひ、試してみてくださいね。

スポンサーリンク

スポンサーリンク

スポンサーリンク

シェアする
目次 ✲読みたい項目クリックできます
閉じる