みなさんはX（Twitter）カードを活用していますか？
X（Twitter）カードとは設定した画像がツイートに埋め込まれ、見栄えが良くなるというものです。これを活用すればクリック数なども増えるためX（Twitter）でのプロモーションには必須の機能です。
ただ、キャンペーンなどをしていると設定したOGP画像とは他の画像を表示したくなることがありますよね。OGP画像以外の画像を表示するときはいくつか気をつけなければ、思ったような表示にならないことがあります。特にPCでは想定どおりに表示されるものの、スマフォ版X（Twitter）からでは違った表示になるという現象があり、注意が必要です。

今回はOGP画像より添付画像を優先させる方法、特に同じ画像を何度もポストするbot等のプログラムにおいて留意しておくべき点を挙げておこうと思います。

OGP画像とは

“Open Graph protocol”の略称で、X（Twitter）やFacebook等のSNSでシェアする際にタイトル、概要、サムネイルを表示させるためのプロトコルです。これを使えば以下のようにURLを投稿するだけで印象に残りやすい画像とテキストを表示することが出来ます。

X（Twitter）カードとして表示されるので見栄えが良くなりますね。
ちなみに一般的なOGPイメージを設定してもツイッターできちんと表示されるとは限りません。以下のページを参考にツイッター用の設定をしてみてくださいね。
https://saruwakakun.com/html-css/reference/twitter-card
どのように表示されるかは以下のページを使うことによって確認ができます。
https://cards-dev.twitter.com/validator
ではまずbot等でのOGPと添付画像の競合について書いていこうと思います。

botでのOGPと添付画像の競合

毎回画像をアップする

毎回画像をアップすれば問題なくOGP画像よりも添付画像が優先されて表示されます。X（Twitter）のAPIのmedia/uploadを使って画像をアップロード後、statuses/updateで投稿するというパターンですね。
しかしこの方法ですと同じ画像を何度も使うキャンペーンにおいて、その都度アップロードすることになり処理が重くなることがあります。そこで推奨されるのが以下の方法です。

同一画像URLを使い回す

botを使ったキャンペーンをしているとユーザーに当たり外れをリプライすることがあります。この際同じ画像を使い回す事が多いため、過去にアップした画像のURLを使い回せれば動作速度を上げることが出来ます。

画像URLは
pic.twitter.com/XXXXXXXXXX
という形式で、
twitter.com/ユーザー名/status/ツイート番号/photo/1
にリダイレクトされます。
これはツイートのソースを開き、
[fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

[html]
<div class="js-tweet-text-container"></div>
[/html]

の中の、
[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

[html]
<a href="https://t.co/XXXXXXXXXX" class="twitter-timeline-link u-hidden" data-pre-embedded="true" dir="ltr" >pic.twitter.com/XXXXXXXXXX</a>
[/html]

で見つけることが出来ます。
画像URLである pic.twitter.com/XXXXXXXXXX, twitter.com/ユーザー名/status/ツイート番号/photo/1, t.co/XXXXXXXXXX
等は投稿欄に貼り付け、ツイートすることによってその画像を添付したときと同じように表示させることが出来ます。

↑のような投稿が

↑な感じに。

さて、本題はここからです。この画像URLとOGP画像を用意されたURLを同時にポストすると、OGP画像が優先されて表示されてしまい、画像URLはただのリンクとなってしまうことがあります。
例えば以下のように①OGP画像が用意されたURL, ②画像URL(pic.twitter.com) から構成された投稿をすると、PCのブラウザから見ると②の画像URLが優先されて表示されますが、スマフォアプリから確認すると①のOGP画像のほうが優先されてしまいます。

そのため画像URLを使い回すには、「OGPイメージがないURL」を用意して「OGPイメージがついたURL」にリダイレクトしてあげる必要があります。
リダイレクト用のURLの作り方は以下のページを参考にしてみてくださいね。
http://unitopi.com/web-redirect/

ちなみにt.coはX（Twitter）が用意したアクセス解析するためのURLですが、上記のリダイレクト用URLにはなりえないので気をつけてください！

スマフォアプリ等でOGPとは別の画像を投稿したいときは…

URLをアプリの投稿画面に入力するとその時点で以下のようにOGP画像が表示され、添付画像選択のためのボタンがタップできなくなります。

これだとOGP画像とは他の画像を表示させたいときに困ってしまいます。
これを回避する方法として主に2つの方法が挙げられます。

①OGP画像の右上の×ボタンを押す

以下の画像の○の内側に×ボタンがあることがわかります。これ押すことで、OGP画像を非表示にしてツイートすることが出来ます！

OGP画像を非表示にすることによって、添付画像選択ボタンがタップできるようになります。

表示したい画像を選択してもどれば以下のように投稿することが出来ます！

②先に画像を選択してから、URLを入力する

先に画像を選択しておくと、URLを入力してもOGP画像が表示されることはありません。

X（Twitter）アカウントをバズらせたい方、X（Twitter）でサービス、商品訴求をしたい方はこちら