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

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

Twitterカードなしの状態

Twitterカードありの状態

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

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

Open Graphを設定する

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

左側　twitter:card
右側　summary

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

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

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

Twitterへの申請

Twitter validatorにアクセスします。

Card Validator | Twitter Developers

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

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

これで完成です！いかがでしたでしょうか？

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