TwitterでURLを含むツイートをしたときに自動表示されるサムネイル画像のサイズを変更する方法（Livedoorブログ用）

多くのブロガーさんもそうだと思いますが、ぼくはブログを更新したらそのすぐ後にTwitterへブログの更新情報を流すようにしています。

Twitterの公式スマホアプリは、ツイートにURLが含まれている場合にそのリンク先のページのサムネイル画像と記事タイトル、記事概要などの情報を自動で取得・表示してくれるような仕様になっています。

例えばぼくの場合、ブログ更新情報をTwitterに流すときに、その記事にはブログの個別記事URLを含んでいるので、アプリのタイムラインやブラウザのツイート詳細ページでは以下のように表示されます。

うわー、上下切れとるわー…。無駄にでかいし…。

とてもキレイなフォーマットでリンク先記事の情報を表示してくれるのですが、画像が長方形にトリミングされて上下のスペースもガッツリ削られるので、せっかくのサムネイル画像が台無しになってしまっていました。

このままだと、サムネイル画像を作るときはこの上下カットされる仕様を考慮して作成しなければいけません。めんどくさい…。

ところが、Twitterのタイムラインを見ていると、サイズは小さいものの正方形でちゃんと画像全体が写るようにして、リンク先記事のサムネイルを取得・表示させている方々がいることに気付きました。

【ブログ更新情報】ぼくは「文字入力効率化の鬼」です #ぼくの鬼 #ヨッセンスクール https://t.co/3pzKSmrUwq

— プロブロガーのヨス (@yossense) 2016, 2月 9

こっちの方がサムネイル画像の全体がちゃんと表示されてていいじゃん!!

そう思ったんですが、実際にどういう設定をすればいいのかわからなかったので、いろいろ自分で検証したりググって調べることにしました。

どのように設定するか?!
具体的な設定手順
冒頭の例で比較してみましょう
まとめ

どのように設定するか?!

ちなみにぼくは最初、アップロードした画像のサイズの問題かなという仮説を立て、サムネイル画像をピッタリ正方形で作ってみたり、サイズを100ピクセルとか小さくしてアップロードしてみましたが、これではダメでした。

ググっても現時点では詳しい情報は少なかったんですが、この設定に関する基本的な情報はこちらの記事に記載されていることをました。

ライブドアブログのヘルプ：Facebook等で「いいね！」されたときや、Twitter Cardsへの表示内容を設定する（OGP対応）

ちなみにサムネイル画像の要件は、サイズが最低120×120ピクセル以上あることというのみでした。

ただ、このページの情報だけでは足りない部分もあったので、補足しながら以下に具体的な流れをメモしていきます。

この機能はTwitter Cardsというものに関連するのですが、詳しい知識は~~ぼくもよくわからないので~~今回置いておいて、ここでは「とりあえずこの通りにやればちょちょいと設定できてしまう」という手順のみをピックアップしています。

具体的な設定手順

Livedoorブログの管理画面から「ブログ設定」 > 「デザイン / ブログパーツ設定のPC」を開きます。
「カスタマイズ」タブを開いて、「トップページ」をクリックします。テンプレートのからの間に<$OGP$>タグがあることを確認します。ない場合は一行追加して挿入してください。
<html>タグの中に、xmlns:og=”http://ogp.me/ns#”を追加します。
「個別記事ページ」タグ内のHTMLテンプレートにも上記ステップ2-3と同じことをします。ぼくは「カテゴリーアーカイブ」と「月別アーカイブ」にもやっておきました。これでブログに今回必要なメタデータが組み込まれます。完了したら「保存する」をクリックしてテンプレートを保存してください。
ここで一旦、必要なメタデータがちゃんとブログに組み込まれているか確認してみます。ブログトップページと個別記事ページをそれぞれ開き、右クリックで「ページのソースを表示(←Firefoxのブラウザの場合)」を確認します。
トップページのソースでは、”twitter:card”は”summary”に指定されていました。URL入りのツイートをしたときに自動生成されるサムネイル画像を小さい正方形にしたい場合、”twitter:card”は”summary”に指定されていなければなりません（参照：Summaryカード、Summary Card）。
これに対して、個別記事ページのソースでは、”twitter:card”は”summary_large_image”に指定されていました。だからURL入りのツイートをしたときに自動生成されるサムネイル画像が大きくなってしまっていたんですね！（参照：Summary with Large Imageカード）
個別記事ページのURLを入れてツイートしたときに自動生成されるサムネイル画像がどのように表示されるか、Card validatorで確認してみます（Twitterログイン必須）。適当な個別記事ページのURLを貼り付けて、「Preview card」をクリックします。やっぱりまだ長方形のサムネイルが表示されることになっています。
個別記事ページのメタデータにある”twitter:card”を”summary”に指定変更します。ところが、テンプレートのカスタマイズのところには<$OGP$>タグしか書かれていないので、その中にある情報の”twitter:card”の指定だけを”summary”に変更することができません。なので、少し強引ではありますが、<$OGP$>タグの直後に一行追加して、<meta name=”twitter:card” content=”summary” />を挿入します。テンプレートのHTMLは上から順に処理されるので、<$OGP$>タグが出てきた時点では一度”twitter:card”は”summary_large_image”だと認識されます。ただし、その直後に挿入した一行によって、すぐに”twitter:card”はやっぱり”summary”だったというふうにシステムが認識し直すため、最終的にはこれで”twitter:card”は”summary”に指定されたということになるんですね。
この状態で一旦テンプレートを保存して、個別記事ページのURLを入れてツイートしたときに自動生成されるサムネイル画像がどのように表示されるか、再度Card validatorで確認してみます。今度はちゃんと小さい正方形のサムネイルが表示されるようになりました！やっぱりこっちの方が画像全体が表示されるのでいいですね！