画像への直リンを Twitter Cards に対応させる

twitter

php

画像直リンの Twitter Cards - 画像への直リンを Twitter Cards に対応させる

サイトはしばらく前に Twitter Cards に対応させたので、エントリへのリンク ( https://blog.cles.jp/item/7854 ) をツイートに貼ると概要が TL に表示される状態になっていましたが、最近ちょっと気になっていたのは画像へのリンクです。

画像のリンクはそれ自体が HTML ではないため Twitter Cards に対応させることができませんが、今回はそれをちょっとした工夫で乗り切ってみたのでメモ。ちなみに Cards については3月に見直しがあり、Photo, Gallery, Product 形式については Deprecated になりました^*1。

そんなわけで今回は Photo を使わずに、マイグレーション先である Summary Card with Large Image^*2を使います。

まず、実装における前提ですが Twitter は TL に流れる Cards の内容をクロールするために Twitterbot という User Agent でサイトにアクセスしてくるという性質があります。これに mod_rewrite を組み合わせて、Twitterbot が画像にアクセスしてきたときだけ Twitter Cards を含んだ HTML のクッションページを返すようにしてやるという単純なものです。

以下、実装についてのメモ。

† 実装

HTML のクッションページはお手軽ということで、PHP で生成します。
今回は以下のような感じのスクリプトを用意しました。

cards_for_img.php

<?php
define("DOCUMENT_ROOT", "/path/to/htdocs/");

$src = $_GET['src'];
$host = $_SERVER["HTTP_HOST"];
$real_src = realpath(DOCUMENT_ROOT.$src);
if( !($real_src && ( strpos($real_src, DOCUMENT_ROOT) === 0) && is_file($real_src)) ){
        header("HTTP/1.1 404 Not Found");
        echo("404 Not Found");
        exit;
}
list($width, $height, $type, $attr) = getimagesize($real_src);
$src = htmlspecialchars($src, ENT_QUOTES, 'UTF-8');

$html = <<<EOS
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@###自分のTwitterID###" />
<meta name="twitter:creator" content="@###自分のTwitterID###" />
<meta name="twitter:title" content="　" />
<meta name="twitter:description" content="　" />
<meta name="twitter:image" content="http://$host$src?orig" />
<meta name="twitter:image:width" content="$width" />
<meta name="twitter:image:height" content="$height" />
<title>$ititle</title>
<style type="text/css">img { border: none; } body { margin: 0px; }</style>
</head>
<body>
<img src="$src" width="$width" height="$height" alt="$description"/>
</body>
</html>
EOS;

echo $html;

これを httpd.conf や .htaccess などを使って以下のようにリダイレクトしてやります。

# Twitter cards
RewriteCond %{HTTP_USER_AGENT} Twitterbot/ [NC]
RewriteCond %{QUERY_STRING} !orig [NC]
RewriteRule .(jpe?g|gif|png|JPE?G|GIF|PNG)$ /cards_for_img.php?src=%{REQUEST_URI} [L]

User Agent Switcher など UA を自分で変えられる方法がある人は自分の UA を Twitterbot/1.0 などに偽装してやると画像を表示しようとするとクッションページが帰ってくるのが分かると思います。

ここで問題になるのは Twitterbot はこのままだと、画像ファイルにアクセスできないということですが、これについては Twitterbot が画像の本体を取得するときは URL の末尾に ?orig をつけることで回避します。このためのルールは RewriteCond の２行目と PHP の 24 行目の合わせ技で作り込んであります。

実際に http://blog.cles.jp/media/1/20130825-D600_018057.JPG を Card Validator で見るとこんな感じで表示することができるようになりました。
（僕はサイトの CMS と連携して、画像の description も表示するようにさらに改造したものを使っています。）