ツイートするだけでアイ・キャッチと概要が表示される『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

関連記事

WordPress立ち上げメモ 助けて!TOC+の反映されない(><) TinyMCE Advancedってどんなプラグイン?等 アイキャッチ画像

ドキ!トラブルだらけのワードプレスブログ立ち上げ大会小ネタメモφ(. .)

1週間ほど前にこのブログを立ち上げまして… 思いがけないトラブルや、新規導入のプラグイン等のメモが

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

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

Initial thoughts on Bilski by opensourceway,

記事を読む

boxo fart by boxo, on Flickr Some rights reserved ネットオウルWPblog利用中方はプラグイン「w3-total-cache」インストールしちゃダメ!ゼッタイ! アイキャッチ画像

ネットオウルWPblog利用中方はプラグイン「w3-total-cache」をインストールしちゃ、ダメ!ゼッタイ!

なあ……ワードプレスなんですぐ死んでしまうん?~~(  ゜  ゜) なあ……なんでなん

記事を読む

サトウトシオ『宇宙をデバッグする、簡単なお仕事です』LP完成しました♪ でんでんランディングページトップ illust by サトウトシオ @310104o design by くつきちよこ でんでんランディングページ by ろす @lost_and_found さん

サトウトシオ『宇宙をデバッグする、簡単なお仕事です』LP完成しました♪

サトウトシオ『宇宙をデバッグする、簡単なお仕事です』LPでんでんランディングページ by ろす

記事を読む

一次創作向けハッシュタグ(日本語、英語)を調べてみました♪ アイキャッチ design by くつき

一次創作発信用の、英語ハッシュタグを調べてみました♪

下駄のようなHashtags 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト

記事を読む

甥っ子画伯のキッチュで奇妙ないきもの絵画展 Ⅱ 20140415-k-kizi-1_mini

甥っ子画伯の絵で電子しかけ絵本 4-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Gallery 透過ファイルの設定

  追記:「WordPressの更新後、『FlippingBook Gallery』の表示に不

記事を読む

Roadside: TPP Leesburg by GlobalTradeWatch, on Flickr Some rights reserved

TPP非親告罪化の動向が気になる創作クラスタがフォローしておくべきTWアカウント5選

  ネットですこ~しだけ、話題になっています「TPP非親告罪化」ですが、我々の生活にもたらされ

記事を読む

Hardcover book gutter and pages by Horia Varlan, on Flickr ページををめくるめくwpプラグインFlippingBook Galleryとか合成GIFとかの雑談

ページををめくるめく効果が簡単に作れるwpプラグイン『FlippingBook Gallery』とか合成GIFとか諸々

※サーバーが落ちてるのかここしばらくつながらない状態のようです。様子見のため、URLやサンプルページ

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

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