さとうナイトニッポン

やったことのメモとか日々の雑記とか

記事をシェアした時のTwitterカードのサイズ変更をする

twitterにシェアした記事が小さい・・・?

「記事をシェアした際の画像のサイズが小さいんですけど・・・」との問い合わせがきた。
確認してみると、画像というよりも、記事のカードのサイズが小さい

投稿内容や元記事で設定している画像サイズによってカードサイズが変わるのか?パラメータによって変わったりするのだろうか・・・
などと考えて他のメディアの該当箇所を確認するも特に差はなく、とりあえず先生に頼ると以下の記事が。

こちらの記事によると、Twitterカードには合計4つの形式があり、
<meta name="twitter:card" content="形式"> という指定のされ方をしているとのこと
※詳細は元記事にそれはそれは分かりやすくまとめてあるので書きません。

この情報をもとに「サイズが小さい」と言われていた投稿の元記事内を調べてみると、

<meta name="twitter:card" content="summary" />

と記載があった。
これは記事のシェアで使われる2形式のうち画像が小さく表示されるほうで、
画像を大きく表示するには上記のcontent属性を

<meta name="twitter:card" content="summary_large_image" />

に変更する必要があるようだ。

修正したのに反映されない?

思ったより単純な修正でよかった~と修正して再度投稿してみると、 おや?形式が変わってない・・・・?

こういうときは「まずキャッシュを疑え」という心の師の教えの通り、 一度キャッシュを消して、ブラウザの開発ツールから該当タグを確認してみる・・・が
やはり変更は反映されているようだ。

再度先生に訪ねてみると、こちらの記事がヒット

またしてもサルワカさん、お世話になります( ;∀;)

この記事を読む限り、どうやらtwitter側でカードのキャッシュをとっているので、手動で消すかキャッシュが消えるのを待つ必要があるらしい。
(言われてみればそうだし少し考えればわかるだろ私)と少し落ち込みつつCard Validatorで該当記事のキャッシュを消してみる。

再度ツイッターで確認すると・・・・

反映されてた~~~~~( ;∀;)( ;∀;)
ありがとうサルワカさん

キャッシュ期間

これでひとまず要件を果たしたものの、この理論で行くと過去の記時ってどうなるの?
まさか今までの記事のキャッシュ全部手動で消すなんてアホなことできないし・・・
カードのキャッシュってどのくらい残るの?

ということで公式を参照

URL Crawling & Caching という項目に

Content is cached by Twitter for 7 days after a link to a page with card markup has been published in a Tweet.

とある。Google翻訳に突っ込むと

Google翻訳: コンテンツは、カードマーク付きのページへのリンクがツイートに掲載されてから7日間、Twitterによってキャッシュされます。

なるほど、記事がツイートされてから7日間はキャッシュされるってことね。

今回は急ぎではないとのことなので、反映を気長に待つことにした。

でも気になったのは、初めてツイートされてから7日間なのか、最後のツイートから7日間なのか? 要検証。

どうしても!今すぐカードサイズ変えたい時は?

シェアボタンのdata-urlにクエリストリングつけて新しい記事扱いさせるしかない。

まとめ

  • twitterカードには4つのサイズがあって<meta name="twitter:card" content="summary" />で変更できる
  • twitterによって7日間キャッシュされているので、すぐに反映したい記事は手動でキャッシュを消す
  • サルワカ サルでも分かる だけあってゴリラにもわかりやすい