ブログやメディアを運営されている方で、OGP画像の切り取りが微妙だな〜と思われたことはありませんか？
当ブログでも失敗したのですがこのブログのアイキャッチを1200px × 900pxで作ってFacebookやTwitterなどでシェアすると上記のように失敗して表示されてしまいました。
このようなことがないようにOGP画像を作る際にTwitterやFacebookでどのように表示されるのか意識して作る必要があります。
FacebookやTwitterは画像が大きいと中央切り取りをする形で表示されるようなので簡単にPSDファイルを作ってみました。以下のような環境を想定しています。
- WordPressのアイキャッチは4:3で表示 = 1200px × 900px
- FacebookのOGP = 1200px × 630px
- TwitterのOGP(Large) = 1200px × 600px
上記のスクショのようにガイド線を引いておきました。必ず表示させたい重要なテキストなどはガイド内に収めると各サイトでうまく表示されるかと思います。ダウンロードは以下のリンクをクリックして下さい。レイヤーにある長方形は削除して使って下さい。重要なのはガイド線のみです。