此ノ木よしるは今日も更新しません

技術の話が多め

Twitterカードを動的に表示する方法

Twitterをやってると必ず見るものに「Twitterカード」があります。

ツイートにURLが含まれている時、そのリンク先の内容を画像で紹介してくれるやつですね。ブログのURLを貼るだけでアイキャッチ画像が表示されたりするのも、このTwitterカードの仕組みが働いているからだったりします。

Twitterカードの仕組み

ツイートに画像が添付されているわけでなく、URLが記述されているだけで画像が出るってところがポイントかなって思うのですが、、、

これはhtmlのheadタグにmetaでタイトルや表示したい画像とかを定められた書式で書いておくと、「Twitterbot」という名前のTwitterクローラが走って、metaタグの情報を元にいい感じに画像を表示してくれるようです。詳細はこちら

Twitterカードの設定がして有るのと無いのでは、URLがシェアされた時の見栄えがまったく違うので、今では多くのサイトが当たり前のように設定してありますね!

基本は1ページにTwitterカードも1つ

htmlのheadタグにカードの情報を記述するので、基本的にはページとカードは一対一になります。

例えばアプリ連携をしないタイプの画像ジェネレーターを実現する場合、ツイートで画像を見せるにはTwitterカードを使うことになるのですが、その際ユーザーが画像を一つ作るたびにhtmlと画像のセットを用意する必要があります。

実際にそのような方式で画像ジェネレーターを作ったものがあります。よかったら下記サイトで何か画像を作ってツイートまでの動きを見てください。

『進撃のえろ子さん』公式セリフジェネレータ

https://konogi-tools.com/eroko_generator/

一度触ってもらうとわかるのですが、Twitterカードとして画像をツイートするには、その作成したページに遷移して、そこでツイートを行ってもらう必要もあるので、ちょっと手間な感じもしますね。

動的になると何が嬉しいの?

先ほどの例のように都度ページを作成して、そのページに遷移してからツイートする手間が省けるというのがわかりやすいメリットだと思っています。

実際にこの方式で作成したジェネレータサイトがあるので、先ほどのサイトと比較して触ってみてください。

『変女』かんたん大喜利メーカー

https://konogi-tools.com/henjo_maker/

触り心地的に、お手軽さというかサクッと感というか…そういったものが上がってる感じがしません?

他のメリットといったら、なんでしょうかね〜。多くの人がツイートしてくれて拡散された時に、普通は全て同じ画像になってしまうところを、意図的に切り替えることも可能なので、見栄えで飽きさせないとかもあるかもしれませんし、どの画像がクリックされやすいか調査するにも使えるかもしれません。

実現方法!

一番シンプルな方法はphpファイルかなにかを用意して、そのファイルのURLをツイートすることで切り替える方法じゃないかと思っています。

使い方としてはtwcard.phpみたいなファイルを一つ新規で作って下記のようにツイートするイメージですかね。

https://konogi-tools.com/henjo_maker/twcard.php?id=202010_174ee6f483a34e

このtwcard.phpの中でなにをするかと言うと、HTTP_USER_AGENTの情報からTwitterクローラかそうでないかを判断して、TwitterクローラであればTwitterカード用のmetaタグページを作ってそれをクローラに見せる。Twitterクローラじゃなければ、任意のURLにリダイレクトする。それだけで動的にTwitterカードを切り替えられるようになるはずです。

弱点!

Twitterクローラの調子が悪いとなにも表示されない → これかなり痛いです。

また、ページと画像を一対一で用意しない場合は、見せられる画像の大きさがTwitterカードの大きさしかないという制限も出てしまいます。

あとは…動的に切り替える場合の弱点というよりも、ジェネレータサイトをTwitterカードで実現するときの弱点なのですが、利用者が増えるとファイルストレージの容量問題が出てきますね…

ジェネレータ系サイトをTwitterカードで実現する最大のメリットはアプリ連携不要で安心してツイートできることです。

ただ、作ってみた感想としては、セキュリティに厳しい人にも安心して使ってもらえる反面、Twitterクローラの調子が悪いと画像が表示されなくて肩透かしのツイートになってしまうこともあるので、帯に短し襷に長しって感じになるかも(雑な結論)

コノギ ヨシヲ

次へ 投稿

© 2020 此ノ木よしるは今日も更新しません

テーマの著者 Anders Norén