シェア率が高まる任意のOGP画像をBiNDで設定する方法【後編】

BiNDで作ったサイトは、SNSでサイトURLを入力するだけで自動でサイト名やイメージが表示されるOpenGraph設定に対応しています。

そのため特別な設定をしなくても、サイトシアターで表示されるサムネイル画像を引張ってきてくれますが、意図した画像でシェアさせたい場合には自分で設定する必要があります。これはサポート対象外なのですが、シェア率を上げるには大事なポイントなのでここで詳しくご紹介します。
(※テキストやサイト名は、BiNDで設定したページタイトルや説明文が自動で表示されます)

前回の記事「SNSでのシェアを意識してSiGNでOGP画像を作ろう【前編】」では、新しいSiGNを用いてOGPバナーをデザインしました。
今回はその画像の設置方法を解説します。

準備:画像を圧縮する

前回、SiGNで作った画像をPNGフォーマットで書き出しました。
PNG画像は高画質ではあるのですが、その分容量が大きいので画像圧縮サービス「TinyPNG」を用いて圧縮しましょう。

TinyPNG

TinyPNGは画像をドロップするだけで簡単に画像圧縮が出来ます。
1.0MBあったものが225.3KBまで圧縮出来ました。
今はSEOにもページの表示速度が影響されると言われています。
圧縮サービスを使うと、画像容量を大きく減らす事が出来るので、バナーだけでなくWebサイトで使用する画像にも用いてみて下さい。

1.BiNDでの設置方法

圧縮した画像をWebサイトに設置します。
メニューから「リソースエディタ」を開きます。
_userdataフォルダを選択した状態で「ファイル作成」ボタンをクリックしましょう。
「ファイルをアップロード」の選択があるので、「参照」から先ほど圧縮したバナー画像を選択して「適用」ボタンをクリックします。
アップロードが完了したら「リソースエディタ」を閉じます。

リソースエディタ

次にプロパティ設定>サイト設定からOpenGraph設定を開きます。
og:imageの右にある初期値([BD:site_url]/bdflashinfo/thumbnail.png)を削除して
[BD:path_userdata]画像ファイル名
と入力してください。

[BD:path_userdata]は_userdataフォルダまでのパスが書き出されるので、リソースエディタで設置したOGP画像へのリンクを指定した事になります。

OpenGraph設定

これでWebサイトへの設置は完了しました。
あとはそのままサイトデータをアップロードして下さい。

2.Open Graphオブジェクトデバッガーで情報を更新する

公開が完了したらFacebookのOpen Graphオブジェクトデバッガーを使って情報を更新しましょう。
「新しいスクレイピング情報を取得」をクリックして新しいOGPに差し代わる事を確認します。

Open Graphオブジェクトデバッガー

これで設定は完了です。
Facebookのタイムラインにリンクを貼り付けると新しいOGP画像に変わっている事が分かります。

Facebookタイムライン

如何でしたか。
OGP画像をオリジナルのデザインにする事でタイムラインでシェアした時のインパクトも変わって来ますね。
是非お試し下さい。

その他のSNS関連の記事を読む