Twitterやfacebookでシェアされた時の見え方を調整する

Twitterもfacebookもデザインやフロー、加えて仕組みも頻繁に変更するので、こういった手順書サイトを見なくても臨機応変に対応できる能力を身に付けるのが実は重要。

重複が多くて冗長になりがちで、CMS等での自動挿入でなければやりたくない感じだ。

Twitterでシェアされた時の見た目

見た目はこんな感じ。


Twitterでのシェア時の展開されたアレはTwitter Cardと呼ばれている。
以下に一番メジャーな気がするsummaryのパターンを示す。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_official">
<meta name="twitter:creator" content="@author">
<meta name="twitter:title" content="twたいとる">
<meta name="twitter:description" content="twせつめい">
<meta name="twitter:image" content="https://cdn.example.com/example.png">
<meta name="twitter:image:alt" content="画像のalt">

カードは4種類あり、それぞれ必要なプロパティ(name属性とcontent属性のペア)が異なる。

summary
小さめ画像のカード。summaryカードの詳細
summary_large_image
大きめ画像のカード。summary_large_imageカードの詳細
app
スマホアプリ。appカードの詳細
player
動画プレイヤー。playerカードの詳細

Twitterも後述のOGPを一部解釈するため、OGPが併記されている場合はそちらにフォールダウンされる場合がある。

metaによる文字コード指定が無いとエラーになる(というかHTML的にも無いとNGだけどね)。

確認作業(兼 事前作業)

Card Validator | Twitter Developersでテストできる。若干キャッシュが強めで、少し待ったり画面をリロードしたりするとうまくいく。

Twitter CardのデータはTwitterのクローラで情報を取りに来てキャッシュする。
IPアドレスレンジは199.16.156.0/22199.59.148.0/22、画像も含めて.htaccessなどで制限しないように気をつける。
robots.txtも尊重する。クローラの名前はTwitterbot

本番環境のキャッシュのリフレッシュ機構は無いそうで、なんとカード内容はダミーのフラグメント(URL末尾に#hogehogeとか付ける)を噛ませてbit.lyで適当なURLを作って試せとある。画像は適当なGETのパラメータ(URL末尾に?hogefugaとか付ける)を噛ませて試すそうな。大手がそんな土方っぽいので良いのか。。一応一週間くらいでキャッシュが更新されるらしい。

facebookでシェアされた時の見た目

facebook(とか実はmixiとか)でのシェア時の見た目調整には、Open Graph Protocol(OGP)っていうのを使う。見た目はほぼTwitterと同じなので割愛。
head内にproperty=名前 content=値のペアでmetaを幾つか追加する。そもそもmetaにpropertyっていう属性無いんだけどね...
htmlprefix="og: http://ogp.me/ns#"っていう属性を追加する。htmlにもprefixっていう属性無いんだけどね...
以下に例を示す。ね、簡単でしょ。

<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<title>たいとる</title>
<meta property="og:title" content="fbたいとる">
<meta property="og:description" content="fbせつめい">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.example.com/article/the-new-article.html">
<meta property="og:image" content="http://cdn.example.com/images/article.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ja_JP">
...
</head>
...
</html>

ご覧の通り、HTMLで指定したもののダブりになるものが多い。
以下プロパティは必須:

og:url
基本的にそのページのURL。別のURLを入れるとリダイレクトされてそちらのOGPが読まれるので、link rel=canonical的に利用できる。
og:type
そのURLの情報の種類。 websitearticleproduct.itemなど。Open Graph参照ドキュメント - ドキュメンテーション - 開発者向けFacebook » Object Types参照(英語)。種類に合わせて追加のプロパティが指定できるよ。追加の必須のプロパティがあるものもあるので注意。
残りの部分はAPI経由でOpen Graphのオブジェクトとして利用する事に価値があり、見た目上で何か追加の情報が表示されるわけではないので、こだわりが無ければwebsiteにしておくと良い。
og:title
だいたいtitleと同じ。facebookでだけ変えたい場合は別の値を指定。
og:description
だいたいmeta name=descriptionと同じ。facebookでだけ変えたい場合は別の値を指定。
og:image
キャッチ画像。公式ヘルプによると最低200x200以上、600x315が閾値で大きめの表示、1200 x 630がベストらしい。ただ、閾値については、下回っても必ずしも正方形型になるわけではないので、シェアデバッガー(後述)でちゃんとテストしよう。og:image:widthog:image:heightで幅と高さを数値で指定するのがベターとあるが、指定しても画像のサイズと違う場合はどうやら無視される。容量は最大8MB。
fb:app_id
facebookアプリのID。facebookアプリIDの取得方法参照。

すべてのURLは絶対URL

以下プロパティは任意:

og:locale
言語。デフォルトはen_USらしいのでja_JPにしとかないとマズそうだけど、みんな設定してないし大丈夫かもしれない。
og:image:width
og:imageの幅。
og:image:height
og:imageの高さ。

確認作業(兼 事前作業)

最初に展開した人には画像が表示されないため、シェアデバッガーで表示して事前にキャッシュする必要がある。何それと思うだろうけど、ヘルプに書かれているし実際その通り。見た目の確認もここでできるので、ぜひ確認しておくべき。

初回は以下のような表示になるので、「新しい情報を取得」をポチる。

キャッシュなので、更新した場合もシェアデバッガーでキャッシュを更新する必要がある。これの「もう一度スクレイピング」をポチる。

シェアデバッガーはfacebookのクローラを使ってデータを取りに来るので、IPアドレスやrobots.txtで制限していたら見に来れない事がある。対象のIPアドレスのリストはwhois -h whois.radb.net -- '-i origin AS32934' | grep ^routeで出てくるそうだが、ものすごく多い。クローラの名前はFacebot

参考