特定の画像で記事をツイートしてもらう方法

画像でツイートしてもらう ブログ・サイト運営

サムネイルのOGPではなく「特定の画像をツイートする方法」があります。
ページ内の「この画像だけをツイートしたい」というニーズがあるからです。

この方法であれば、以下のようにツイートしてもらえます。

ボタンを押すと特定の画像でツイートできる
この画像をツイートする

画像ごとにツイートボタンを作れば、よりシェアされる可能性が高くなります。

画像ツイートの設定方法

画像ツイートは、単なるリンクなので簡単です。
スクリプトも不要です。

まずは画像をツイートする

最初にツイッターに画像をアップする必要があります。
画像をツイートするだけです。

後の作業がラクになるので、画像は1枚ずつアップします。

次に、画像のツイートをクリックして、ウィンドウを出します。

要素を検証する

ウィンドウを出したら、画像を右クリックして「要素を検証する」を選びます。

右クリックで「要素を検証」を選択

※各ブラウザで名称が異なります。

  • Chromeは「検証」
  • FireFoxは「要素を調査」
  • IEは「要素の検査」

どのブラウザでもソースコードが出てきます。
このソースコード内から「pic.twitter.com/xxxx」の文字を見つけます。

このイラストは「pic.twitter.com/uG1tsc2XOb」です。
この文字をコピーします。

検索すると簡単に見つかる

「pic.twitter.com/xxxx」の文字が見つからない場合は、検索をすると早いです。
ソースコードを表示している画面で、Ctrl+Fを押すと、検索窓が出てきます。
そこで「pic.tw」を入力すると、「pic.twitter.com/xxxx」に移動します。

検索窓にpic.twを入れると見つけやすい

リンクを作成する

前述の通り「pic.twitter.com/xxxx」をコピーしたら、以下のようにリンクを作成します。

<a href="https://twitter.com/intent/tweet?text=つまずいてるイラスト%20https://tanakama.jp/seo/toc.html%20pic.twitter.com/uG1tsc2XOb%20@nomarktanaka" target="_blank">この画像をツイートする</a>

実際に作成したリンクが以下です。
この画像をツイートする

以下のようにツイートされます。

たなかまのイラスト

リンク設定の中身を解説

よく分からない文字が並んでいると思いますので、リンク設定の中身を解説します。

<a href="https://twitter.com/intent/tweet?text=つまずいてるイラスト%20https://tanakama.jp/seo/toc.html%20pic.twitter.com/uG1tsc2XOb%20@nomarktanaka" target="_blank">この画像をツイートする</a>

上記をコピーしたら、以下の箇所を変更します。

  • つまずいてるイラスト ページタイトルや任意のテキスト
  • https://tanakama.jp/seo/toc.html ページのURL
  • pic.twitter.com/uG1tsc2XOb ツイッターの要素からコピーした文字(画像)
  • @nomarktanaka ツイッターアカウント(なしでもOK)
  • この画像をツイートする リンクのテキスト

分解すると以下のようになります。

画像ツイートをするリンク設定を解説
この画像をツイートする

「%20」は、単なるスペースの意味ですが、それぞれの要素を繋ぐのに必須です。

ツイッターアカウント(メンション)は任意です。
これをつけると、誰かがツイートしたときに、自分に通知が届きます。

画像は最大4つまで可能

以下のように「pic.twitter.com/xxxx」を「%20」で繋げると、最大4つまで画像が入ります。

<a href="https://twitter.com/intent/tweet?text=ブログの目次を最適化する方法%20https://tanakama.jp/seo/toc.html%20pic.twitter.com/mrqrbdrUIP%20pic.twitter.com/zatTpvI5sO%20pic.twitter.com/8DdIUIk3B9%20pic.twitter.com/mrqrbdrUIP%20pic.twitter.com/mr4gJWkJ1N@nomarktanaka" target="_blank"><div class="tweet_img"><i class="fa fa-arrow-up" aria-hidden="true"></i> まとめて画像をツイートする <i class="fa fa-twitter" aria-hidden="true"></i></div></a>

使い道はないかもしれませんが、以下のように画像を4つまでツイートできます。

画像ツイートの見本

上手く設計できれば、シェアされる確率が増えるかもしれませんね。

ツイートした画像は残す

この方法は、最初に画像をツイートするのが条件です。
自分のタイムラインで画像をアップしたくない場合は、ツイッターのテストアカウントを作っておくのも良いでしょう。

画像ツイートを削除すると、機能しなくなります。
その場合は、通常ツイートのようにOGP画像がサムネイルとして使われます。

CSSで装飾をする

当サイトでは、Font AwesomeとCSSを使って装飾しています。
fontawesomeは、矢印やツイッターのロゴを出すのに使います。

この画像をツイートする

以下のコードを画像の下に設置しています。(事前にfontawesomeを読み込んでください)

<a href="https://twitter.com/intent/tweet?text=画像付きでツイートしてもらう方法%20https://tanakama.jp/blog/images-tweet.html%20pic.twitter.com/f49ngKW5J7%20@nomarktanaka" target="_blank"><div class="tweet_img"><i class="fa fa-arrow-up" aria-hidden="true"></i> この画像をツイートする <i class="fa fa-twitter" aria-hidden="true"></i></div></a>

CSSは以下のようにしています。

.tweet_img {
	display: block; 
	margin: 0 auto; 
	text-align: center; 
	border: 1px solid #ccc; 
	border-radius:20px; 
	font-size: 0.8em;
	padding: 5px 20px; 
	width: 70%; 
	max-width: 100%;
}

プラグインを使う方法

WordPressユーザーの方は、Share This Imageプラグインを使う方法もあります。

Share This Image
Image sharing plugin for WordPress.

このプラグインは、画像でツイートするのではなく、サムネイルのOGP画像を差し替えます。
そのため、事前に画像をツイートする必要はありません。

しかし、サムネイルが変わるだけです。
訪問ユーザーから見ても、通常のツイートとの違いは分からないでしょう。
このプラグインを使っても、シェアされやすいとはあまり思えません。

指定のテキストをツイートしてもらう

画像ツイートを応用すれば、こちらの指定したテキストをツイートしてもらうことができます。
以下のように、本文中の文章を「ツイートのリンク」にするだけです。

ソースコードは以下です。

<a href="https://twitter.com/intent/tweet?text=「この方法を使えば、シェアされる確率が高くなります。」%20https://tanakama.jp/blog/images-tweet.html%20@nomarktanaka" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> この方法を使えば、シェアされる確率が高くなります。 </a>

この方法は、海外のSEOやマーケティングに強い大手メディアが採用しています。
例えばForbesなどで見ることができます。

ただし、効果は不明です。
私が見た限りでは、ほとんどツイートされていません。

具体的な数字や、重要な文章で試してみるのも良いでしょう。

高いエンゲージメントを獲得する

画像ツイートは、高いエンゲージメントを獲得することができます。
これは、シェアしていただいたユーザーにも、メリットがあります。

誰もが「役に立つ情報」をツイートしたいと思っています。
この画像ツイートは、その手助けになります。

ツイッターのタイムラインがアイキャッチ画像であふれているのなら、この画像ツイートで差別化してみてください!