Twitterカードの画像表示を大サイズにする方法(WordPress)

Twitterカード,画像,表示,大サイズ,WordPress

WordPressでブログ記事をTwitterに投稿した際に記事のアイキャッチ画像がタイムラインに表示される場合とされない場合では、クリック率が大きく変わってきます。

今回は自分のブログ記事をTwitterに投稿した際にアイキャッチ画像を表示させる『Twitterカード』を使った設定方法と、画像サイズを大きくする方法を説明していきます。

Twitterカードを使った画像表示方法

Twitterのタイムラインに画像を表示させるにはTwitter Cards Metaというプラグインをインストールします。
※Twitter Cardsというプラグインだと設定が出来ないようなのでTwitter Cards Metaをインストールしてください。

『有効化』するとダッシュボード左タブに『Twitter Cards』が出現するのでクリックすると設定画面が開きます▼

Twitterカード,画像,表示,大サイズ,WordPress

◆Site’s Main Twitter Account

Twitterの@~のアカウント名を入力します。
(例:@stevenkurata)

 

◆Use Authors’ Twitter Account

チェックを外します。

 

◆Image Selection

・ 

・First image from content
指定したアイキャッチ画像が表示させます。

・From a custom field
予め指定した画像を統一で表示出来ます。

 

◆Default Image URL

デフォルトで表示する画像URLを入力します。
サイトトップページのヘッダー画像などがよいですね。

 

◆Twitter Cards Type Selection

ここでカードサイズを選べますがデフォルトでは『Summary Cards』のみになっています。

 

◆Description For Home Page

Twitterに記事が投稿された時にタイトルのしたに表示される概要文を入力します。
何も入力しない場合は記事ごとに書き出しの文章が数行だけ表示されます。

 

◆Use Default Card Type Sitewide

チェックしなくて大丈夫です。

Card validatorで確認する

Twitter Cards Metaで設定を行ったらCard validatorのページに移動して先程登録したTwitterアカウントでログインします。

すると下記の画面が表示されるので、Card URLの欄に自分の記事URLを入力して『Preview Card』をクリックします▼

Twitterカード,画像,表示,大サイズ,WordPress

 

するとこのように実際にTwitterに投稿した際のプレビュー画面を確認できます▼

Twitterカード,画像,表示,大サイズ,WordPress

これで今後はTwitterにブログ記事を投稿する際はアイキャッチ画像が表示されるようになります。

また、過去にTwitterへ投稿していたブログ記事もすべて反映されるようになります。

Twitterカードを大サイズにする方法

今紹介したアイキャッチを表示するだけでも問題ありませんが、サイズが大きいほうがよりクリック率があがります。

このサイズ変更は有料制になっていて、1つのウェブサイトだと$14.97でLarge Sizeで表示させることができます。

設定方法は先程のTwitter Cards Metaの画面でavailable as premium addonをクリックします▼

Twitterカード,画像,表示,大サイズ,WordPress

 

するとWP DEVELOPER画面に切り替わるのでまずはアカウントの登録をします▼

Twitterカード,画像,表示,大サイズ,WordPress

 

『Register』より「ユーザーネーム」、「メールアドレス」、「パスワード」を入力して登録します▼

Twitterカード,画像,表示,大サイズ,WordPress

 

登録が完了したらメニューにある『PLUGINS』→『Twitter Cards Meta』→『Summary Card with Large image』を選択します▼

stk_01

 

『1Website』を選んで『Add to Cart』をクリックします▼
※必要であれば複数サイトのプランを購入しても大丈夫です

Twitterカード,画像,表示,大サイズ,WordPress

 

購入画面になるので必要事項を記入していきます▼

Twitterカード,画像,表示,大サイズ,WordPress

① 購入するプランです。

② クレジットカードかPayPalかで決済方法を選べます。

③ 登録したメールアドレス、名前、このサイトを知った媒体の選択をします。

④ 3つにチェックを入れて同意します。

最後に『Purchase』をクリックします。

支払い方法をクレジットカードにした場合、本人確認のナンバー入力ウィンドウが開きます▼

Twitterカード,画像,表示,大サイズ,WordPress

登録したメールアドレスにナンバーが送られていると思うのでその番号を入力します。

するとクレジット登録画面に切り替わるので情報を入力したら支払いボタンをクリックします▼

Twitterカード,画像,表示,大サイズ,WordPress

支払いが完了すると下記の画面になるので、左下に記載してある『tcm-summary-card-with-large-image-V1.0.2.zip』をダウンロードします▼

Twitterカード,画像,表示,大サイズ,WordPress

ダウンロードした『tcm-summary-card-with-large-image-V1.0.2.zip』をWordPressのプラグインに新規追加でアップロードしたらTwitter Cards Metaの設定画面を開きます。

すると最初は選択出来なかった『Summary Card With Large Image』が選べるようになります

Twitterカード,画像,表示,大サイズ,WordPress

設定を保存して再びCard validatorのページに行きます。

記事URLを入力してPreview cardボタンをクリックすると▼

Twitterカード,画像,表示,大サイズ,WordPress

TwitterカードのサイズがLarge Sizeになりました。

これでTwitterのタイムラインに投稿したときよりクリックされやすくなります。

以上でTwitterカードを大サイズにする設定は完了です。

最後に

Twitterカードは無いよりあったほうがいいし、あるなら大きいほうがいいです。

そしてブログなど運営していく上でTwitterなどのSNSは、SEOが弱いうちは非常に大きなアクセスの流入源となるので早い段階で設定しておきましょう!

  g_001      

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です