『Twitterカード(Twitter cards)』を設定

『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

 Google+ B はてブ  LINE  Feedly