BiNDで作ったサイトは、SNSでサイトURLを入力するだけで自動でサイト名やイメージが表示されるOpenGraph設定に対応しています。
そのため特別な設定をしなくても、サイトシアターで表示されるサムネイル画像を引張ってきてくれますが、意図した画像でシェアさせたい場合には自分で設定する必要があります。これはサポート対象外なのですが、シェア率を上げるには大事なポイントなのでここで詳しくご紹介します。
（※テキストやサイト名は、BiNDで設定したページタイトルや説明文が自動で表示されます）
前回の記事「SNSでのシェアを意識してSiGNでOGP画像を作ろう【前編】」では、新しいSiGNを用いてOGPバナーをデザインしました。
今回はその画像の設置方法を解説します。
準備：画像を圧縮する
前回、SiGNで作った画像をPNGフォーマットで書き出しました。
PNG画像は高画質ではあるのですが、その分容量が大きいので画像圧縮サービス「TinyPNG」を用いて圧縮しましょう。
TinyPNGは画像をドロップするだけで簡単に画像圧縮が出来ます。
1.0MBあったものが225.3KBまで圧縮出来ました。
今はSEOにもページの表示速度が影響されると言われています。
圧縮サービスを使うと、画像容量を大きく減らす事が出来るので、バナーだけでなくWebサイトで使用する画像にも用いてみて下さい。
１．BiNDでの設置方法
圧縮した画像をWebサイトに設置します。
メニューから「リソースエディタ」を開きます。
_userdataフォルダを選択した状態で「ファイル作成」ボタンをクリックしましょう。
「ファイルをアップロード」の選択があるので、「参照」から先ほど圧縮したバナー画像を選択して「適用」ボタンをクリックします。
アップロードが完了したら「リソースエディタ」を閉じます。
次にプロパティ設定＞サイト設定からOpenGraph設定を開きます。
og:imageの右にある初期値（[BD:site_url]/bdflashinfo/thumbnail.png）を削除して
[BD:path_userdata]画像ファイル名
と入力してください。
[BD:path_userdata]は_userdataフォルダまでのパスが書き出されるので、リソースエディタで設置したOGP画像へのリンクを指定した事になります。
これでWebサイトへの設置は完了しました。
あとはそのままサイトデータをアップロードして下さい。
２．シェアデバッガーで情報を更新する
公開が完了したらFacebookのシェアデバッガーを使って情報を更新しましょう。
「新しいスクレイピング情報を取得」をクリックして新しいOGPに差し代わる事を確認します。
これで設定は完了です。
Facebookのタイムラインにリンクを貼り付けると新しいOGP画像に変わっている事が分かります。
如何でしたか。
OGP画像をオリジナルのデザインにする事でタイムラインでシェアした時のインパクトも変わって来ますね。
是非お試し下さい。
POINT
- OGP画像を任意のものに差し替えるのはサポート対象外。設定時の入力間違いにご注意を。
- 画像はキレイで容量は小さくが望ましい。専用の圧縮サービスを使うと便利。
- BiNDでのOGP画像の設定後、Facebook側で情報を更新することを忘れずに。