ツイートするだけでアイ・キャッチと概要が表示される『Twitterカード』は、プラグインがなくても簡単に設定できるよ!
公開日: : 最終更新日:2016/03/12 WPプラグイン, イベント告知用ツール, ツイッター TwitterCard, プロモーション
Who Invented Twitter? by Grant Stantiall, on Flickr Some rights reserved
もくじ
【先ほど更新♪】 あなたの画像をパクリから守る!電子透かし埋め込みフリーウェア『ステガノフラファー』の使い方 http://t.co/6LS2MzF8JF
— 創作支援屋@くつきちよこ (@hibii_ichi) 2015, 2月 13
この[概要を表示]の部分ですね。
※概要が表示済みの場合画像が表示されます。
これはTwitterカードという、ツイートにURLを入れるだけでアイ・キャッチ画像とサイトの著作者表示が自動にされる大変便利な機能です。
見たことはあっても、実際設定していない方も案外多いかと思います。
実際くつきも最近知人のサイト作成の際初めて気づきました。
やってみて分かりましたが、実はこれ簡単な設定ですぐにできちゃうんです。
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の認証エラーがでても、慌てずリトライすればOK。
- TLで表示がバグったら、認証し直すとバグが解消されることがある。
- 難しかったらWPプラグインで対応すればOK。
というところでしょうか。
あ、あとツイートに画像を追加するとTwitterカードで表示されるはずの画像と概要は表示できなくなってしまうようです。
それでは、ツーステップで簡単に設定できる『Twitterカード』で、より効果的な告知ツイートをお試してくださいませ♪(*´∀`*)ノシ
関連記事
-
-
ワードプレスの記事内にSoundCloudの音楽を埋め込むには?【WPプラグイン】
追記:2015-02-23 現在はURLコピペのみで簡単に埋め込み出来ます。
-
-
サイトをコピーされた? でも、JETPACKのphotonを有効にしてると、「画像の差し替えの反撃」ができないみたい
直リンで画像を登用される時の説明画像 登場人物:くつきちよこ
-
-
TPP非親告罪化の動向が気になる創作クラスタがフォローしておくべきTWアカウント5選
ネットですこ~しだけ、話題になっています「TPP非親告罪化」ですが、我々の生活にもたらされ
-
-
「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 ※解決済み
Upload出来ない(/_;) ファイルの
-
-
甥っ子画伯の絵で電子しかけ絵本 4-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Gallery 透過ファイルの設定
追記:「WordPressの更新後、『FlippingBook Gallery』の表示に不
-
-
2-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方『BOOKを記事で表示する』編
追記:「WordPressの更新後、まれに『FlippingBook
-
-
amazonJsで「amazonへのレスポンスがパース出来ません」エラーが出たときの対処法
Initial thoughts on Bilski by opensourceway,
-
-
ヱ□カテゴリにアドセンスを表示させない『Display Widgets』『Widget Logic』は創作家サイトに必須のWPプラグイン!
26歳社畜之図 佐藤利音 on Twitter ハイ、広告表示されてないですね?
-
-
「記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!」場合の対処法。
記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』を適用
-
-
1-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 基本編
追記:「WordPressの更新後、『FlippingBook Ga