• オススメ

Twitterでのアピール力を上げるTwitterカードを使ってみよう

Twitterでアカウントを運用されている方は、Twitterカードの設定はされていますか?これがあるかないかでアピール力が変わります。今回は、BiNDでTwitterカードを設定する方法をお伝えします!

こんにちは、オモトです!
Twitterでアカウントを運用されている方は、Twitterカードの設定はされていますか?
Twitterカードとは、Twitterでリンクをシェアしたときに、そのリンクの情報を画像付きの文章でカードのように表示してくれるもので、Webサイトにその設定があれば自動的に表示してくれます。

Twitterカードなしの状態
img_001

Twitterカードありの状態
img_003

違いは…一目瞭然ですね!設定されていないサイトはただのリンク付きツイートですが、設定されているツイートには、タイトル、アイキャッチの画像、概要が表示されていて情報量が多いので、クリックしたくなる感じがしませんか…?

では、早速BiNDでの設定方法を解説します!

Open Graphを設定する

画面左側のサイトマップから、サイトのプロパティ設定をクリックし、OpenGraph設定のタブを開いてください。
右下の「+」マークで新規の設定を増やし、下記のお手本のように2種類の設定を追加します。

img_005

左側 twitter:card
右側 summary

左側 twitter:image:src
右側 [BD:site_url][BD:path_userdata]images/thumbnail.png

「twitter:card」が、Twitterカードの種類(7種類ほどありますが、ここでは小さい画像で概要を表示という設定を入れています)
「twitter:image:src」にはTwitterカード用に用意した画像へのURLをいれます。
Twitterカード用の画像は、リソースエディタで画像アップロードしてみてください。
リソースエディタの使い方はコチラ→表(テーブル)の中に画像を挿入する方法

これでBiND側の設定は完了です。ですが、このままだとまだTwitterで表示されないので、
「このページでTwitterカードを使いたいからサイト確認して!」とTwitterへ申請し、承認してもらう必要があります

Twitterへの申請

Twitter validatorにアクセスします。

Card Validator | Twitter Developers

Twitterカードを埋め込んだ、サイトのURLを入力し、「Preview Card」をクリック。

エラーがあれば黄色、何も問題がなければ緑色の文字が表示されます。

 

これで完成です!いかがでしたでしょうか?

Twitterカードの種類は他にも、大きめの画像で表示したり、ギャラリーのように4つの写真を見せられたり、写真の縦横比を維持したまま投稿できるように出来たり…といろいろあります。
ぜひ設定してみてくださいね。

  • Twitterカードを使ってサイトのアピール力をUP
  • BiNDでは「OpenGraph設定」から設定しよう
  • Twitterカードは種類がいろいろ。自分のサイトにあったものを使おう

関連記事