ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

TumblrにTwitter cardを設定する方法。

image

Twitter上にて、URLつきツイートをクリックして詳細を開いたときに、リンク先の概要が表示されるのを見たことがありませんか。それがTwitter cardと呼ばれているらしいです。Tumblrで作ったサイトだと、特に作業しなくても対応しているはずなんですが、どういうわけかデフォルトだとトップページにしか対応していません。

広告

Tumblrがデフォルトで出力するコード。

ブラウザのソースコード表示機能を使って、Tumblrで作ったサイトのトップページを開いてみます。すると、以下のようなコードが書かれています。なお、カスタマイズ画面を開くのではありません。

このタグが書かれているおかげで、TwitterでこのページのURLをつけて投稿すると、概要が表示されるようになるのです。しかし、何かの記事の詳細ページを開いてからソースコードを見てみると、上記のようなタグが無くなっているのです。つまり、個別記事のURLをつけてTwitterに投稿しても、概要が何も表示されません。トップページなんかよりも、記事内文章の抜粋を出してほしいのに。
また、上記のコードを自動出力するための独自タグがあるのかと思ってカスタマイズ画面を開いてみましたが、一切見当たりませんでした。現在の本サイトはデフォルトのテーマ(optica)から少々手を加えているので、そのせいで出力されなくなったのかと思ったのですが、デフォルトのテーマに戻したところで、結果は同じでした。テーマに関わらず、Tumblrそのものの仕様のようです。

Tumblrに対応したコードを作る。

こうなったら、Tumblrの自動機能には任せず、自分でTwitter cardのコードを書いた方が良さそうです。それが以下のコードです。なお、これはタグ内に入れてください。

各metaタグの詳しい機能は他のサイトを見ていただくとして、Tumblrで書くうえで特に厄介なところがdescription。記事本文の抜粋を表すところです。しかし、本文から先頭の数十文字分だけ抜き取ってくるような独自タグが見つからなかったため、仕方なく本文全体を出力する{body}タグで代用しています。

descriptionのcontent内に、htmlタグも含めて本当に記事の全文出力されてしまうのですが、Twitter上で表示される際に、多すぎる文字がカットされるうえに、htmlタグは除去されるので見た目上は問題ありません。ただしソースコード上では全文出ているので、あまりすっきりしないソースではあります。なお、{body}は{block:Posts}で囲んでおかないと機能しません。

シングルクオートが全角になっていますが、本来は半角なので置き換えしてください。この記事本文もmetaタグ内に入ってしまうため、シングルクオートが二重になって記事が崩れてしまうことへの、苦し紛れの対処です。文字参照で書いても、なぜか元に戻されるから困る。

記事にタイトルがなければ{PostSummary}という独自タグで本文の抜粋が表示されるのですが、タイトルがある場合はタイトルが表示されてしまいます。タイトルを表示するための独自タグは、また別に存在するにも関わらず。ほんと、なんでTumblrは気の利かない独自タグが多いんだ。

また、imageのcontent内には何も書いていないのですが、記事内の最後の画像が自動的に選ばれるため、書かなくても問題ありません。Tumblr側かTwitter側どちらのおかげかはっきりしませんが。

しかし、最後の画像が選ばれてしまうため、ネタバレを回避したい場合は注意が必要です。かと言って、記事内の最初の画像だけのURLを出力するような、そんな都合の良い独自タグも見つからないため、解決策は今のところありません。

あと、自分でTwitter cardのコードを追加すると、Tumblr側によるTWITTER TAGSで始まる自動タグ出力はされなくなりました。

cardをすぐに反映させる。

Twitter cardのコードを追加し終わっても、過去に投稿したツイートの場合、ツイートに概要が表示されるまでにものすごく時間がかかることがあります。Twitterが持つクローラが巡回してくるまで待つ必要があるようです。

Card Validator | Twitter Developers

Twitter上でcardがどのように表示されるのかは、上記のサイトにURLを入れてみることで、テスト結果を確認することができます。(2014年頃に書かれた他のサイトの記事を見てみると、申請が必要だの何だの書かれていますが、今は不要です。)コードがちゃんと書かれていれば、正常な結果が表示されるはずです。

さらに、上記サイトはただテストするだけでなく、Twitterに反映されるまでの時間を短縮する効果があるようです。どうしてもすぐに概要が出るようにしたい、クローラが巡回してくるまで待てないというときは、該当する記事のURLを片っ端からValidatorに掛けていくと良いでしょう。ぼくの場合は表示されるまで5分程度になってくれたのですが、状況によりけりだと思われます。