ツイートするだけでアイ・キャッチと概要が表示される『Twitterカード』は、プラグインがなくても簡単に設定できるよ！

公開日： 2015/02/20 : 最終更新日：2016/03/12 WPプラグイン, イベント告知用ツール, ツイッター TwitterCard, プロモーション

Who Invented Twitter? by Grant Stantiall, on Flickr Some rights reserved

Twitterカード設定方法1：手動（コード）

そのTwitterカードの設定ですが、[header.phpに所定のコードを貼る]⇒[Twitterカード申請]の2ステップで簡単に出来ちゃいます。

まずは、Twitter CardTypeに移動します。

1.反映させたいタイプのカードのコードをコピーし、各項目を自分の設定に書き換えて、header.phpファイルに</head>の手前にペーストします。

※くつきの環境ではTwitterCardのコードでエラーがつづきましたので、こちらのサイトのコードを様を参考にさせていただきました。詳細は後述してます。

あとは、Card validatorページにて、検証するだけ。

表示させたい自サイトのURLを入力し[Preview Card]をクリック。

2.サイト毎、初回のみ、twitterにカード利用申請のボタンが表示されますので、クリックして下記項目を入力します。

といってもTwitterに登録済みの情報（メールアドレスやIDなど）は反映されて表示されますので、サイトの説明文[WebSite Information]さえ入力すれば基本的にOK。

申請もそれほど大げさなものではなく、すぐに承認されます。

Summary Card with Large Image（大きな画像）の表示サンプル

Twitterカードで表示できる画像の種類

Twitterで反映できるカード（画像）のタイプは下記7種類。

方法	画像	特徴	備考
1-Summary Card	デフォルト	概要の脇に小さめのサムネイル画像表示。	※Twitterカードのデフォルトの設定です。カードの指定がない場合、この設定が適用されます。
2-Summary Card with Large Image	大きい画像	大きなサイズの画像を表示したい場合。	※Twitter表示最大の横幅を限度に可能な限り原寸に近いサイズで表示されます
3-Photo Card	写真	写真を魅せたいサイトの場合。	※フリッカーのツイートがこれですね。Twitterのサンプルではいい感じにフチ無し表示されていますが、テストツイートした限りでは、[Summary Card with Large Image ]との違いがあまりないように思えました。
4-Gallery Card	複数画像	ギャラリーの名前の通り、画像をギャラリーに展示するようなかたちで表示出来る。	表示はマトリクス、上下左右各二枚づつの合計4枚。
5-App Card	使用中のアプリ表示	使用しているモバイルアプリを表示させたい場合。	※アプリを表示させたい場合というのがイマイチ理解出来ませんでした。
6-Player Card	リッチコンテンツ	URLをツイートしただけで動画などのリッチコンテンツが表示される。	承認が必要なようですが、動画メインのサイトでしたら必須かも。
7-Product Card	商品詳細	ショッピングサイトなどで、商品詳細、価格などを表示したい場合。	申請方法はちょっとだけ面倒な感じ。こちらに詳しい方法を記した記事があります。プロダクトカードを使用するには追加の申請が必要

特別なことがない限り[Summary（小さな画像）]、[Summary Card with Large Image（大きな画像）]、[GalleryCard（タイル表示4枚表示）]から選択すれば十分だと思います。

※Player Card（動画メイン）、Product Card（ショッピングサイトなど）、の場合は通常の申請とは別途の申請が必要なようです。

注意

1：検証エラーが出た場合

認証の際、一度目のクリックではエラーが出やすいようです。

設定に問題がなければ、間を開けて再度クリックするとエラーが消えます。

2：TLで表示がバグったら？

TLで概要や画像が表示されない不具合が起こった場合、Card validatorで認証し直すと、不具合が解消される場合があります。

TLで表示不具合が起きた時は、念のため再認証してみてください。

3：コードに関して

くつきの環境では、Twitter公式ページのコードではエラー頻発し、うまく表示されませんでした。

しかし、下記サイトのコードではバッチリ！

こんな簡単に機能改善！WordPressブログにTwitterカードを設定してみました

Twitterのコードより各項目の意味がわかりやすいです。

公式のコードでエラーが出た方は、こちらの方法を試してみてはいかがでしょう？

プラグイン

「コードを貼り付けたりはちょっと面倒」という方むけに手軽にTwitterCardが使えるプラグインもあります。

など。

Twitter Cards Metaは未使用ですが、All in One SEO Packの方は、佐藤のサイトで使用してます。

All in One SEO Packの場合、[SocialMetaの項目で基本設定] ⇒ [記事ごとに簡単な設定]で、簡単に自由度が高いTwitterカードの設定が出来ます。

記事毎の設定イメージ

All in One SEO Packの機能を利用すると、画像の種類や大きさ、概要の文言等が記事毎にカスタマイズできます。

こちらも、機会があれば記事にしたいと思います。

まとめ

公式のコードがダメなときはこちらのコードをお試してみてください。
カードの種類は、特別なことがない限り[Summary（小さな画像）]、[Summary Card with Large Image（大きな画像）]、[GalleryCard（タイル表示4枚表示）]から選択すれば十分。
Player Card（動画メイン）、Product Card（ショッピングサイトなど）、の場合は別途申請が必要。
TwitterCardの認証エラーがでても、慌てずリトライすればＯＫ。
TLで表示がバグったら、認証し直すとバグが解消されることがある。
難しかったらWPプラグインで対応すればＯＫ。

というところでしょうか。

あ、あとツイートに画像を追加するとTwitterカードで表示されるはずの画像と概要は表示できなくなってしまうようです。

それでは、ツーステップで簡単に設定できる『Twitterカード』で、より効果的な告知ツイートをお試してくださいませ♪(*´∀｀*)ﾉｼ

にほんブログ村