Tumblrで投稿に挿入した画像をog:imageに指定するスクリプトとその実装方法

2014.02.20

Hacks

この2〜3年くらいでしょうかね、TumblrをブログCMS代わりに使うところが増えたのって。無料ですし、投稿もカンタンですし、そういう使われ方は全然アリだと思います。

そんな感じで利用しているなら、必ず対応しておきたいのがOGPですよね。

OGPに対応することで、Facebookの「いいね!」ボタンをはじめとして、Tumblrの投稿がシェアされたときに、Facebookのニュースフィード上で目立たせることができます。

すでにいろいろなところでOGPタグの設置方法を紹介している記事があるので、もう対応しているよというTumblrユーザーも多いのではないでしょうか。

しかし、ブログ代わりに利用している人にとって最も投稿頻度が高いと思われる「テキスト投稿」だと、上で紹介されているコードだけでは、リンクがシェアされたときに表示されるのはTumblrに設定されているアバター画像なのです。

ブログ記事としてテキスト投稿するとき、画像を挿入する人も多いのではないかと思いますが、挿入した画像はog:imageとして利用することができないんですね。

それをどうにかできないかなーってのを知り合いがFacebookでぼやいていたので、それをどうにか無理やり実現するJavaScriptを書いてみました。

以下、Tumblrに設置するまでの流れです。
一応、すでにOGPは設定してるという前提で話を進めますよ。

実装の流れ

1) og:imageを吐き出すjsを用意する

function img_find() {
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];
    for (var i = 0; i < imgs.length; i++) {
        imgSrcs.push(imgs[i].src);
    }
    return imgSrcs;
}
    var img = img_find();
    var ogmetatag = document.createElement('meta');
    ogmetatag.setAttribute('property', 'og:image');
    ogmetatag.setAttribute('content', img[0]);
    document.head.appendChild(ogmetatag);

上記のコードをコピーして、ogimage.jsとでも名前を付けたjsファイルを作成します。
このjsが今回、og:imageにテキスト投稿に挿入した画像を指定するキモとなるもの。

そんな難しいことはやってなくて、ページ内の最初の画像を取得して、その画像URLをog:imageタグとして<head>〜</head>に吐き出す処理をしているだけです。

2) Tumblrのテンプレートに設置する

外部ファイル化したjsファイルを、Tumblrのテンプレート内に設置します。

まずはjsファイルをスタティックなファイルとしてアップロードしましょう。

テンプレートの編集画面に進み、歯車アイコンをクリックします。

ここで、「Theme assets」を選択。

すると、画面下にひょこっと「Theme assets」のエリアが出てくるので、エリア右上にある[ADD A FILE]をクリックし、先ほど準備したjsファイルをアップロードしてください。

アップロードが完了したら、次にこのjsファイルを、テンプレート上で読み込むように記述を加えていきます。

今回はテキスト投稿時にのみ吐き出されるよう限定していますが、同じやり方で他の投稿タイプにも応用できますよ。

テンプレートの構造はそれぞれ違うので端的に進めます。
まずは、テキスト投稿を表示するTumblrの独自タグ{body}を探して下さい。

見つかったら、その直下に以下のコードを記述します。

{block:PermalinkPagination}
<script type="text/javascript" src="ogimage.js"></script>
{/block:PermalinkPagination}

スクリプトのソースは、さきほどアップロードしたjsファイルのスタティックURLと差し替えましょう。

{block:PermalinkPagination}と{/block:PermalinkPagination}で囲っているのは、投稿の個別ページでのみ吐き出すため。これがないとインデックスページでも吐いてしまったので加えました。

あとはテンプレートを保存すれば実装完了です。

これで完了は完了なのですが、FacebookのデバッガーにURLを通すと、実はエラーというか忠告というか警告的なものが表示されますが、これはjavascriptの処理タイミングが、デバッガーがOGPタグの状態を調べ終わるのよりもあとになってしまうためだと思われます。多分。

しかし、実際にFacebookでリンク投稿をすると、

このようにJavaScriptが吐き出したOGPタグを認識して返してくれるので、実用上は問題ないと思います。

ちなみに、このコードを使う場合の問題点としては、ページ内で一番最初の画像を取得するため、テキスト投稿が表示されるエリアよりも前に、何かしらの画像を設置していると、そちらが取得されてしまうんですよね。。

JavaScriptコードのimg[0]の数字を変更すれば、2番め、3番目の画像を取得できるはずなので、もし取得させたい画像が取得できないという状況になったらこの数字を調整してみてください。

また、Tumblrは勝手にTwitter Cardsにも対応してくれているんですが、こちらにも画像を出したいという場合は、JavaScriptのコードを以下のようにすればog:imageと一緒に吐き出されます。

function img_find() {
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];
    for (var i = 0; i < imgs.length; i++) {
        imgSrcs.push(imgs[i].src);
    }
    return imgSrcs;
}
    var img = img_find();
    var ogmetatag = document.createElement('meta');
    ogmetatag.setAttribute('property', 'og:image');
    ogmetatag.setAttribute('content', img[0]);
    document.head.appendChild(ogmetatag);
    var twimgtag = document.createElement('meta');
    twimgtag.setAttribute('name', 'twitter:image:src');
    twimgtag.setAttribute('content', img[0]);
    document.head.appendChild(twimgtag);

ということで、とりあえず僕のレベルではこのへんが限界w

もしかしたらテキスト投稿に挿入した画像を取得するTumblr独自タグがあるのかもしれませんが、ドキュメントを見る限りぜんぜん見当たらないし、未だにカスタマイズの解説記事も少ないので、他に実装する方法が浮かんでこなかったんですよね。

もしこれ以外の方法でやってるよ! という人がいたら、ぜひ記事化していただきたいです。ぜひよろしくお願いします。