東京都府中市、九段下のWEB制作会社Maromaroのブログです

2021.06.21

chie

あれ?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つなので、1つの画像で長方形でも正方形でも大丈夫な画像をつくる必要があります。
ここで長方形をベースに文字情報を入れてしまうと、正方形にトリミングされたときに文字が見切れてしまう可能性があるので、見切れNGな情報は正方形内に収めるようにデザインすると安心です!

OGP画像を作る時のポイント

 

  • ■重要な情報はトリミングされても大丈夫なように正方形内に配置する
  • ■文字を配置するときは小さなサイズになったときでも見やすいサイズに
  • ■表示する情報は整理する

 

便利なOGPチェックツール

果たして作った画像はちゃんとイメージ通り表示されるか気になりますよね?
イチイチ、全てのSNSにシェアして修正というのもなかなか大変だし、修正したときにまたシェアして確認というのも大変なので、便利なOGPチェックツールを利用するのもおすすめです!

OGP画像シミュレータ

http://ogimage.tsmallfield.com/

ドラッグ&ドロップで簡単シミュレーション!
ひと目でわかるのでとても便利ですね。

OGP確認ツール

https://ogp.buta3.net/

こちらは公開されたサイトに対しての確認ツールとなります。
確認したいページのURLを入れるだけで、OGPの情報とプレビューを表示してくれます。

テンプレート

ツール:photoshop
ダウンロードはこちらogpimg_template

まとめ

SNSからの流入も重要となってきているので、OGPを正しく設定することで、SNSでシェアされたときにWebサイトの印象をよりよくしましょう!