WEBマスターの手帳 > ソーシャルメディアマーケティング > Twitterのつぶやきに記事のサムネイル画像や概要を表示できる【Twitter Cards】

ソーシャルメディアマーケティング

2013年2月21日

Twitterのつぶやきに記事のサムネイル画像や概要を表示できる【Twitter Cards】

example-card-web-summary-3.png
Twitter 1 Facebook Google+ はてブ 1 Pocket チャットワーク Eight Feedly

Twitterとブログはただ投稿をシェアするだけでは不十分。ちゃんとブログ投稿のサムネイル画像や概要が表示されるように設定しましょう。


スポンサードリンク

Twitter Cardってなに?

Twitter Cardsを設定すると、誰かがURLをツイートしたときに「表示される記事のサムネイル画像や概要」を設定することができうえに、ブログ記事を書いた人のTwitterアカウントも表示させることができるようになります。

Facebookで「シェア」した時のような表示になるので、記事へのアクセスが増えたり、アカウントをフォローしてもらえたりという効果が期待できそうです。

WordPressで設定する方法

Twitter Cadrを設定するためには3つの手順があります。

  1. metaタグを追加する
  2. 表示を確認する
  3. Twitterのフォームから申込み

1.metaタグ

実際のところ、Twitter Cardsを表示するために書かなければならない必須項目などがあり、メンドクサイです。手書きで書く場合は以下のソースコードを<head>タグ内に書き込みます。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_username">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="@creator_username">
<meta name="twitter:image:src" content="http://placekitten.com/250/250">
<meta name="twitter:domain" content="YourDomain.com">
<meta name="twitter:app:name:iphone" content="Vine">
<meta name="twitter:app:name:ipad" content="Vine">
<meta name="twitter:app:name:googleplay" content="Vine">
<meta name="twitter:app:url:iphone" content="vine://v/">
<meta name="twitter:app:url:ipad" content="vine://v/">
<meta name="twitter:app:url:googleplay" content="http://vine.co/v/">
<meta name="twitter:app:id:iphone" content="">
<meta name="twitter:app:id:ipad" content="">
<meta name="twitter:app:id:googleplay" content="com.foursquare.android">

WordPressでプラグインを使えば簡単

せっかくWordpressを使っているのですから、そのメリットを有効活用しましょう!

今回は、その名もズバリの【Twitter Cards】で設定してみます。プラグインをインストールして、有効化します。
完了です。なんて簡単!

有効化するだけでソースコードをhead内に書き込んでくれます。自分でmetaタグを書き込む必要はありません。

2.表示を確認する

Card Validator | Twitter Developersで、記事のURLなどを入れて、ちゃんと表示されるか確認しましょう。

Twitterカードの動作確認
※この画像のように表示されていればOKです。なにかタグが足りない場合は、書き込みが必要なタグが表示されます。

この記事が良いと思ったらシェアしてください

Pocket

御社のターゲット像を明確にする!ペルソナ作成シート

ペルソナ作成シート

WEBマーケティングで重要なのが「相手は誰?」というターゲット像を明確にすることです。

そこでWEBサイトを訪問する人は誰?企業ブログを訪問する人は誰?SNSで繋がりたい人は誰?これらターゲット像を明確にするための「ペルソナ作成シート」を【無料】で配布しています。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

example-card-web-summary-3.png

この記事に「いいね」と思ったらフォローしてね!


この記事を読んだ方におすすめの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

  • ソーシャルメディア活用チェックシートのダウンロード
  • ペルソナ作成シートのダウンロード
  • @webmaster_note
  • Instagram

最新記事一覧

あなたにオススメの記事

ピックアップ記事一覧

カテゴリー

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事