MB-Support

パソコン初心者のサポートページ

Twitter:概要を表示させる方法 Twitter Cards & Open Graph protocol


Twitter(ツイッター)のツイートに URL を挿入した場合、通常はテキストリンクとして表示されますが(URL をクリックすると URL にアクセスします)、「概要を表示」ボタンが表示されるものもあります。これをクリックすると、URL の WEB サイトが指定したタイトル、要約、画像が表示され、クリックすると WEB サイトにアクセスできます。これのメリットは、URL だけでは信用できない人にも、要約と画像が表示されることで興味・関心を持たせる効果が期待できます。これを表示されるには、以下、2 つの作業が必要です。


@Twitter Developers(ツイッター開発者)にサインインして許可を得る

AWEB ページにメタタグを挿入する


概要を表示するのは「Twitter Cards(ツイッターカード)」と呼ばれる機能で、表示方法にいくつか種類があります。動画の再生やアプリのダウンロードを促すカードタイプは、審査に時間が掛かるようですが(試していないので不明)、一般的な Summary(要約)を表示するタイプは、すぐに許可が下りました。

問題はメタタグの挿入です。各ページにメタタグを挿入する必要があるため、ブログなどのサーバーサイドスクリプトで管理された WEB サイトは、テンプレートやプログラムに直接組み込むことが容易ですが、HTML を手動で更新している WEB サイトは、静的なページ毎にメタタグを挿入する必要があります。MB-Support は、静的なページが 5 千ページほどあり、リンクされるとも限らない全てのページを更新するには時間を要します。ただ、これから作成するページだけでも、メタタグを挿入していこうと考えています。まず、WEB サイトのトップページを対応させてみましょう。各ページに挿入するタグは以下。


<html xmlns:og="http://ogp.me/ns#">
<head>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitterのユーザー名">
<meta property="og:type" content="website">
<meta property="og:title" content="ページのタイトル">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="画像のURL">
<meta property="og:description" content="ページの説明">
<meta property="og:site_name" content="サイトの名前">
</head>

OGP(Open Graph protocol)なので、Twitter だけではなく、facebook、mixi、GREE などにも対応できます。

The Open Graph protocol



名前空間

HTML

<html lang="ja" prefix="og: http://ogp.me/ns#">

XHTML

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#">


Twitter カードの種類

Twitter カードの種類を指定します。カードの種類は Twitter Developers の Twitter カードに掲載されています(英語ですが日本語に切り替えられます)。今回は、タイトル、ディスクリプション、サムネイル、サイトの Twitter アカウントを含む標準のカード「summary」を指定します。

Twitterカード - Twitter Developers

<meta name="twitter:card" content="summary">


Twitter ユーザー名

Twitter のユーザー名を @ から指定します。

<meta name="twitter:site" content="@Twitterのユーザー名">


WEB ページの種類

WEB ページの種類を指定します。ここからは、Twitter カードのメタタグではなく、OGP のタグになります。Twitter カードの種類に関係しますが、WEB ページ、あるいは、Blog のトップページならば「website」を、それ以外のページには「article」を指定します。

<meta property="og:type" content="website">

website

このオブジェクト タイプは、web サイトを表します。単純なオブジェクト型であり一般的な開いているグラフ プロパティのみを使用します。Web サイト内の特定のページには、'article' を使用してください。

article

このオブジェクトには、ウェブサイト上の記事を表します。ブログの記事やニュース記事の場合に指定します。

Object Types - Open Graph Reference Documentation



ページのタイトル

ページのタイトルを入力します。title タグに入力した文章をそのままコピペすれば良いでしょう。

<meta property="og:title" content="ページのタイトル">


ページの URL

ページの URL を「http://」から入力します。

<meta property="og:url" content="ページのURL"> 


画像の URL

概要の右に表示する画像の URL を「http://」から入力します。summary の場合は、最小サイズが 120px × 120px(いずれか)で、それより小さい画像は表示されず、大きい画像はトリミングされます(正方形)。画像容量は 1 MB 未満です。詳細は以下のリンク先に掲載されています。

<meta property="og:image" content="画像のURL"> 

Summary Card | Twitter Developers



ページの説明

ページのコンテンツを簡潔に要約した説明を入力します。200 文字まで表示され、それ以上は切り捨てられます。

<meta property="og:description" content="ページの説明">


サイトの名前

ページタイトルとは別に、サイト名を入力します。

<meta property="og:site_name" content="サイトの名前">


例えば、MB-Support のトップページのメタタグは右です。



Twitter Developers に申請

メタタグを挿入したら、Twitter Developers(ツイッター開発者)にサインインします。Twitter と同じユーザー名とパスワードを入力して「Login」ボタンをクリックします。



「Twitter Cards」をクリックします。



「Try Them」をクリックします。



カードの種類は「Summary」「Summary Card with Large Image」「Photo Card」「Gallery Card」「App Card」「Playerカード」「Product Card」「リード・ジェネレーション・カード」「ウェブ・サイト・カード」などがあり、審査に掛かる時間が異なるようです。今回は、先にメタタグを挿入したとき、Twitter カードの種類で「Summary(要約)」を指定したので、ここでも「Summary」をクリックします。



「Card Validator」が開きます。ここで入力したデータが、Twitter Cards の仕様に沿っているかを確認できます(バリーデーション)。プレビューも可能のようですが、私の環境の Internet Explorer 11 ではサポート外になっていました。「Validate & Apply」タブをクリックして、表示された入力フォームに、先ほどメタタグを挿入したトップページの URL を貼り付けます。最後に「Go!」ボタンをクリックします。



入力した URL のデータを解析して表示されます。本当は、右のプレビューで確認するのが無難ですが、今回は左の緑の丸で判断します。実際に私が挿入したメタタグ以上に指定できますが、私にとって必要なデータは全て挿入したので、この状態で申請します。「Request Approval」をクリックします。



Request Domain Approval(ドメインの承認)にて、Website Domain(WEB サイトのドメイン)、Website Description(ホームページの要約)、Website Twitter Username(Twitter のユーザーネーム)を入力します。Mark my cards as containing sensitive content のチェックは、WEB サイトが機密性が高いコンテンツを含む場合にチェックします(サイトを閲覧するのに承認が必要なサイト)。Twitter のユーザーネームに登録されているメールを受信できる環境が必要です。



Card Type Requested には「Summary(要約)」を、Example URL にはサイトのトップページを入力します。最後に、「Request Approval」ボタンをクリックします。



Twitter アカウントに登録されているメールアドレスに「Your Twitter card is ready!(Twitter カードの準備ができました)」と題したメールが届きます。「Summary」の審査は数分でした。登録したドメインのTwitter カードが承認されたとあります。



いつ反映されるのか?Card Vailidator でスキャンした URL は、Twitter を「F5」キーなどで更新すると表示されます。しかし、時間が経てばスキャンしなくても表示されるようになると思われます(現時点では1日経過しましたが、自動で更新されることはない)。また、Twitterアナリティクスを利用するには、24 時間ほど掛かります。

Twitterアナリティクス

MB-Support - Twitterr

追記:申請の許可が下りて 72 時間後、スキャンせずに過去のツイートにも「概要を表示」ボタンが表示されました。もちろん、メタタグを挿入したページのみ。



戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項