Twitterカードなるものがあるのか

ウェブサイトを更新した時には、大抵は更新内容をTwitterに投稿している。その際、URLを記載し投稿している。その後なんとなくTwitterを眺めていることが多い。「んっ!?なんだこれは」。眺めているとき、あることに気がついた。サイトを紹介しているツイートの多くには、画像とサイトの説明文が四角い枠に囲まれて表示されている。僕のツイートにはそのような表示はない。ただウェブサイトURLとそれを紹介している僕が書いた文章が載っているだけだ。「ツイートの仕方に何かしらそういった四角い枠を表示させるテクニックがあるのだろうか」

ともかく検索してみようと「twitter 四角い枠 写真 説明」といったワードをブラウザの検索窓に叩き込む・・・・判明!


Twitterカード!?

件の四角い枠はどうやら「Twitterカード」というものらしい。Twitterカードとは、リンク先の内容を魅力的に魅せるための仕組のようだ。

Twitterカードを使用すると、豊富な写真、ビデオ、メディアエクスペリエンスをツイートに添付して、Webサイトへのトラフィックを増やすことができます。あなたのWebページに数行のマークアップを追加するだけで、ツイートにあなたのコンテンツをリンクさせるユーザーは、彼らのフォロワーに見える「ツイート」に「カード」が追加されます。

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards

なるほど。こういったものがあるのか。早速設定してみよう。基本的には下記のようなマークアップをするだけで良いということだ。

Cardsマークアップの実装を始めるには、ページのHEADセクションに次のHTMLマークアップを追加して、コンテンツのカードの種類を指定します。

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html

1ページにつきサポートされているカードタイプは1つだけです。
twitter:cardページに複数の値が存在する場合は、順番に「最後の」値が優先されます。

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html

マークアップ例

<meta name = "twitter:card" content = "カードの種類" />
<meta name = "twitter:site" content = "@ユーザー名" />
<meta name = "twitter:creator" content = "@ユーザー名" />
<meta property = "og:url" content = "サイトのURL" />
<meta property = "og:title" content = "タイトル" />
<meta property = "og:description" content = "内容" />
<meta property = "og:image" content = "画像のURL" />
カード資産説明
twitter:cardカードの種類。「summary」、「summary_large_image」、
「app」、「player」のいずれかになります。
twitter:siteカードフッターで使用されているWebサイトの@username
twitter:creatorコンテンツ作成者/作成者の@username。

オープングラフ

上のマークアップ例にある下4段のマークアップは「オープングラフ」のものだ。

「オープングラフ」とは、Twitterカードのように他のSNSでカード状に表示される情報のようだ。

Twitterカードとオープングラフ

TwitterのカードタグはOpen Graphのタグと似ており、Open Graphのプロトコルと同じ規則に基づいています。
Open Graphプロトコルを使用してページ上のデータを記述すると、タグやデータを複製することなくTwitterカードを簡単に生成できます。
Twitterカードプロセッサは、ページ上のタグを探すときに、まずTwitter固有のプロパティをチェックし、存在しない場合は、サポートされているOpen Graphプロパティにフォールバックします。
これにより、両方を独立してページ上で定義することができ、コンテンツと経験を記述するために必要な重複マークアップの量を最小限に抑えることができます。
Open Graphでは「og」RDFa Core 1.1 CURIEプレフィックスマッピングを指定することを推奨して
<html prefix="og: http://ogp.me/ns#">いますが、Twitterカードおよびその
twitter:HTMLメタ要素のname属性でのプレフィックスの使用には、このようなマークアップは必要ありません。
Open Graphプロトコルはproperty、Twitterカードがandを使用している間のcontentmarkup(
<meta property="og:image" content="http://example.com/ogp.jpg"/>)の使用と属性も指定します。Twitterのパーサーはandの使用にフォールバックするので、既存のOpen Graphプロトコルのマークアップが既に存在する場合は変更する必要はありません。name content property content

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html

WordPressのプラグインを使ってTwitterカードを設定しよう

WordPressのプラグインを使えば簡単にTwitterカードを設定できます。僕が使ったプラグインは「YAHMAN Add-ons」。

  • まずは「設定」>「YAHMAN Add-ons」から上の「SNS」タブをクリック
  • 次にTwitterの項目にユーザー名を入力
  • 次に「SEO」タブをクリック
  • Open Graph Protocol(OGP)をmetaデータに追加するをチェック
  • OGP イメージ画像 を選択する
  • Twitter Cardを選択する

以上で設定終了です。設定するとこんな感じになります。

是非フォローしてください

最新の情報をお伝えします