OGP画像とは？推奨サイズと作成時の注意点、実例も紹介

2016-03-312025-04-27

WEB Tips デザイン・コーディング

この記事にはプロモーションが含まれています

SNSでコンテンツをシェアする際、最初に目に入るのがOGP画像です。この小さな画像が、ユーザーがコンテンツをクリックするかどうかを左右する重要な要素となります。

しかしOGP画像は、ウェブページ上表示されるわけではないので、制作段階でつい見落としがちな要素でもあります（実際私もよく忘れます）

本記事では、OGP画像の基礎知識から作成のポイント、正確な設定方法を解説します。

OGP画像の役割と重要性

OGPとは「Open Graph Protocol（オープングラフプロトコル）」の略で、2010年にFacebookによって開発されたウェブページのメタデータ規格です。

OGP画像は、このプロトコルに基づいて設定されるウェブページを代表する画像のことです。

この画像が、SNS上でウェブページがシェアされた際に自動的に表示され、ユーザーがコンテンツをクリックするかどうかの判断材料になり、ウェブページの印象を左右する重要な要素となります。

適切に設定されたOGP画像は、コンテンツの視認性、魅力を向上させ、クリック率を増加させる効果があります。また、一貫したデザインを使用することでブランドの認知度を高める効果もあります。

OGP画像の役割

コンテンツの視認性と魅力向上
クリック率（CTR）の増加
ブランドの一貫性の維持

FacebookやTwitter、LinkedInなどのソーシャルメディアはもちろん、LINEやSlackなどのメッセージングアプリ、さらにはRedditのような掲示板サイトでも表示されるため、その影響力は非常に大きいのです。

OGP画像が使われるプラットフォーム

Facebook
X（旧Twitter）
LINE
はてなブックマーク
Reddit
LinkedIn
Slack
Discord

The Open Graph protocol
http://ogp.me/

効果的なOGP画像の作成方法とポイント

効果的なOGP画像を作成するためにいくつかの重要なポイントを押さえておく必要があります。

OGP画像のサイズ

OGP画像のサイズは各プラットフォームによって最適な寸法が異なりますが、一般的には以下のサイズが推奨されています。LINEではOGP画像を正方形で表示するため、重要な要素は中央に配置する必要があります。

プラットフォーム	推奨サイズ（px）	アスペクト比
Facebook	1200 x 630	1.91:1
X（Twitter）	Summary Card with Large Image: 1200 x 675	16:9
X（Twitter）	Summary Card: 144 x 144	1:1
LINE	630 x 630 (中央)	1:1
LinkedIn	1200 x 627	1.91:1

OGP画像をデザインする時のポイント

OGP画像をデザインする時には、視認性とブランディングも重要な要素です。

コントラストを高く設定し、背景と文字の色の組み合わせに注意します。ロゴやブランドカラーを使用することで、ユーザーにブランドの印象を強く残すことができます。シンプルで分かりやすいデザインを心がけることも大切です。

テキストを含める場合は、全体の20%以下に抑えるのがベストプラクティスです。

スマホなど小さい画面で表示されることを想定して、フォントサイズは十分に大きく設定し、重要なメッセージは中央に配置します。（正方形で表示された時に見切れてしまうのを防ぐ）

ファイル形式は、JPG、PNG、GIF形式（WebPはまだ完全にサポートされていません）。SVGは非対応です。

ファイルサイズは5MB以下にします（Facebookは8MB以下、Xは5MB以下）。アニメーションGIFを採用する場合は最適化に注意が必要です。

OGP画像デザインのポイント

コントラストを意識する
シンプルで分かりやすいデザイン
テキストは全体の20%以下推奨
重要なテキストは中央に配置
ファイル形式：JPG、PNG、GIF
ファイルサイズ：5MB以下

OGPの設定方法

OGP画像を含めたOGPタグを設定するには、HTMLの<head>セクション内にメタタグを追加します。基本的な設定は次のようになります。

<meta property="og:title"       content="ページタイトル">
<meta property="og:type"        content="websiteまたはarticle">
<meta property="og:url"         content="ページURL">
<meta property="og:image"       content="OGP画像URL">
<meta property="og:description" content="ページの説明文">
<meta property="og:site_name"   content="サイト名">
<meta property="og:locale"      content="ja_JP">

必ず設定しておきたいプロパティ

以下の4つのプロパティは、SNSでのシェア時に最低限必要な情報です。

og:title : 55～60文字以内
og:type
website : サイトのトップページ
article : 記事ページなど
og:url : 絶対パスを使用（https://~）canonicalを設定している場合は同一にする
og:image: 絶対パスで

設定すると尚いい推奨プロパティ

以下のプロパティを設定することで、ユーザーにより伝わりやすくなります。

og:description : 200文字以内を目安にすると、ほとんどのプラットフォームで全文が表示される
og:site_name
og:locale
多言語サイトの場合はog:locale:alternateで言語を指定すると◯。

<meta property="og:locale" content="ja_JP">
<meta property="og:locale:alternate" content="en_US">

X (Twitter)用プロパティ

X用のプロパティを設定することで、リンク表示のクオリティが向上します。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ページタイトル">
<meta name="twitter:description" content="ページ説明文">
<meta name="twitter:image" content="https://example.com/ogp.jpg">

Summary Card	ブログ記事や製品情報、レストラン情報などWebサイトの情報を表示
Summary Card witd Large Image	summary cardの画像が大きく表示される版
Photo Card	写真が表示されるカード
Gallery Card	4枚の写真を表示できるカード
App Card	アプリの詳細情報を表示できるカード
Player Card	ストリーミング再生ができるカード、特別な承認作業が必要なよう
Product Card	製品情報を表示できるカード、写真のほか在庫情報や価格なども表示できる