『Twitterカード(Twitter cards)』を設定すると、Twitterでブログを共有する際に、写真や動画などのリッチメディアをツイートに添付して投稿することができます。
文章とURLのみの投稿に比べて視覚に訴えることが出来るので、アクセスが増加が期待できそうです。
すでにFaceBook用にOGP(オープングラフプロトコル)を設定している場合には、カードタイプの指定とカードのフッターで使用されるwebサイトのユーザー名のみの設定でOKです。
『Twitterカードとオープングラフ』より引用:
Twitterカードのプロセッサがページ上のタグを参照する場合、まずTwitterプロパティを確認し、存在しなければサポートされているオープングラフのプロパティを確認します。これにより、ページ上で両方を個別に定義でき、コンテンツとエクスペリエンスの記述に必要なマークアップの重複を最小限に抑えることができます。
まず、OGPを設定してから、『Twitterカード(Twitter cards)』を設定しましょう!
ここではWordPressにTwitterカードを設定する方法を説明します。
OGPを設定方法
https://fla-hoom.com/wordpress/wordpress-blog-ogp
OGPにTwitterカードを追加設定する方法
1.header.phpにHTMLを追加
header.phpの<head>~</head>に以下の2つのHTMLを追加します。
<meta name="twitter:card" content="summary" /> <!--カードタイプの指定--> <meta name="twitter:site" content="Twitterのユーザー名(@マークから始まります)"> <!--フッターで使用されるwebサイトのユーザー名の設定-->
ちなみにtwitter:cardのカードタイプは、
”Summary”、”Summary with Large Image”、”Photo”、”Gallery”、”Product”、”App”、”Player”
の7種類あります。
- Summary:
- デフォルトのカードで、タイトル、説明、サムネイル、Twitterアカウントの属性が含まれています。
- Summary with Large Image:
- Summaryカードに似ていますが、画像が目立つように使用されています。
- Photo:
- 写真のみを含めたカードです。
- Gallery:
- 4つの写真を集めて強調したカードです。
- App:
- モバイルアプリの詳細を含めて直接ダウンロードできるようにしたカードです。
- Player:
- 動画やオーディオ、スライドショーを視聴できるカードです。
- Product:
- 製品情報のために最適化したカードです。
2.検証ツールでURLを実行して申請
検証ツール Card validator
https://cards-dev.twitter.com/validator
にアクセスしてサイトのURLを入力し、
Preview card のボタンをクリック。
Preview card のボタンの下にグリーンで、
“(サイトURL)is whitelisted for summary card”
と表示されればOKです。
右側には、ツイートのプレビューとログが表示されます。
3.自分の記事をtwitterで共有して確認
Twitterカードを設定したサイトの記事をTwitterで共有して、見え方を確認してみましょう。
公開したくない場合はいったんツイートを非公開設定してからツイートすると良いと思います。
ツイートの公開または非公開設定
https://support.twitter.com/articles/20169930-
ツイートのタイムラインにはタイトルとリンク先のURLの表示しかされませんが、ツイートをクリックすると検証ツールで見たプレビューのような表示になります。
※2015年7月18日、記事をツイッターでシェアしたら、画像とタイトルが表示されるようになっていました!設定から20日〜25日くらいですね。
設定したら気長に待ちましょう。
参考サイト
カードのマークアップタグリファレンス
https://dev.twitter.com/ja/cards/markup
Twitterカード
https://dev.twitter.com/ja/cards/overview
カードのメタタグおよびTwitterのウェブクローラの仕組み
https://dev.twitter.com/ja/cards/getting-started