ブログ記事をTwitterでシェアするとき、少しでも目立たせたいと思いませんか？この記事ではその悩みを解決するために「Twitterカード」の活用方法を紹介します。
このTwitterカードがあるなしで、あなたのツイートが読者の目にとまる可能性が大きく変わってきます。記事をシェアしたいときは必須の機能でしょう。
この記事では、
- Twitterカードにはどんな種類があるのか？
- 目立ちやすいTwitterカードの画像サイズ
- Twitterカードの設定方法
について図解つきで解説します。
記事を読めばツイッターカードを活用する方法をより理解することができるでしょう。それでは順に紹介していきます。
Twitterカード（ツイッターカード）とは
あらためてツイッターカードについて解説します。
ツイッターカードはツイートに記事を貼り付けたときに“画像”や”タイトル”を表示させる機能です。わかりやすくツイッターカードの”なし”の”あり”で比べるとつぎの通り。
| あり | なし |
|---|---|
 |  |
あきらかに“あり”の方が目立つのが分かりますよね。
またツイッターカードでは、画像の表示方法を“要約”と“要約の大きい画像”の2種類から選ぶことができます。
| Summary （要約） | Summary with large image （要約の大きい画像） |
|---|---|
 |  |
“要約の大きい画像”の方が目立ちます。記事ごとに設定もできるので、内容にあわせて変えてみてください。
ツイッターカードは”ツイートを目立たせることができる”ことを紹介しました。しかし、設定を間違えると誤ったかたちで目立ってしまいます。
とくに注意してほしいのが「画像サイズ」。これを間違えるとせっかくのツイッターカードの見栄えが悪いものに…そうならないために、適切な画像サイズをつぎに解説します。
Twitterカードのアイキャッチ画像の縦横比は「1.91 : 1」で！「2 : 1」でもOK
ツイッターカードのアイキャッチ画像の適正サイズは、それぞれつぎの通りです。
| 画像の種類 | 縦横比 |
|---|---|
| 要約 | 1 : 1 |
| 要約の大きい画像 | 1.91 : 1 |
「要約の大きい画像」の場合、画像サイズを間違えるとすごく見栄えの悪いツイッターカードになってしまいます。
具体的にどうなってしまうのか、実例つきで紹介します。
TwitterカードのNG例（3 : 2）
よくあるのがこちら。縦横比が「3 : 2」の画像で、ブログのアイキャッチに主に使われるサイズです。
表示させたい画像はこちら。
これをツイッターカードのアイキャッチ画像に設定した場合、
画像の上下左右がきれてしまい、文字が見えなくなってしまってます。
TwitterカードのOK例（1.91 : 1）
縦横比「1.91 : 1」の画像。
ツイッターカードの表示はつぎの通りになります。
ばっちりですね。見せたいものがすべて表示されており見栄えも良いです。
Twitterカードの適正画像サイズ
結論：ツイッターカードのアイキャッチ画像の縦横比は「1.91 : 1」で！
注意）Twitterのタイムラインで表示される際は、上下左右が若干トリミングされるので少し余白をもたせておきましょう。
でも「1.91 : 1」なんて覚えにくいよ…そんな方は「2 : 1」でも大丈夫です。
「2 : 1」の画像の場合、左右が少し多めにトリミングされるので余白を少し多めにとっておけばOK。（下図参照してください。）
これでツイッターカードのアイキャッチ画像のサイズは大丈夫ですよね。つづいて、このアイキャッチ画像を設定する方法について解説します。
記事ごとにTwitterカードのアイキャッチ画像を設定する方法
WordPress（ワードプレス）でツイッターカードを設定する方法を紹介します。
手順はつぎの通りです。
- プラグイン「All in One SEO pack」をインストール
- All in one SEO packのソーシャルメディア設定
- 投稿記事のソーシャル設定
順番に解説していきます。
1. プラグイン「All in One SEO pack」をインストール
すでにインストール済みの方は、2.へ進んでください。
①WordPressの管理画面から「プラグイン ＞ 新規追加」を選択。
②”プラグインの検索”に「all in one seo」と入力。画像の「All in One SEO Pack」が出てきたら”今すぐインストール”をクリック。
③インストールが完了したら”有効化”をクリック。
これで「All in One SEO pack」のインストールは完了です。
2.All in One SEOのソーシャルメディア設定
インストールが完了したら、WordPressの管理画面に「All in One SEO」が表示されるので、こちらの設定をします。
①All in One SEO＞「機能管理」を選択して、ソーシャルメディアをクリック。
②「Activate」が「Deactivate」に変更されればOK。
3.投稿記事のソーシャル設定
つづいて投稿記事でツイッターカードの画像を設定します。
①投稿ページの下の方にある「All in One SEO Pack」の「ソーシャル設定」タブを選択。
②「Twitterカードタイプ」の”要約の大きい画像”を選択して、「カスタムTwitter画像」横の”画像をアップロード”をクリック。
③さきほど作成した「1.91 : 1」の画像をアップロードし、”Choose Image”をクリックする。
④「更新」ボタンを押して、投稿ページを保存する。
以上でツイッターカードの設定は完了です。最後に設定したツイッターカードが正しく表示されるか。それを確認する方法を紹介します。
Twitterカードのアイキャッチ画像の表示を確認する方法
ツイッターカードのアイキャッチ画像を確認するには「Card Validator」というツイッターの公式サービスを利用します。確認する手順はつぎの通りです。
1.「Card Validator」にアクセス。
2. Twitterにログイン。
3. “Card URL” に記事のURLを貼り付け、”Preview cart”をクリック。
4. “Card Preview” にツイッターカードのプレビューが表示されます。その下のLogがすべて”グリーン”であればOKです。
なお、ツイッターカード設定から反映されるまで少し時間がかかります。ですので、少し時間に余裕をもって確認することをおすすめします。
Twitterのタイムラインでアイキャッチをきれいに表示させるもうひとつの方法
ここまで「ツイッターのタイムラインでアイキャッチをきれいに表示させる方法」としてツイッターカードを紹介しました。それ以外にもうひとつ方法があるので紹介します。
それは「画像を添付する」です。これまで紹介した方法と比較するとこんな感じ。
| 要約の大きい画像 | 画像を添付 |
|---|---|
 |  |
ツイッターのタイムラインは、“ツイッターカード”より”添付画像”が優先されます。
タイトルや概要文を表示させたくないときは「画像を添付する」方法もおすすめです。ただし、添付する画像の縦横比は「16 : 9」で！こちらもお忘れなく。
＼ツイッターの画像は16:9で／
ツイートの添付写真は、そのまま貼り付けると上下が切れちゃうんですよね…
写真が1枚なら「16:9」がおすすめ！
ケータイのタイムラインだと、ちょうど見切れないサイズ!!
まわりに話したら意外と知らない人が多かったので…ぜひ試してみてー???? pic.twitter.com/PBbz62Vdmj
— ふじぱん｜朝×フリーランス (@fujipan8960) 2018年10月13日
まとめ
いかがでしたか？
「Twitterのタイムラインでアイキャッチ画像をきれいに表示させる方法」としてツイッターカードを紹介しました。
やり方をおさらいします。
- Twitterカード用の画像を縦横比「1.91 : 1」で作成！「2 : 1」でもOK（その場合、左右の余白を少し多めに）
- WordPressのプラグイン「All in One SEO Pack」のソーシャルメディア設定
- 投稿記事の「ソーシャル設定」で、”Twitterカードタイプ”と”カスタムTwitter画像”を設定
以上で完成です。
あらかじめツイッターカードがどのように表示されるか確認しておきたいときは「Card Validator」を使いましょう。
ツイッターカードは、Twitterのタイムライン上で記事を目立たせるのに必須のツールです。うまく活用してあなたの記事を目立たせるよう活用してください。
この記事が少しでも役に立ったら、シェアしてもらえると嬉しいです。