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

関連記事

through the roof by Andrew Hill, on Flickr 『#アホ男子母死亡かるた』が華麗に蘇生

炎の中から不死鳥のようによみがえった『#アホ男子母死亡かるた』に思う企業と個人の著作権

今年初めに炎上騒ぎとなった『#アホ男子母死亡かるた』が、華麗によみがえったようです♪

記事を読む

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やサンプルページ

記事を読む

html tattoo by webmove, on Flickr

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

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

記事を読む

Spanish dictionary pages up into the air by Horia Varla Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方

1-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 基本編

  追記:「WordPressの更新後、『FlippingBook Ga

記事を読む

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 その上「サイトの状況が赤点です」とGoogle様にも怒られました(/_;) アイキャッチ画像 IconDesign by くつきちよこ

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 ※解決済み

    Upload出来ない(/_;) ファイルの

記事を読む

Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 アイキャッチ画像 Lolita-kingyo illust by ss

3-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 見開きページの作り方

  追記:「WordPressの更新後、『FlippingBook Ga

記事を読む

"Pelikan Fountain Pen" Photo by David Blackwell. on Flickr Some rights reserved.

Twitter画像パクリ確認ツールとか、某通販サイトの手続きをミスってテンパった件など、期待に応えるグダグダ小ネタ3選

"Pelikan Fountain Pen" Photo by David Blackwell.

記事を読む

お助けいただいているアカウトのご紹介その一/セキュリティ関連 オマケ:Win更新関係 アイキャッチ画像:セキュリティアイコンくつきちよこ作

お助けいただいているアカウトのご紹介その1|セキュリティ関連 オマケ:Win更新関連その他

セキュリティアイコン 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト &n

記事を読む

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

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

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

記事を読む

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

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

  • マウスコンピューター/G-Tune