Twitterカードを設定する方法(賢威6.1以前対応)

公開日: 2014年08月30日


twitter-cards※この記事は賢威6.1以前のバージョンに対応しています。

こんにちはMomoTaroです。

今回は、Twitterカードを設定する方法(賢威6.1以前対応)

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

 

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

■Twitterカードとは?

■Twitterカードを導入する方法
・STEP1:WordPressプラグイン・Twitter Cards Metaの導入
・OGPが設定済みの場合の作業
・STEP2:TwitterにTwitterカードの利用申請をする
・STEP3:Twitterカードの動作確認

 

Twitterカードとは?

↓下記のリンク先記事でも詳しく解説していますが、
賢威6.2からはTwitterカードの設定が容易にできるようになりました。

賢威6.2から追加されたTwitterカードとは?(別ウィンドウ)

 

「Twitterカードとは?」については↑こちらの記事で詳しく解説していますので、
Twitterカードがどのようなものなのか分からない方は一度目を通してみて下さい。

※当記事は賢威6.1以前のバージョンをお使いの方や、
賢威を使っていない方でもTwitterカードの設定ができるように解説しています。

念の為、Twitterカードがどのようなものなのかを簡単に説明すると、
Twitterカードとはツイートに記載されたURLの概要を表示させる仕組みのことです。

実例をご覧頂ければすぐに分かると思います。

22Twitter
 

「概要を表示」をクリックすると…

23Twitter
 

このように、Twitterカードを導入すれば、あなたがURLを含んだツイートをした時に
「概要を表示」が出てくるので、見る側の人に対してとても親切なツイートになります。

リンク先に移動する前に、リンク先の記事タイトル、記事内容の説明、
アイキャッチ画像(設定している場合のみ)が表示されるので、
ツイートを見る人に安心感を持ってもらえるんですね。

その結果、URLをクリックしてもらえる可能性が非常に高くなります。

 

Twitterカードを導入する方法

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

※賢威6.2以降のバージョンをお使いの方はこちらの記事をご覧下さい。

賢威6.2から追加されたTwitterカードの設定方法(別ウィンドウ)

 

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

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

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

導入作業自体はそんなに難しいものではないのですが、Twitterカードの利用申請を
英語のページで行う必要があるため、そこで断念する人が多いような気がします。

当サイトでは英語が苦手な方でも無理なく進めて頂けるように、
画像を多く使ってできる限り分かりやすく解説しています。

順番に進めていけば決して難しくないので是非やってみて下さいね。

 

※もし、サイトにFacebookを導入している等で、
すでにOGP (Open Graph Protocol)の設定が完了している場合は
次のSTEP1・プラグインの導入作業は必要ありません。

OGPが設定済みの方はこちらをクリックして下さい。

OGPが設定済みの場合の作業 ※クリックすると説明箇所に自動スクロールします。

 

STEP1:WordPressプラグイン「Twitter Cards Meta」の導入

それではまず、
WordPressのダッシュボードからプラグイン新規追加と進みます。

plugin
 

表示された検索ボックスにTwitter Cards Metaと入力し、
プラグインの検索をクリックします。

plugin_install1
 

検索結果に「Twitter Cards Meta」が表示されるので
いますぐインストールをクリックしましょう。

plugin_install2
 

本当にこのプラグインをインストールしてもいいですか?と表示されますので
OKをクリックして下さい。

alarm
 

インストールが完了したらプラグインを有効化をクリックします。

plugin_install3
 

次に、ダッシュボードの設定】 → Twitter Cards Metaと進みましょう。

twitter-cards-meta
 

「Twitter Cards Meta Options」という画面に移動したら、
上から順番に必要事項を入力・設定していきます。

Twitter Cards Meta

Site’s Main Twitter Account
Twitterのアカウント名

Use Authors’ Twitter Account
チェックしない

Image Selection
Twitterカード「概要を表示」をクリックした時に表示させる画像の設定

First image from content:記事内の一番最初の画像
Featured image:アイキャッチ画像
From a custom field:カスタムフィールドで設定した画像

※記事にアイキャッチ画像を設定しているのであれば「Featured image」がオススメ

Default Image URL
画像が一切ない記事に表示させる画像

※設定しなくても大丈夫です。

Twitter Cards Type Selection
「Summary Cards」を選択

Description For Home Page
200文字以内でサイトの説明文を記入する

Use Default Card Type Sitewide
チェックしない

 

すべての設定が完了したらSave Optionsをクリックしましょう。

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

 

OGPが設定済みの場合の作業

※STEP1でプラグインを導入した方はこちらの作業を飛ばしてSTEP2へ進んで下さい。

 STEP2へ移動する ※クリックすると説明箇所に自動スクロールします。

 

サイトにFacebookを導入している等の理由で、
すでにOGP (Open Graph Protocol)の設定が完了している場合は
上記STEP1のプラグイン導入作業は必要ありません。

OGPの設定をしている場合は、こちらの作業をした後にSTEP2へ進んで下さい。

まず、
WordPressダッシュボードから外観テーマ編集header.phpと進みます。

header-php
 

<head>~</head>タグの間に以下のコードを記述しましょう。

Twitterアカウント名(@を含める)の部分は、あなたのTwitterアカウントに書き換えて下さい。

<head>~</head>タグ内であればどこでも大丈夫ですが、この辺りが分かりやすいと思います。

header-php2
 

コードを記述したらファイルを更新をクリックします。

続いてSTEP2へ進んで下さい。

 

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カードの設定が反映されません。

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

 

以上、
Twitterカードを設定する方法(賢威6.1以前対応)についての解説でした。

 

コメントを残す

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