ツイッターカードつかってますか?ブログ記事をタイムラインで目立たせるアイキャッチ画像の設定方法

Tool

 

こんにちは、ふじぱん(@fujipan8960)です。

ブログ記事をTwitterでシェアするとき、少しでも目立たせたいと思いませんか?この記事ではその悩みを解決するために「Twitterカード」の活用方法を紹介します。

このTwitterカードがあるなしで、あなたのツイートが読者の目にとまる可能性が大きく変わってきます。記事をシェアしたいときは必須の機能でしょう。

この記事では、

  • Twitterカードにはどんな種類があるのか?
  • 目立ちやすいTwitterカードの画像サイズ
  • Twitterカードの設定方法

について図解つき解説します。

記事を読めばツイッターカードを活用する方法をより理解することができるでしょう。それでは順に紹介していきます。

Twitterカード(ツイッターカード)とは

Twitter card 01

 

あらためてツイッターカードについて解説します。

ツイッターカードはツイートに記事を貼り付けたときに“画像”や”タイトル”を表示させる機能です。わかりやすくツイッターカードの”なし”の”あり”で比べるとつぎの通り。

ありなし
Twitter card summary largeTwitter card link

あきらかに“あり”の方が目立つのが分かりますよね。

 

またツイッターカードでは、画像の表示方法を“要約”“要約の大きい画像”の2種類から選ぶことができます。

Summary
(要約)
Summary with large image
(要約の大きい画像)
Twitter card summaryTwitter card summary large

“要約の大きい画像”の方が目立ちます。記事ごとに設定もできるので、内容にあわせて変えてみてください。

 

ツイッターカードは”ツイートを目立たせることができる”ことを紹介しました。しかし、設定を間違えると誤ったかたちで目立ってしまいます。

とくに注意してほしいのが「画像サイズ」。これを間違えるとせっかくのツイッターカードの見栄えが悪いものに…そうならないために、適切な画像サイズをつぎに解説します。

Twitterカードのアイキャッチ画像の縦横比は「1.91 : 1」で!「2 : 1」でもOK

Twitter card 02

 

ツイッターカードのアイキャッチ画像の適正サイズは、それぞれつぎの通りです。

画像の種類縦横比
要約1 : 1
要約の大きい画像1.91 : 1

「要約の大きい画像」の場合、画像サイズを間違えるとすごく見栄えの悪いツイッターカードになってしまいます。

具体的にどうなってしまうのか、実例つきで紹介します。

TwitterカードのNG例(3 : 2)

よくあるのがこちら。縦横比が「3 : 2」の画像で、ブログのアイキャッチに主に使われるサイズです。

表示させたい画像はこちら。

Twitter card img02 1

 

これをツイッターカードのアイキャッチ画像に設定した場合、

Twitter card img02 2

画像の上下左右がきれてしまい、文字が見えなくなってしまってます。

 

TwitterカードのOK例(1.91 : 1)

縦横比「1.91 : 1」の画像。

Twitter card img02 3

 

ツイッターカードの表示はつぎの通りになります。

Twitter card img02 4

ばっちりですね。見せたいものがすべて表示されており見栄えも良いです。

 

Twitterカードの適正画像サイズ

結論:ツイッターカードのアイキャッチ画像の縦横比は「1.91 : 1」で!

注意)Twitterのタイムラインで表示される際は、上下左右が若干トリミングされるので少し余白をもたせておきましょう。

 

でも「1.91 : 1」なんて覚えにくいよ…そんな方は2 : 1でも大丈夫です。

「2 : 1」の画像の場合、左右が少し多めにトリミングされるので余白を少し多めにとっておけばOK(下図参照してください。)

Twitter card img02 5

 

 

これでツイッターカードのアイキャッチ画像のサイズは大丈夫ですよね。つづいて、このアイキャッチ画像を設定する方法について解説します。

記事ごとにTwitterカードのアイキャッチ画像を設定する方法

Twitter card 03

 

WordPress(ワードプレス)でツイッターカードを設定する方法を紹介します。

手順はつぎの通りです。

  1. プラグイン「All in One SEO pack」をインストール
  2. All in one SEO packのソーシャルメディア設定
  3. 投稿記事のソーシャル設定

順番に解説していきます。

1. プラグイン「All in One SEO pack」をインストール

すでにインストール済みの方は、2.へ進んでください。

①WordPressの管理画面から「プラグイン > 新規追加」を選択。

Twitter card img03 1

 

②”プラグインの検索”に「all in one seo」と入力。画像の「All in One SEO Pack」が出てきたら”今すぐインストール”をクリック。

Twitter card img03 2

 

③インストールが完了したら”有効化”をクリック。

Twitter card img03 3

 

これで「All in One SEO pack」のインストールは完了です。

2.All in One SEOのソーシャルメディア設定

インストールが完了したら、WordPressの管理画面に「All in One SEO」が表示されるので、こちらの設定をします。

①All in One SEO>「機能管理」を選択して、ソーシャルメディアをクリック。

Twitter card img03 4

 

②「Activate」が「Deactivate」に変更されればOK。

Twitter card img03 5

 

3.投稿記事のソーシャル設定

つづいて投稿記事でツイッターカードの画像を設定します。

①投稿ページの下の方にある「All in One SEO Pack」の「ソーシャル設定」タブを選択。

Twitter card img03 6

 

②「Twitterカードタイプ」の”要約の大きい画像”を選択して、「カスタムTwitter画像」横の”画像をアップロード”をクリック。

Twitter card img03 7

 

③さきほど作成した「1.91 : 1」の画像をアップロードし、”Choose Image”をクリックする。

Twitter card img03 8

 

④「更新」ボタンを押して、投稿ページを保存する。

 

以上でツイッターカードの設定は完了です。最後に設定したツイッターカードが正しく表示されるか。それを確認する方法を紹介します。

Twitterカードのアイキャッチ画像の表示を確認する方法

Twitter card 04

 

ツイッターカードのアイキャッチ画像を確認するには「Card Validator」というツイッターの公式サービスを利用します。確認する手順はつぎの通りです。

1.「Card Validator」にアクセス。

2. Twitterにログイン。

3. “Card URL” に記事のURLを貼り付け、”Preview cart”をクリック。

Twitter card img04 1

4. “Card Preview” にツイッターカードのプレビューが表示されます。その下のLogがすべて”グリーン”であればOKです。

Twitter card img04 2

 

なお、ツイッターカード設定から反映されるまで少し時間がかかります。ですので、少し時間に余裕をもって確認することをおすすめします。

Twitterのタイムラインでアイキャッチをきれいに表示させるもうひとつの方法

Twitter card 05

 

ここまで「ツイッターのタイムラインでアイキャッチをきれいに表示させる方法」としてツイッターカードを紹介しました。それ以外にもうひとつ方法があるので紹介します。

それは「画像を添付する」です。これまで紹介した方法と比較するとこんな感じ。

要約の大きい画像画像を添付
Twitter card summary largeTwitter card image

 

ツイッターのタイムラインは、“ツイッターカード”より”添付画像”が優先されます。

タイトルや概要文を表示させたくないときは「画像を添付する」方法もおすすめです。ただし、添付する画像の縦横比は「16 : 9」で!こちらもお忘れなく。

 

まとめ

いかがでしたか?

Twitterのタイムラインでアイキャッチ画像をきれいに表示させる方法としてツイッターカードを紹介しました。

やり方をおさらいします。

  1. Twitterカード用の画像を縦横比「1.91 : 1」で作成!「2 : 1」でもOK(その場合、左右の余白を少し多めに)
  2. WordPressのプラグイン「All in One SEO Pack」のソーシャルメディア設定
  3. 投稿記事の「ソーシャル設定」で、”Twitterカードタイプ”と”カスタムTwitter画像”を設定

以上で完成です。

 

あらかじめツイッターカードがどのように表示されるか確認しておきたいときは「Card Validator」を使いましょう。

 

ツイッターカードは、Twitterのタイムライン上で記事を目立たせるのに必須のツールです。うまく活用してあなたの記事を目立たせるよう活用してください。

この記事が少しでも役に立ったら、シェアしてもらえると嬉しいです。