【忘れがち】最適なサイズは1200px ✕ 630px?ブログ作ったらOGP設定しないと。

ブログ制作

おじさん、OGP画像設定してねーじゃん!

あ、しまった。。。

毎回忘れてしまうんだけど。。。「やっとサイトできたーーーー」って興奮してメッセに送ったら上の感じですよwww

そうそう、OGP設定しないとならん。しかもOGPで書き出されたDiscriptin内のURL反映されないのね、これ気づかなかった。

OGP画像シミュレータってなサイト発見!

同時に忘れるのが適正サイズ。毎回検索するんだけど、なんだかいいサイトを発見。その名もOGP画像シュミレータ。

何これ、めっちゃいいやん!!ドラッグ&ドロップでタイムラインにどう見えるかシュミレートしてくれるそうだ。

OGP画像シミュレータ | og:image Simulator

デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみよう!

OGP画像に最適なサイズは?

2014年だか2015年くらいからフェイスブックのOGPの推奨サイズが1200px ✕ 630pxになっているみたいだね。

ちなみにAMPのサムネイルの推奨も2018年から横1200pxの16:9、4:3か、1:1の正方形

今の段階では1200px ✕ 630pxで作っておけばよいのね。(また近い将来推奨サイズ変わるんだろうけど)

早速制作する!

なんてことはないす、早速作る。

もしかしたらこんなことやっているのは自分だけかもしれないが、オレの場合、一度イラストレータで1200px ✕ 630pxの白背景作ってレイアウトしてからフォトショにペーストしてます。

ようするにアレですよ、ベクター信者ってやつですよ。昔からサイトもイラレでデザインしまつ。。おじさんになると昔からのやり方を変えられんな。

フォトショで新規ファイルを作る。イラレでコピった段階で1200px ✕ 630pxだからそのままフォトショにもサイズが反映されてる。

このロゴ、左右中心にレイアウトしても、目の錯覚で左によって見えるのだ。気持ち右にズラしたけどまだ少し左によっているようにも見えるが。。。まいっかな。

TinyPNGで書き出す!

背景が白だからJPGじゃなくてPNGにする。JPGだとたまにモアレ見えちゃうかもなって。書き出しはちゃんとTinyPNGで書き出そう。少しでも軽量化した方がぜったいよいよ。フォトショのプラグインが便利。

TinyPNG – Photoshop Plugin
TinyPNG – Photoshop Plugin

Save your compressed JPEG and PNG images directly from Photoshop. Install the plugin and you will be ready to go. A new menu option will appear in Photoshop from where you can resize, preview, select a folder and save your images.

TinyPNGタブがグレイ表示で書き出せない?

アイキャッチの画像、iPhoneのLINEからスクショしたのを持ってきたのだが。。。

あれ、「TinyPNG and TinyJPG」の部分、グレイになってクリックできない!!なんで!?

焦ったす、マジ焦ったす!!!Mojaveにしてからちょいちょいアプリ誤動作とかもあって。

えっと原因は。。。iPhoneのスクショが16bitだったため。オレのフォトショのバージョンの問題なのかな、これ。8bitに変換して無事書き出し。

OGP画像シミュレータ使ってみる!

んで早速書き出したPNGをドラッグしてみた。おーーーええやん。今回これ背景白だからあんまりプレビューの意味ないけど、背景あるデザインだったりしたら簡単に確認できるのはありがたいね。

All in One SEOでOGP画像を設置する

画像ができたから設置します。

All in One SEO > ソーシャルメディア > 画像設定の中の「デフォルトのOG:Image」の部分で画像アップロードまたは画像URLを登録。

無事設置完了

おーできた。やっぱりちょっと目の錯覚で左によっているように見えるが。。。まいっか。