OGPとは？OGP画像サイズなどのタグ設定でシェアしてもらう

Webサイトやブログを運営しているなら多くの人にSNSでシェアしてもらいたいはず。ポイントは最適なOGP画像サイズとOGPタグ設定です。

タイムラインに綺麗な画像と分かり易い説明があると、魅力的でシェアしたくなりませんか？

今回は、タイムラインでシェアして貰うのに最適なOGP画像サイズと、その為に必要なOGPタグ設定を紹介します。

FacebookとTwitter共通で使えますし、「画像が表示されない」なんて事もなくなります。

実際、アイキャッチ画像が表示されると目につきやすく、シェアされやすいです。
シェア元のページへの興味や理解に繋がるので正しく設定しましょう。
設定していないとページ内から意図しない画像が拾われて表示されます。

フエル

僕はWEB制作の仕事でも設定をしています。
公式の情報と合わせて実際に確認していますので参考にして下さいね。

直接見たい方は以下リンクからどうぞ。

この記事の目次

OGPとは？

OGPとはOpen Graph Protocol (オープン・グラフ・プロトコル)の略称です。

すごく簡単に言うと、

Webページの内容をSNSで上手く伝えるために定められたルールです。画像やページの概要などを設定しておけば、Webページが共有された際にそれらが表示されます。要するにシェアしやすくする為の設定。
OGPがきちんと設定されていと、分かり易く、画像も魅力的に見えるのでクリックしてもらい易いです。

最低限入れておきたいOGP設定

og:imageのサイズの様に、FacebookとTwitterで忘れずに入れた方がいいなと思う共通の基本設定をまとめました。
自信のサイトに合わせてカスタマイズしてくださいね。

ちなみに、参考にしたOGPの公式の説明ではprefixはhtmlタグへ設定します。headタグと説明しているブログもあるので念のため。

<html prefix="og:https://ogp.me/ns#" />　← 公式通りhtmlタグに設定
<meta property="og:url" content="ページのURL絶対パス" />
<meta property="og:type" content="ページの種類" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:image" content="画像のURL絶対パス" />
<meta property="og:image:width" content="画像の横幅、単位不要" />
<meta property="og:image:height" content="画像の高さ、単位不要" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@自身のツイッターページURL" />
<meta name="twitter:site" content="@自身のツイッターアカウント名" />

OGP画像サイズは共通の画像でOK

先にTwitterとFacebookのOGP画像サイズを解説しておきます。知っておくと随分と楽になりますよ。

見て頂くと分かる通り、共通の画像サイズと比率があります。高解像度用の画像を用意しておけば使いまわせそうですね。

Twitterの場合

Twitterは高解像度用1200 x 630ピクセル、もしくは大きな画像を含むリンクページ投稿は600 x 315ピクセルの画像を用意しておけば問題ありません。アスペクト比は「1.91：1」です。

Facebookの場合

Facebookの投稿画像を高解像度で表示させたいなら、1200 x 630ピクセル。
小さくても600 x 315ピクセル以上を使う。
Twitterと同じくアスペクト比は「1.91：1」です。

OGPタグとOGP画像の設定 – Twitter編

Twitterの場合、正確に言うとOGPではなく独自のプロパティを使っています。この独自プロパティが設定されていない時は、サポートされているOpen Graphのプロパティを代替手段として使います。

※この独自プロパティはOGPと同じ規則に沿ったものです。Open Graphでサポートされているタグであれば、例えば、Facebook用とTwitter用で画像をそれぞれ設定したり、Twitter用の画像設定を省略してFacebook用の画像を使うといった事も出来るんですね。

Twitterカードタグの種類

Twitterでは独自のOGPタグを「Twitterカード」と呼んでいます。OGP画像が「サマリー画像」です。

Open Graphのプロパティ側でサポートされているものと、そうでないものがあります。

※Facebookと共通で使えるOGPタグはOGPタグ – FaceBook編をご覧ください。


twitter:card　※必須です	og：type、og：title、og：descriptionがあり、twitter：cardが無い場合、サマリーカードがレンダリングされることがあります。
twitter:title　※必須ですコンテンツのタイトル（最大70文字）	og:title
twitter:description　※必須ですコンテンツのタイトル（最大200文字）	og:description
twitter:image	og:image
twitter:site @ウェブサイトのユーザー名。 twitter：siteまたはtwitter：site：idのいずれかが必要です。	該当なし
twitter:id ユーザーのTwitterIDです。 twitter：siteまたはtwitter：site：idのいずれかが必要です。	該当なし

Twitterカードのサイズ設定は2種類　twitter:card

Webサイトの記事をシェアした際のTwitterカードには2種類の設定があります。
「Summary Card（サマリーカード小）」と「Summary Card with Large Image（サマリーカード大）」です。

ファイル形式は、JPEG、PNG、WEBP、GIF

小さい投稿画像「summary」

<meta name="twitter:card" content="summary" />

最小サイズ：144 x 144px
最大サイズ：4096 x 4096px

データサイズは2MBまで。

サンプルはTwitterのブログ。twitterカードタグは「summary」。確認すると実際にはPCで123 x 123ピクセルで表示されていました。

大きい投稿画像「summary_large_image」

<meta name="twitter:card" content="summary_large_image" />

最小サイズ：300 x 157px
最大サイズ：4096 x 4096px

データサイズは5MBまで。

大きな画像を含むリンクページ投稿は600 x 315ピクセル。一般的にはコレで大丈夫。

Twitterの投稿画像が上手く表示されるか確認するには？

ブログで設定したOGP画像は、まず最初にカードバリデーターという公式のテストツールで表示確認しておきます。

これは投稿画像がSNSでシェアされた時に、上手く読み込まれるか？サイズ感がおかしくないか等を前もってチェックする為です。

Facebookと同じ高解像度用1200 x 630ピクセル、もしくは大きな画像を含むリンクページ投稿は600 x 315ピクセルの画像を用意しておけば問題ありません。Facebookと同じくアスペクト比「1.91：1」です。

縦横サイズは重要で、足りない分は縦横一緒に引き延ばされます。その結果、逆に大きくなりすぎた所はトリミングされる事になります。

参考：カードバリデーター

OGPタグとOGP画像の設定 – Facebook編

Facebookで使われる主要なOGPタグの設定や注意点を説明していきます。もっと知りたい！って方は下に各参考リンクをまとめたのでどうぞ。

※ちなみにTwitterの方には独自のOGPタグがあります。

OGP基本タグ

タグ	説明
og:url	ページの正規URL。パラメーターの無いURLです。各URLに対する「いいね！」や「シェア」は、このURLで集計されます。
og:title	記事タイトルを入れます。サイト名などのブランド情報は含めません。
og:description	コンテンツの簡単な説明。2～4文が一般的。Facebook上では、投稿のタイトルの下に表示されます。
og:type	コンテンツのメディアタイプ。このタグでニュースフィードでコンテンツがどのように表示されるかが決まります。デフォルトは「website」ブログ記事だと「article」です。
fb:app_id	インサイトで分析するなら入れておきましょう。

Facebook用の基本タグ

OGP画像タグ　og:imageサイズなど

タグ	説明
og:image	Facebookでシェアされた時に表示される画像のURL。
og:image:width	画像の幅。入れないと最初にシェアした人には見えません。
og:image:height	画像の高さ。入れないと最初にシェアした人には見えません。

Facebook用の画像タグ

<meta property="og:image" content="画像のURL絶対パスを入れます。" />
<meta property="og:image:width" content="画像の横幅、単位不要" />
<meta property="og:image:height" content="画像の高さ、単位不要" />

画像のサイズを指定する理由は、Facebookがまだクロールしておらず、最初にシェアした人に画像が表示されない事を防ぐ為。

※画像サイズを指定していない場合は、後述のFacebookシェアデバッガーを使えば大丈夫です。

対応しているファイル形式

ファイル形式は、JPEG、PNG、WEBP など。

推奨されているファイル形式はJPGとPNGです。

OGP画像サイズについて

意図せず画像が伸びたり、端が切れたりする事を防ぐポイントをご紹介いたします。
Twitterにも通じる便利な考え方です。

結論から、

投稿画像を高解像度で表示させたいなら、1200 x 630ピクセル。
小さくても600 x 315ピクセル以上を使う。

投稿画像サイズ

縦横どちらかのサイズが足りないと引き延ばされ、結果溢れた所がトリミングされます。
画像の端が切れるのを防ぐには、上記サイズの様にアスペクト比「1.91：1」で画像を作りましょう。

公式配布のアスペクト比のテンプレートはこちらから。

※画像はURLに基づきキャッシュされるため、URLを変更しない限り更新されません。
つまり、一度設定したけど後から変更したい場合、ファイル名とかそのままだとキャッシュクリアされないんです。
また、横幅と高さを設定していない場合、メタデータがまだクローラーにキャッシュされてないので、最初にシェアする人は画像を確認出来ません。

フエル

ブログ記事のアイキャッチ画像を「1.91：1」で作っておけば調整せずに使えるので楽ですね。

Facebookの投稿画像が上手く表示されない時は？

シェアデバッガーで画像をプリキャッシュする
シェアデバッガーでURLを実行し、ページのメタデータをプリフェッチします。コンテンツ画像を更新する場合にも使用できます。
グラフAPIで画像をプリキャッシュする
グラフAPIを使用してプログラムでURLの強制スクレイピングを実行し、ページのメタデータをプリフェッチします。この方法もコンテンツ画像の更新に使用できます。
Open Graphタグを設定する
og:image:widthとog:image:heightを設定すると、クローラーは画像を非同期的にダウンロードせず、すぐに表示します。

画像を差し替える場合は、格納パスかファイル名を変えてから念のためシェアデバッガーで確認って流れが良さそうですね。
横幅と高さは初めから入れておけば問題無さそうです。