＼ 最大3000円もらう方法／
Twitterカードの画像サイズって？｜切れないで表示させるOGP設定
Twitter見ているとよくサイトの紹介をツイートと一緒に画像を載せている人見かけます。
よく見ると２種類の大きさがあります。
❀こんな感じ
これどうやって設定するんだろう？
画像サイズっていくつだろう？
そんな疑問を解決するために紹介します。
❀この記事はこんな人におすすめ
- 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で
表示させた方がいいです。
小さいカードを使うときは小さい画像
大きいカードを使うときは大きい画像
こんな風に２つ用意して
画像を設定しなおすのは大変なので
比率1.91×1の画像で一番アピールしたいものを
中央に配置した画像を１つ用意しておくといいと思います。
3：Canvaで画像を作る
Canva Pro
キャンバでかんたんに画像が作れます。
サイズの設定もカスタマイズから任意設定できます。
Twitterへ反映させるための設定
1：OGP設定で画像を設定する
Twitterに画像がTwitterカードが反映できるように
WordPressからOGP設定します。
①WordPressの管理画面：ダッシュボード入ります。
②プラグインで入れた SEO SIMPL PACKから
③OGP設定をクリックして選びます。
④『画像』は基本設定から設定します
⑤作成した画像を選択します
⑥最後に『設定の保存』を忘れずにクリック
2：画像の大きさを設定する
先ほどと同じ画面ですが今度は『Twitter』を選びます。
カードタイプは２種類
| 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カードを利用するといいです。
大きいサイズの画像の方が目立つので
ブログへのクリック率が上がります！
ぜひ、試してみてくださいね。
この記事が気に入ったら
フォローしてね！
コメント