OGP画像の作成を効率化させるPSDフォーマット
OGP（Open Graph Protocol） とは、このWebページの説明をSNS上で表示させるために用意された仕様です。OGPを設定しておくとSNS上で「いいね！」やシェアをされた際にあらかじめ指定した画像、タイトル、ページの説明、URLを表示させることが可能です。OGPを設定していない場合は自動でページから情報を取得して表示されるので思い通りの表示にならないことが多いです。
下記画像はOGPを設定していない場合（上）としている場合(下)の表示の違いになります。
どちらがいいかは一目瞭然です。OGP設定前のサムネイルは小さいし中途半端な位置で切り抜かれてしまっています。「いいね！」や「シェア」を増やしたい場合は必ず設定しておきたいですね。今回は簡単にサイトにOGPの設定をできるようにPSDフォーマットを作成したのでご紹介させていただきます。
まずはPSDデータ(1.1MB)をダウンロードしてください。
OGP画像作成〜OGP設定手順
OGP画像を作成する
(1)ダウンロードした「ogp.psd」を開いてレイヤーパネルで「ogp.png」をダブルクリックしてスマートオブジェクトを編集します。
(2)OGP画像をデザインします。（サイズは推奨サイズの1200px × 630pxです）
完成したら上書き保存をしてスマートオブジェクトを閉じてください。
(3)元のファイルに戻って左下の表示イメージを確認します。縮小されて文字などが見にくくなったりしていないか確認します。
(4)レイヤーパネルで「ogp.png」を選択して右クリック。「PNGとしてクイック書き出し」を選択して画像を書き出します。書き出した画像はサーバの任意の場所にアップロードします。
※そのままの画像ファイルだとサイズが大きいので下記サイトのようなファイルサイズ圧縮サービスを利用してファイルサイズを軽くすることをおすすめします。
TinyPNG https://tinypng.com/
htmlを編集する
(1)次にファイル右下のテキストレイヤー(metaタグ)を自分のサイトの情報に編集します。
下記コードには先ほどのサーバにアップしたOGP画像へのパスを入力します。
<meta property=”og:image” content=”http://www.□□□□□□/ogp.png”/>
詳しくはこちらのページで詳細が解説されています。
FacebookのOGP設定方法＋参考記事6選｜ferret
(2)編集し終えたらソースコードをコピーしてhtmlをテキストエディタなどで開き任意の場所へペーストします。
(3)編集したhtmlファイルをサーバにアップロードしてOGPの設定は完了です。
(４)下記ページでサイトのURLを入力するとプレビューが表示されるので正しく設定ができているか確認しましょう。
Sharing Debugger https://developers.facebook.com/tools/debug/sharing/
以上が「OGP画像作成を効率化」の解説でした。