プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
Twitterカードの設定をしてみた
わわわIT用語辞典に対して、Twitterカードの設定をしてみました。
備忘録を兼ねて、やり方をメモっておきます。

ちなみに、TwitterカードはTwitterに張ったリンクを目立つようにするやつね。
URLだけでなく画像とか説明なんかも表示されるようになります。
設定すると、こんな感じの見た目になりますよφ(--)

20160730-01.png


それでは設定方法ですが……の前に概要を説明しておくと、
基本的な作業はページにmetaタグを埋め込むだけです。
metaタグを埋め込んだページのURLをツイートすると
Twitter側が自動で見た目を調整してくれます。

逆に言うと、metaタグを設定していないページのURLをツイートした場合は
つぶやく人がいくら頑張っても、画像や概要は表示されません。
Twitterカードは、つぶやく人ではなく、ページを管理している人が設定するものです。

それでは、具体的な設定方法を書いていきます……の前に、
本ページで説明するのは

OGPのタグにTwitterカード特有のタグを追加

なやり方です。
全部Twitterカード特有のタグにすることも可能ですが、
Facebookとかに流用できるのでOGPのタグも設定しておいた方が便利だと思います。

それでは、今度こそ設定方法を書いていきます。

まず、HTML5でページを作っている人は

<head>



<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

に書き換えます。

XHTMLとかで作っている人は

<html>



<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

に書き換えてください。

これはOGPを記述する際のお約束事です。
意味を気にする必要はありません。
ぶっちゃけ、書いてなくても動いたりしますが、一応書いておいてください。

次に以下のメタタグを設定します。

<meta property="og:title" content="【ページタイトル】">
<meta property="og:description" content="【ページの内容説明】">
<meta property="og:url" content="【ページのURL】">
<meta property="og:image" content="【表示する画像のURL】">
<meta name="twitter:card" content="【カードの種類】" />
<meta name="twitter:site" content="【Twitterアカウント】" />

仮に全部、Twitterカード特有のタグで書くと

<meta property="twitter:title" content="【ページタイトル】">
<meta property="twitter:description" content="【ページの内容説明】">
<meta property="twitter:url" content="【ページのURL】">
<meta property="twitter:image" content="【表示する画像のURL】">
<meta name="twitter:card" content="【カードの種類】" />
<meta name="twitter:site" content="【Twitterアカウント】" />

になります。
要は「twitter:」の一部のタグを「og:」で置き換えられるわけです。
「og:」で始まっているのが、OGPのタグです。
「twitter:」で始まっているのが、Twitterカード特有のタグになります。

設定する内容は何となく分かると思いますが【カードの種類】を補足しておきます。
【カードの種類】は、Twitter上に表示される際の見た目です。
基本は「summary」ですが、他に「photo」や「gallery」などがあります。
詳細は以下のURLからリンクを辿って確認してください。

■カードタイプ
https://dev.twitter.com/ja/cards/types

また、ページタイトルやURL以外にも設定できるタグがあります。
詳細は以下のURLからご確認ください。

■カードのマークアップタグリファレンス
https://dev.twitter.com/ja/cards/markup

ふぃ~、これでページの編集作業は終了です。
参考までに、私は以下の内容を設定しました。

■トップページ
<meta property="og:title" content="「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典">
<meta property="og:description" content="正確ではないけど何となく分かる、IT用語の意味を「ざっくりと」理解するためのIT用語辞典です。専門外の方でも理解しやすいように、初心者が分かりやすい表現を使うように心がけています。">
<meta property="og:url" content="http://wa3.i-3-i.info/">
<meta property="og:image" content="http://wa3.i-3-i.info/img/prof_wa3piyo.png">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@wa3_pcs" />

■用語詳細ページ(例)
<meta property="og:title" content="拡張現実 (AR)とは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典">
<meta property="og:description" content="用語「拡張現実 (AR)」の説明です。">
<meta property="og:url" content="http://wa3.i-3-i.info/word15048.html">
<meta property="og:image" content="http://wa3.i-3-i.info/img/data/5000/d005048-1.png">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@wa3_pcs" />

さて、次に行きましょう。
ページの編集が終わったらTwitterに申請します。

「申請」といっても難しいことはありません。

https://cards-dev.twitter.com/validator

にアクセスして「Card URL」にmetaタグを設定したページを指定して「Preview card」を押すだけです。
私がやったときは、成功したら

*.wa3.i-3-i.info is whitelisted for summary card

と表示されて、Twitterカードのプレビューが表示されました。

20160730-02.png
※クリックで拡大します


実は「全ページ、試さないとダメなのかな?」とビビっていたのですが
申請はトップページのみで大丈夫でした。

ドメインを認識させればOK……なのかもしれませんし、
下手すれば申請しなくても大丈夫かもしれません。
申請前につぶやいてみるの、やってみようと思いつつ忘れちゃったのですよね(^^ゞ

申請しないでつぶやいてみて、ダメだったら申請する、でもいけそうな気はします。
とはいえ、そこまで手間でもないので、普通に申請してあげてください。

作業はこれで完了です。
お疲れ様でした。
URL付きでつぶやくと、こんな感じで画像とかが表示されるはずですφ(--)

20160730-03.png


最後にまとめておきますね。
Twitterカードの設定は

1.ページにmetaタグを追加する
 追加するmetaタグは

<meta property="og:title" content="【ページタイトル】">
<meta property="og:description" content="【ページの内容説明】">
<meta property="og:url" content="【ページのURL】">
<meta property="og:image" content="【表示する画像のURL】">
<meta name="twitter:card" content="【カードの種類】" />
<meta name="twitter:site" content="【Twitterアカウント】" />

 もしくは

<meta property="twitter:title" content="【ページタイトル】">
<meta property="twitter:description" content="【ページの内容説明】">
<meta property="twitter:url" content="【ページのURL】">
<meta property="twitter:image" content="【表示する画像のURL】">
<meta name="twitter:card" content="【カードの種類】" />
<meta name="twitter:site" content="【Twitterアカウント】" />

 が最低限の内容です。

2.申請する(本当に必要かは検証し忘れました)
 https://cards-dev.twitter.com/validator
 にアクセスしてURLを入力してボタンを押す

で、できます。

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● その他  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト