Twitterカードを設定してみよう!【WordPressの場合】

ブログ
iedene
皆さま今日は!副業サラリーマンiedeneです!今日はTwitterに記事を投稿する際にアイキャッチ画像(Twitterカードという)を貼るということにトライしました。今まで記事を貼ってもURLだけで他の人と違うなあと漠然と思っていましたが、やはり見栄えがいいのとクリック率が違うという記事を読みまして早速設定することにしました!

記事投稿時の違和感

今までの記事投稿

ブログとtwitterを連動する事が出来たので、
記事をツイートする事ができるようになったのですが、
私がブログからリンク先をツイートすると以下のようになります。

リンク先のURLhが貼られ、記事のタイトルが自動的に入力されます。
最初はこれで「お!リンク貼られてる!」と感動していましたが、
他のトップブロガーの投稿には記事のトップ画像が貼られていたりしています。
これをアイキャッチ画像と言うみたいです。

目指したい記事投稿

こちらは私がブログを開設する時に丸々トレースしたクニトミさんの記事です。
このように大きなアイキャッチ画像が貼られていて見栄えが全然違います。
思わずクリックしたくなります。

iedene
実際クリックしたしw

色々調べてみるとやはりアイキャッチ画像が付いている記事の方がクリック率が上がるという事です。
ユーザー目線で考えてもわかりやすい方がいいのでこれは導入するしかない!
というわけで即実行に移します。

iedene
分かりやすさ優先で!

先ずは実行あるのみ!

因みに私はWordpressを使用しているので、
同じWordpressを利用している方は参考にしていただけると思います。

プラグインJM Twitter Cardsを導入!

「Twitter Cards」でプラグイン検索

まずは方法をいくつか調べます。
やはりコードをいじって設定するのはハードルが高いので
プラグインを入れてサクッと設定する方法をご紹介します。
「Twitter Cards」で検索をかけ「JM Twitter Cards」をインストールします。

iedene
最近プラグイン入れまくってます。

インストールして有効化

インストールが終わりましたらダッシュボードのプラグインから
インストール済みプラグイン項目を選択します。

インストール済みのプラグインの中から「JM Twitter Cards」を選択し、
「有効化」をクリックしプラグインを有効化します。

有効化できたら隣の「Settings」ボタンをクリックし、設定に移ります。

設定画面に入力

Creator (twitter username)には@以降の名前を、
Site (twitter username)は空欄にしています。
Card Typeは普通のSummary(画像が小さめ)とSummary below Large Image(画像大きめ)で悩みましたが、
画像大きいほうが印象も強いだろうとSummary below Large Imageにしました。
その他の設定は特にいじる必要はなさそうです。

iedene
ここまでくればゴールは近い!

その後調整

見え方確認!

Twitterのvalidatorページで見え方を確認します。以下リンク先に飛んでください。

https://cards-dev.twitter.com/validatorm

Twitterアカウントでログインすると以下の画面が表示されるので、試しにブログのページのアドレスを1つ入力し”Preview card”をクリックします。

ページアドレスをコピーし、「カードメタデータへのURLを入力します。」の部分にペーストします。

ペースト出来たら出来栄えをチェック!
「カードをプレビュー」をクリックします。

文字化け?

おお!上手くいった!これは楽勝ではないか!と思っていましたが、、、、、
ブログタイトルの横に「家出」とあります。

文字化けしてます。

おそらく「iedene」を「家出」と訳しているのではないかと思います。
これは困ったなあと設定を色々いじったのですが改善されません。

・最終確認

ちょっと恥ずかしい部分はありますが、一旦テストで記事を投下してみます。
すると文字化けは直っていました。
正しく「iedene」と表記されています。

これでこれからはアイキャッチ画像付きの記事リンク情報をツイート出来るようになりました!
また一歩成長です!

iedene
今回はあっけないくらい簡単に出来ました!またひとつ階段を登りまして一歩成長でございます!

まとめ

今回は非常にスムーズに出来ました。
やはりアイキャッチ画像が貼られていた方が見栄えがいいですし、
その画像が魅力的ならクリックしたくもなるのではないかと個人的には思います。
まだtwitterカードの設定が出来ていない方は是非お試しください!