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

関連記事

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

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

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

記事を読む

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

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

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

記事を読む

ワードプレスの不具合騒動、利用中のレンサバ統合されるってよ、など。 恐怖のエラー画面

「ワードプレスの不具合騒動(未解決)」と、「利用中のレンサバ統合されるってよ」など。

  サトウトシオのサイトがバグりました; ホラーなエラー!に驚いたる赤ちゃんのアイコ

記事を読む

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

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

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

記事を読む

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 もくじ ドキ!トラ

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

ツイッターに投稿したコンテンツは誰のもの?

Photo by Lindsey Bieda もくじ いきなりTwitterとは関係ない

記事を読む

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

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

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

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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

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