実は簡単! Twitterカードの設定方法 〜自分のサイトのURLが入ったツイートに「ページ概要」をつける〜
2016年02月07日

実は簡単! Twitterカードの設定方法 〜自分のサイトのURLが入ったツイートに「ページ概要」をつける〜

Twitterカード。
以前から存在は知っていたのですが、「難しそう」「ヘルプが英語で読む気なくなる」「ページごとにメタタグするのめんどくさい」と放置しておりました。

ですが今回、とりあえずトップページや主要なページにくらい設定してみようかと思い、Re:I本館に導入してみました。そしたら意外と簡単だったんです!
(ちなみにブログの方は、Seesaaブログが自動的に設定してくれています)

この記事では、Twitterカードの設定方法を説明していきます。


日本語版公式ヘルプの見方


調べているうちに、Twitterカードのヘルプの日本語版は「ない」わけではなく、リンクに失敗しているだけだということに気づきました。
例えば、「日本語版のページAの中のリンクをクリック→英語版のBのページへ(日本語版のBのページがあるにもかかわらず)」といった具合で、大変もったいないことになっているんです^^; あとは、個々のページは用意してあるのに、メニューがきちんと表示されなかったり。

日本語版と英語版の違いは、URLを見ると分かります。
英:https://dev.twitter.com/cards/overview
日:https://dev.twitter.com/ja/cards/overview
リンク先が英語版だったら、jaを付け足してみましょう。

Twitterカード 概要 日本語版直通リンク
Twitterカード スタートガイド 日本語版直通リンク
Twitterカード カードタイプ一覧 日本語版直通リンク ※本文中のリンクは英語版につながっていますが、左サイドメニューのリンクは日本語版につながっています。


Twitterカード用のメタタグを自分のサイトの<head>内に入れる


次の「メタタグ」を用意して、自分のサイトの<head>内に書き込みます。

必須のメタタグ
<meta name="twitter:card" content="カードのタイプ(※1)">
<meta name="twitter:title" content="ページタイトル(70文字以内)">
<meta name="twitter:description" content="概要(200文字以内)">
※1:Twitterカードには7種類あります。
Summaryカードなら「summary」
Summary with Large Imageカードなら「summary_large_image」
Photoカードなら「photo」
Galleryカードなら「gallery」
Appカードなら「app」
Playerカードなら「player」
Productカードなら「product」
と入力します。

任意のメタタグ(主要なもののみ)
<meta name="twitter:site" content="@ウェブサイトのユーザー名">
<meta name="twitter:creator" content="@コンテンツ作成者のユーザー名">
<meta name="twitter:image:src" content="画像URL(※2)">
※2:Twitter公式曰く、「ページの内容を表す独自の画像のURL。ウェブサイトのロゴ、作成者の写真、複数のページに使われている画像など、一般的な画像は使用しないでください。 使用できる画像の最小サイズは120×120ピクセルで、ファイルサイズは1MBまでです。ツイートの展開表示と詳細ページでは、画像が縦横比4:3にトリミングされ、120×90ピクセルに縮小されて表示されます。また、埋め込みツイートでは120×120ピクセルにトリミングおよび縮小されます」。……トップページだったらヘッダー画像とかサイトのスクリーンショットでも許してもらえるかな……。
また、Summary with Large Imageカードに使いたければ「幅280px以上、高さ150px以上である必要があります」とのことです。


<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Re:I">
<meta name="twitter:description" content="サイト概要">
<meta name="twitter:site" content="@Rei_Yumesaki">
<meta name="twitter:creator" content="@Rei_Yumesaki">
<meta name="twitter:image:src" content="画像URL">


プレビューして、URL付きでツイートするだけ


検証ツール「Card validator」のページの入力欄に、上記のメタタグを入れたページのURLを入力して「Preview Card」をクリックすると、実際にどのように表示されるか確認することができます。

※初回はここで承認申請(Request Approval)ボタンが出るらしいですが、Jimdoだからか僕は初めから承認済みの状態でした。

これで問題なく表示されたら、URLを含んだツイートをするだけ。なんだ、簡単じゃん!


こんなに簡単なのに、何故流行らないのか


僕がTwitterカードを「難しそう」と思っていた理由の1つは、企業のサイトならともかく、あまり個人のサイトがやっているイメージがなかったためです。何かすごく難しい処理が必要なのかと思っていました。
こんなに簡単なら、もっと流行っていてもよさそうなものですが……。

考えられるのは、
@十分流行っているけど、僕が知らないだけ。
ATwitter側のプロモーション不足。認知度が低い。
B認知度は十分だが、1ページ1ページTwitterカードの設定をするのはめんどくさいので流行らなかった。
こんなところでしょうか。

確かに1ページ1ページ設定するのは大変ですが、主要なページだけでも設定しておくと、タイムライン上でちょっと目立ちますし、プロフィール固定ツイートが華やかになると思いました!
スポンサーリンク
実は簡単! Twitterカードの設定方法 〜自分のサイトのURLが入ったツイートに「ページ概要」をつける〜
先月の人気記事 TOP5