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

公開日: : 最終更新日:2016/03/12 WPプラグイン, イベント告知用ツール, ツイッター ,

くつキッチュ!アイコン wordpressカテゴリへ

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

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

 

もくじ

 

この[概要を表示]の部分ですね。

※概要が表示済みの場合画像が表示されます。

これはTwitterカードという、ツイートにURLを入れるだけでアイ・キャッチ画像とサイトの著作者表示が自動にされる大変便利な機能です。

見たことはあっても、実際設定していない方も案外多いかと思います。

実際くつきも最近知人のサイト作成の際初めて気づきました。

やってみて分かりましたが、実はこれ簡単な設定ですぐにできちゃうんです。

 

Twitterカード設定方法1:手動(コード)

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

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

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

ツイートするだけでアイ・キャッチと概要が表示される『Twitterカード』は、プラグインがなくても簡単に設定できるよ! 設定方法2..コードをの手前にペースト

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

 

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

ツイートするだけでアイ・キャッチと概要が表示される『Twitterカード』は、プラグインがなくても簡単に設定できるよ! 設定方法3.表示させたい自サイトのURLを入力し[Preview Card]をクリック。」

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

 

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

ツイートするだけでアイ・キャッチと概要が表示される『Twitterカード』は、プラグインがなくても簡単に設定できるよ! 設定方法5.サイト毎、初回のみ承認の申請を行います。

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

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

 

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

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

 

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:検証エラーが出た場合

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

ツイートするだけでアイ・キャッチと概要が表示される『Twitterカード』は、プラグインがなくても簡単に設定できるよ! 設定方法4.一度目はエラーになることが多い。

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

ツイートするだけでアイ・キャッチと概要が表示される『Twitterカード』は、プラグインがなくても簡単に設定できるよ! 設定方法4-2.何度かクリックすると、エラーが消えます。

 

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カードの設定が出来ます。

 記事毎の設定イメージ

ツイートするだけでアイ・キャッチと概要が表示される『Twitterカード』は、プラグインがなくても簡単に設定できるよ! 設定方法 All in One SEO Packの場合

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

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

 

まとめ

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

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

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

 

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

 

 

ブログランキング・にほんブログ村へ
にほんブログ村

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

俺の妹が?モバイルサイトを爆速にしてくれるAMP(アンプ)を、WPプラグインで導入したら、エラーが出たので対処してみた件 「PageSpeed Insights」にて、AMP導入後の爆速さ!!!

俺の妹が?モバイルサイトを爆速にしてくれるAMP(アンプ)を、WPプラグインで導入したら、本当に爆速になった件

AMPページサンプル 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト 本日は、サイ

記事を読む

【中級者向け】TPP非親告罪化の動向が気になる方がフォローしておくべきTWアカウント5選 アイ・キャッチ画像

【中級者向け】TPP非親告罪化の動向が気になる方がフォローしておくべきTWアカウント5選

  ↑エヴァンゲリオン サブタイトル風ロゴ-つぶデコ テンプレート※CSSで枠つ

記事を読む

ワードプレスの記事内にSoundCloudの音楽を埋め込むには?【WPプラグイン】

  追記:2015-02-23 現在はURLコピペのみで簡単に埋め込み出来ます。

記事を読む

scream and shout by Mindaugas Danys, on Flickr 『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!時の対処法。

「記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!」場合の対処法。

記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』を適用

記事を読む

A calm owl by Tambako The Jaguar, on Flickr 【お知らせ】姉妹サイト『イチパン!』復旧しました( ;∀;) くつキッチュアイキャッチ画像

【お知らせ】姉妹サイト『イチパン!』復旧しました( ;∀;)

A calm owl by Tambako The Jaguar, on Flickr Some

記事を読む

photonヤバイ!と思って切ったら、「EWWW Image Optimizer」line1674のエラーでダブルパンチ!……死ぬかと思った! パクリサイトが、パクラレサイトの画像に直リンして画像を盗用するイメージ

サイトをコピーされた? でも、JETPACKのphotonを有効にしてると、「画像の差し替えの反撃」ができないみたい

   直リンで画像を登用される時の説明画像   登場人物:くつきちよこ 

記事を読む

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/ 編集ツールからやたら遠いイメージ図をクリスタのポーズくんで描いてみた。

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/

不具合ページサンプル(出演:クリスタのポーズさん) 登場人物:くつきちよこ ※管理人   佐藤

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

amazonJsで「amazonへのレスポンスがパース出来ません」エラーが出たときの対処法

Initial thoughts on Bilski by opensourceway,

記事を読む

html tattoo by webmove, on Flickr

ワードプレスの記事内でコード表示をするには?【WPプラグイン】

html tattoo by webmove, on Flickr もくじ ドキ!トラ

記事を読む

マウスコンピュータのHDが壊れました illust by 3104o ©佐藤利音

ヱ□カテゴリにアドセンスを表示させない『Display Widgets』『Widget Logic』は創作家サイトに必須のWPプラグイン!

26歳社畜之図 佐藤利音 on Twitter  ハイ、広告表示されてないですね?

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場