賢威6.2から追加されたTwitterカードとは?

公開日: 2014年08月29日


twitter※この記事は賢威6.2に対応しています。

こんにちはMomoTaroです。

今回は、賢威6.2から追加されたTwitterカードとは?

について解説していきたいと思います。

 

【目次】※リンクをクリックすると該当箇所に自動スクロールします。

■Twitterカードとは?

■Twitterカードを導入している人が少ない今がチャンス

■Twitterカードを導入する方法
・STEP1:「賢威の設定」の「Twitterカードの設定」を行う
・STEP2:TwitterにTwitterカードの利用申請をする
・STEP3:Twitterカードの動作確認

 

Twitterカードとは?

WordPressテンプレートの賢威では、
バージョン6.2から“Twitterカード”の設定が可能になりました。

非常に有益なTwitterカードなのでぜひ導入してみてほしいのですが、
「そもそもTwitterカードって何?」という方も多いと思います。

Twitterカードがどういうものなのか?を理解するには
Twitterカードの実例をご覧頂いたほうが分かりやすいと思いますので、
まずはこちらの画像をご覧下さい。

こちらはTwitterカードを導入する前のツイートです。

twitter
 

「開く」をクリックしてもツイートへの返信欄が出てくるだけです。

20Twitter
 

そしてこちらがTwitterカードを導入した後のツイート。
Twitterカードを導入する前のツイートで「開く」となっていた部分が、
「概要を表示」となっています。

22Twitter
 

この「概要を表示」をクリックすると、ツイートに書いたリンク先URLの概要が表示されます。

23Twitter
 

このように、
Twitterカードとはツイートに記載されたURLの概要を表示させる仕組みのことです。

リンク先に移動しなくても、リンク先の記事タイトル、記事内容の説明、
アイキャッチ画像(設定している場合のみ)が表示されるので、
見る側の人にとっては非常に安心感がありますよね。

リンク先の概要をクリックする前に知ることで安心感が生まれて、
記事URLをクリックしてもらえる可能性が非常に高くなります。

Twitterカードはツイートの閲覧者にとっても
ツイートをするあなたにとっても、非常に有益なものなんですね。

しかもこのTwitterカードを導入しておけば、
仮にあなたのツイートが他の誰かにリツイートされた場合でも、
そのリツイートにも同じように「概要を表示」が表示されるんです。

 

Twitterカードを導入している人が少ない今がチャンス

WordPressでサイトを運営している方の中でも、
サイドバーなどにTwitterウィジェットを設置している方がだいぶ増えてきていますが、
Twitterカードを導入している方は非常に少ないです。

特に、トレンドブログや特化型サイトを運営している方は、
Twitterからのアクセス流入を狙って、ツイートの中にブログ記事の
URLを載せている方が多いと思うんですが、

せっかくツイートをしたとしても、そのツイートを見た人が記事URLをクリックして
あなたのブログやサイトに足を運んでくれなければ意味がありませんよね。

しかし、このTwitterカードを導入すれば、
膨大に表示される(あなた以外の人がつぶやいた)他のツイートと差別化ができるので
記事URLをクリックしてもらえる確率が高くなる傾向があります。

Twitterカードを導入している人がまだまだ少ないの今がチャンスです。

 

Twitterカードを導入する方法

それではここから、Twitterカードを導入する方法について解説していきます。

賢威6.2からはTwitterカードの設定ができるようになったので
導入が圧倒的にラクになりました。

まず初めに導入の流れを簡単に説明しておきます。

①Twitterカードとあなたのサイトを関連付けるためのメタタグをあなたのサイトに設定する。

②TwitterにTwitterカードの利用申請をする。

このように、導入の流れとしてはたったの2ステップなのですが、
Twitterカードの利用申請を英語のページで行う必要があるため、
若干わかりにくく、そこで断念する人が多いような気がします。

当サイトでは画像を多めに使ってできる限り分かりやすく解説しています。

ひとつひとつ丁寧に進めていけば決して難しくないので頑張ってやってみて下さいね。

 

STEP1:「賢威の設定」の「Twitterカードの設定」を行う

まず、WordPressのダッシュボードから賢威の設定】 → Twitterカードと進みます。

14賢威 設定メニュー
 

「Twitterカードの設定」画面では、各項目を以下のように設定して下さい。

twitter_card_setting

・タグの出力:有効にする

・種類:どちらでもOKです。
 ※Summary Card with Large Imageのほうが、「概要を表示」とした時に表示されるサムネイル
(またはアイキャッチ)画像が大きくなります。

・アカウント名:あなたのTwitterアカウント名(@は不要)

・標準画像:できればTwitterアカウントで使っている画像
 ※画像URLの入力ボックス下の【画像を変更】をクリックし、画像ファイルをアップロードする。

変更が完了したら変更を保存をクリックして下さい。

これで、Twitterカードとあなたのサイトを関連付けるためのメタタグが、
あなたのサイトに設定することができました。

 

STEP2:TwitterにTwitterカードの利用申請をする

次に、TwitterにTwitterカードの利用申請をしていきます。

まず、こちらのリンクをクリックしてTwitterカードの公式サイトへ移動しましょう。

Twitterカード公式サイト(外部サイト)

 

Twitterカード公式サイトに移動したら、トップページにある
Twitter Cardsをクリックして下さい。

Twitter Developers
 

次に画面右下のほうにある
validate your meta tagsをクリックしましょう。
※STEP1で設定したあなたのサイトのメタタグを確認するという意味です。

Twitter Developers
 

するとSign in with your Twitter accountという画面になるので

あなたのTwitterアカウント名(@は不要)パスワードを入力して
Log inをクリックして下さい。

Sign in with your Twitter account   Twitter Developers
 

ログインをするとCard Catalogが表示されますので、
STEP1の「種類」の設定で「Summary Card」を選択した場合は
こちらではSummaryを選択して下さい。

STEP1の「種類」の設定で「Summary Card with Large Image」を選択した場合は
こちらではSummary Large Imageを選択して下さい。

Twitter Developers
 

次にCard Validatorという画面になりますのでValidate & Applyをクリックして下さい。

Card Validator
 

するとこのような入力ボックスが表示されますので、
あなたのサイトURLを入力してGo!をクリックしましょう。

6Card Validator   Twitter Developers
 

しばらく読み込み画面が表示された後に、
このような感じで実際にツイートをした場合のTwitterカードのプレビューが表示されます。

プレビューが正しく表示されたらRequest Approvalをクリックして下さい。

※このプレビューが正しく表示されない場合は、
これまでの作業でどこかが間違ってしまった可能性があります。

Card Validator
 

するとRequest Domain Approvalという入力画面が出てきますので
がついている箇所に必要事項を記入していきます。

Twitterにログインした状態になっているため
ほとんどの必要事項が入力済みになっていると思います。

8CardValidator
 

下へスクロールするとWebsite Infomationという部分が出てくるので
その下のWebsite Descriptionあなたのサイトの説明
Website Twitter UsernameTwitterのアカウント名を入力しましょう。

9Card Validator
 

入力が完了したらRequest Approvalをクリックします。

 

すると最後にRequest Receivedという表示がされます。

ここにはTwitterカードの利用申請の承認が完了するまでに数週間がかかるということと、
承認が完了したら登録したメール宛てに承認完了通知を送るという内容が書かれています。

10Card Validator
 

ここはCloseをクリックするだけでOKです。

 

承認されるまでに数週間かかるといった表示がされるものの、
ほとんどの方がすぐに承認完了通知のメールが届くようです。

試しに登録したメールアカウントを見てみましょう。

こちらのようなYour Twitter card is ready!という件名の承認完了通知メールが届ければ、
すべての導入作業が完了です。

Your Twitter card is ready
 

 

STEP3:Twitterカードの動作確認

Twitterカードがしっかりと導入できているかどうかを確認するために
試しにブログ記事のURLなどを含んだツイートをしてみましょう。

Twitterカードが正しく導入できていれば
このように「概要を表示」が表示されているはずです。

22Twitter
 

もし「概要を表示」が表示されないとしても、
ある程度時間が経てばきちんと表示されるようになります。

また、過去のツイートにはすぐにTwitterカードの設定が反映されません。

数時間~数日が経過すると
過去のツイートにも「概要を表示」が表示されるようになると思います。

 

以上、
賢威6.2から追加されたTwitterカードとは?についての解説でした。

 

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む