2021.06.21

あれ？OGPの画像がぼやけてる！見切れてる！？最適サイズでSNSでシェアされやすくなろう！テンプレート有り

こんにちは。MaromaroのChieです。
SNSのシェアには欠かせないOGP画像ですが、いざ確認してみたら設定した画像がぼやけてる？重要なところで見切れてる・・・なんてことありませんか？
今回はOGPの最適な画像サイズについてご紹介します。
推奨サイズのテンプレートもアップしてありますので、ぜひご活用ください！

OGPって？

OGPとは、「Open Graph Protocol」の略で、OGPを設定しておくとTwitter、Facebook、LINEなどのSNSでWebサイトをシェアした際に、設定しておいたタイトル、画像、説明文が表示されるので、ユーザーに正しく情報を伝えることができるHTML要素です。
OGPを設定していないと、各SNSサイトのほうで自動で表示するため、情報を正しく伝えられないことがあるので、OGPを設定しておくことはとても重要です！

OGPの設定箇所

OGPは、HTMLファイルの中のheadタグ内に設置し、metaタグでそれぞれのURLやタイトル、画像などの情報を記述していきます。
headタグ内には、OGPを使用するための宣言が必要なので、下記の記述が必要となります。

<html lang="ja" prefix="og: http://ogp.me/ns#">

OGP自体の設定は下記の記述となります。

<meta property="og:title" content="タイトル">
<meta property="og:type" content="website　または　blog　または　article">
<meta property="og:description" content="ページの簡単な説明">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイトのタイトル">
<meta property="og:image" content="サムネイル画像のURL>

OGPの最適な画像サイズって？

推奨サイズ	幅1200px x 高さ630px
最低サイズ	幅600px x 高さ315px

推奨サイズは幅1200px x 高さ630pxとなり、最低でも幅600px x 高さ315pxが必要となりますが、Retinaディズプレイや高解像度の端末のことを考えると幅1200px x 高さ630pxで作成しておくのがベストかと思います。
この推奨サイズよりも小さいファイルの場合、高解像度ディスプレイではぼやけて見えてしまったり、最低サイズよりも小さい場合は、引き伸ばされてしまうため、ぼやけの原因になったりします。

なお、Twitter、Facebook、LINEなどOGPの表示サイズは長方形、正方形だったりとSNSによって違うので、それぞれつくらないとならないの？？と一瞬ドキっとしてしまいますが、設定ファイルは１つなので、1つの画像で長方形でも正方形でも大丈夫な画像をつくる必要があります。
ここで長方形をベースに文字情報を入れてしまうと、正方形にトリミングされたときに文字が見切れてしまう可能性があるので、見切れNGな情報は正方形内に収めるようにデザインすると安心です！