*

Twitter(ツイッター)に運用しているサイト記事の概要が表示できるTwitterカードを設定しよう

公開日: : 最終更新日:2014/07/24 Web制作, 技術 , ,

Pocket


twitter-card

エンゲージメント率アップが狙える「Twitter Cards(ツイッターカード)」とは

twitter-cards-01

自社のサイトに記事を追加しても、ページビューがあがらない。TwitterやFacebookを使って記事を宣伝してもなかなか人が集まらない、なんてお悩みの方も多いはず。そんなときには、簡単な設定だけでツイッターでのアピール度がアップするTwitterカードがおすすめです。HTMLに数行のタグを追加するだけで、自社サイトの記事のリンクがツイートされるとそのツイートを見た人すべてにTwitterカードが表示されます。

設定できるカードの種類は7種類

Twitterカードは全部で7種類あります。

Summary Card
標準のカードです。タイトル、ディスクリプション、サムネイル、サイトのTwitterアカウントを含みます。
Summary Card with Large Image
Summaryカードに似ていますが、画像が目立つようになっています。
Photo Card
写真を表示するためのカードです。
Gallery Card
写真の収集を目立たせるカードです。
App Card
アプリケーションを紹介するためのカードです。
Playerカード
動画や音声プレーヤーカードです。
Product Card
商品を見せるためのカードです。

一番のおすすめは画像が大きく表示される「Summary Card with Large Image」です。しかし、記事に画像がない場合もあるかと思いますので、サイトには、「Summary Card」と「Summary Card with Large Image」を設定しておくのがベストだと思います。

自社サイトの運用でCMSを使用している場合は、記事に画像がある場合は「Summary Card with Large Image」記事内に画像がない場合は「Summary Card」が表示されるように設定しておくと効果的なツイートになります。

導入手順

Twitterカードを導入するには、以下の手順が必要になります。

  1. 実装するカードのタグを貼る
  2. 検証ツールできちんと表示されるかを確認する
  3. Twitterカードを申請する

まず、実装するカードを選んで該当するタグを貼ります。ここでは、「Summary Card with Large Image」の設定方法を紹介したいと思います。次にTwitterの検証ツールにログインをして、きちんと表示されているかを確認します。当然のことですが、このときにツイッターのアカウントがあることが必須となっています。Twitterカードは、設定したアカウント名でカードを表示することになるので、自社サイトのTwitterカードを設定する場合は、あらかじめ広報用のアカウントを用意しておく必要があります。最後に設定したTwitterカードをTwitterに申請すれば準備完了です。

設定方法

それではTwitterカードの設定をしていきます。

まずは、METAに貼るタグを設定します。設定するタグは以下になります。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:src" content="該当ページだけで使っているページのヘッダー画像イメージURL">
<meta name="twitter:site" content="@twitterアカウント">
<meta name="twitter:description" content="ページの概要200文字程度">
<meta name="twitter:title" content="ページのタイトル60文字程度">
<meta name="twitter:url" content="ページのURL">

記事内に画像がない場合は標準カードの「Summary Card」のタグを設定しましょう。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@twitterアカウント">
<meta name="og:image" content="サイトロゴなどのサイト内で共通使いまわしている画像URL">
<meta name="og:description" content="ページの概要200文字程度">
<meta name="og:title" content="ページのタイトル60文字程度">
<meta name="twitter:url" content="ページのURL">

自社サイトでCMSを使っている場合は、CMS上で条件分岐をしておき、記事中に画像がある場合とない場合で上記のタグを発行するように設定すると、効果的にTwitterカードを配信できます。詳しいタグは「Twitterの開発者用サイト」をご覧ください。

次に、サイトに設定したタグがきちんと設定されているかを「Twitter Card Validator」で確認します。サイトにアクセスするとTwitterカードの種類を聞かれますので、「Summary Card with Large Image」を選択。

twitter-cards-02

「Validate&Apply」のタブをクリックして設定したページのURLを入力し「GO!」をクリック。

twitter-cards-03

「Twitter Card Validator」は、firefoxには対応していないようですので、chromeなどでアクセスしましょう。firefoxでアクセスするとプレビュー画像が表示されません。

Twitterカードの申請

設定の最後に申請します。Twitterカードの設定内容があっていると「Request Approval」のボタンがでてきますので、クリックして申請画面へ移動します。
twitter-cards-05
申請内容を入力して「Request Approval」をクリックして完了。申請したメールアドレスに登録完了通知が届きます。
twitter-cards-04

設定するときの注意点

Twitterカードは、その種類ごとに申請をしないと表示されません。「Summary Card with Large Image」を申請したからといって「Summary Card」の申請ができたかというとそうではなく、あらためて「Summary Card」も申請する必要があるので注意してください。

sponsored link

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

PHOTOSHOP用カラーパレット_JIS慣用色名byWikipedia

WikiPediaに乗っていたJIS慣用色名をPHOTOSHOP用のカラーパレット用に作成してみた。

記事を読む

no image

google AnalyticsでFlashをアクセス解析する

FLASHのサイトのアクセス解析をしたくても、なかなか良い方法が思いつかずに、どうしたものかとしばら

記事を読む

Mobility and cloud computing concept

viewportの設定はこれで大丈夫!iOSでもAndroidでもPCでも見やすくできるソースコード

スマホ用サイトを製作するにあたって検討しなければならない事項に画面の幅に合わせる必要があると思い

記事を読む

no image

デスクトップにアナログマークを表示するアプリをつくってみた【アナログキャンペーン】

デスクトップの右上最前面に常に「アナログ」マークを表示するアプリをつくってみた。 analogは、た

記事を読む

sponsored link

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

SPONSORED LINK

Content Flow Chart Blackboard
【保存版】コンテンツマーケティングを行う前にチェックしたい記事16選

サイトへの集客を強化したいのだけど、広告費の予算にも限りがあるから

photo-2015-02-01-14-29-32
「いちばんやさしい新しいSEOの教本」を読めばSEOの基礎が実践できるバイブル的な一冊

SEO(検索エンジン対策)の目的とは、そもそもなんでしょうか。

Toolbox with tools. Skrewdriver, hammer, handsaw and wrench
Web担当者がオススメするサイト運用に役立つツール28選

自社のウェブサイト管理を任されている方には、おすすめのツールをご紹

Depositphotos_28048133_xs
スマホサイトをプレビュー(表示確認)する際に便利なChromeのDeveloper Toolsのエミュレーター

ウェブページを制作するときに、ページがブラウザでどのように表示

Mobility and cloud computing concept
viewportの設定はこれで大丈夫!iOSでもAndroidでもPCでも見やすくできるソースコード

スマホ用サイトを製作するにあたって検討しなければならない事項に画面

→もっと見る

  • follow us in feedly
PAGE TOP ↑