OGPとは?シェアされる最適なOGP画像サイズとOGPタグ設定

SNSで必須のOGP設定&最適画像サイズ

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

タイムラインに綺麗な画像と分かり易い説明があると、魅力的でシェアしたくなります。逆に、画像の端が切れていたり、表示すらされていないと残念な気持ちになります。

そこで今回は、タイムラインでシェアして貰うのに最適なOGP画像サイズと、その為に必要なOGPタグ設定について解説。自分で投稿する時にも役立ちます。

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

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

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

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

共通のOGPから順にみる
Facebookの解説はこちら
Twitterの解説はこちら

OGPとは?

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

すごく簡単に言うと、

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

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

詳細の前に、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タグと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:imageFacebookでシェアされた時に表示される画像の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シェアデバッガーを使えば大丈夫です。

OGP画像サイズについて

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

結論から、

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

投稿画像サイズ

画像:最適投稿サイズのサンプル

縦横どちらかのサイズが足りないと引き延ばされ、結果溢れた所がトリミングされます。
画像の端が切れるのを防ぐには、上記サイズの様にアスペクト比「1.91:1」で画像を作りましょう。
公式配布のアスペクト比のテンプレートはこちらから。
※因みに、このアスペクト比で作れば後述のTwitterカードでも使えます

※画像はURLに基づきキャッシュされるため、URLを変更しない限り更新されません。
つまり、一度設定したけど後から変更したい場合、ファイル名とかそのままだとキャッシュクリアされないんです。
また、横幅と高さを設定していない場合、メタデータがまだクローラーにキャッシュされてないので、最初にシェアする人は画像を確認出来ません。
ブログ記事のアイキャッチ画像を「1.91:1」で作っておけば調整せずに使えるので楽ですね。

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

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

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

Facebookの参考ヘルプと確認ツールまとめ

OGP画像が上手く反映されていないとか、キャッシュを消したい等であれば、「シェアデバッガー」。

ブログやサイトで共有してもらう画像を作るなら「アスペクト比ベストプラクティス」で「1.91:1」のテンプレートをベースにすると分かり易いです。

参考:シェアデバッガー
参考:アスペクト比ベストプラクティス
参考:ウェブ管理者向けシェア機能ガイド
参考:リンクシェアの画像

カードタグとサマリー画像の設定 – Twitter編

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

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

Twitterカードタグの種類

Twitterでは独自のOGPタグを「Twitterカード」と呼んでいます。Open Graphのプロパティ側でサポートされているものと、そうでないものがあります。

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

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

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 144ピクセル、最大4096 x 4096ピクセル。サイズは2MBまで。

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

画像:Twitter投稿画像summary

良く使うのは大きい投稿画像「summary_large_image」

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

最小サイズは300 x 157ピクセル、最大サイズは4096 x 4096ピクセル。サイズは5MBまで。

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

画像:Twitter投稿画像summary_large

Facebookと同じ高解像度用1200 x 630ピクセル、もしくは大きな画像を含むリンクページ投稿は600 x 315ピクセルの画像を用意しておけば問題ありません。Facebookと同じくアスペクト比「1.91:1」です。
カードバリデーターという公式のテストツールで表示確認出来ます。

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

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

WordPressならプラグインでOGPの設定が簡単

OGP設定自体はここで紹介した通りにやれば難しくはありません。

ただ、ブログなどは記事毎に設定するのは大変です。WordPressを使っている方はプラグインを使いましょう。

Yoast SEO」がおすすめです。

まとめ

長くなりましたが、お読み頂きありがとうございました。公式情報と検証を元に、基本的な所をまとめました。

お役に立てれば幸いです。

画像:Facebookのプロフィール写真・画像を上手に設定するコツは?

Facebookのプロフィール写真・画像を上手に設定するコツは?


画像:Twitterのアイコン・ヘッダー画像サイズ!プロフィールはこれで完璧

【2021年】Twitterのアイコン・ヘッダー画像サイズ!プロフィールはこれで完璧

OGP画像の確認方法とうまく表示できない時の対処法

SNS用OGP画像の確認方法とうまく表示できない時の対処法