WordPressプラグインで、Twitterカード対応する方法

シェアする

仕事でTwitterカードの対応を行い、いい感じに表示されるのでこのブログにもTwitterカードの対応をしていみました。

ツイッターカードって?

Twitterカードは対応済みのサイトからつぶやかれた情報をリッチに表示してくれます。サムネイルや動画などサイトコンテンツをタイムライン上でキレイに見せることが出来ます。

カードのタイプは

Summaryカード: デフォルトのカードで、タイトル、説明、サムネイル、Twitterアカウントの属性が含まれています。

大きな画像付きのSummaryカード: Summaryカードに似ていますが、画像が目立つように使用されています。

Photoカード: 写真のみを含めたカードです。

Galleryカード: 4つの写真を集めて強調したカードです。

Appカード: モバイルアプリの詳細を含めて直接ダウンロードできるようにしたカードです。

Playerカード: 動画やオーディオ、スライドショーを視聴できるカードです。

Productカード: 製品情報のために最適化したカードです。

ここはブログなので、アプリに使うカードではなく「Summary Card with large image」を選択しました。Summary with large imageだとOGPのイメージがタイムライン上に大きく表示されます。イメージのサイズ違いで、どちらもページの概要が表示されます。

App Cardは、アプリが登録されていてインストールされていればアプリ、インストールされていなければApp Storeに飛ばしてくれたりします。

Player Cardは動画の埋め込みが出来ます。

カードの導入方法

WordPressロゴ

WordPressではTwitterカードに対応するためのプラグインが存在しています。こちらを入れてしまうのが手っ取り早いので、プラグインをオススメします。

私が入れたプラグインはJM Twitter Cardsというプラグインです。

プラグインのインストールからJM Twitter Cardsを検索して、インストール、プラグインを有効化してください。

MENUにJM Twitter Cardsが表示されるようになるので、PersonalにTwitterユーザー名、Websiteにユーザー名があれば、別々に記載します。

後はカードのタイプを先ほどの4つから選んで、その他情報を設定しておきます。

設定が終わって反映したら、こちらでチェック

スマホを楽しむ人

赤文字が表示されず、カードが表示されればOK。自分のブログ記事をTweetしてみるとカードになっているはず。

実際につぶやいてみるとこんな感じです。概要を押さないと表示されません。

Twitterカードサンプル

Twitterカードサンプル

なお新規で作成する記事については、投稿ページで個別に設定出来ます。

スポンサーリンク
スポンサードリンク
スポンサードリンク

シェアする