COLUMN
コラム
2026.05.23
OGPとは？設定方法・画像サイズ・確認ツール完全ガイド
- allmanage
- 株式会社オールマネージからの情報発信コラムです！
SNSでWebページをシェアしたとき、タイトルや画像が自動で表示される――その仕組みを支えているのが「OGP」です。OGPを正しく設定すれば、シェアされるたびにクリック率向上が期待できます。本記事では、OGPの基本から具体的な設定方法・推奨画像サイズ・トラブル解決策まで、Webサイト初心者の方にもわかりやすく解説します。
OGPとは？1分でわかる基本説明
OGP（Open Graph Protocol）とは、WebページがSNSでシェアされたときに表示されるタイトル・説明文・画像・URLなどの情報をコントロールするための仕組みです。Facebookを運営するMeta社が策定し、現在はFacebook・X（旧Twitter）・LINEなど主要なSNSで広く採用されています。
OGPはHTMLの<head>内に記述するog:から始まるメタタグによって設定します。設定しない場合、SNSのクローラーがページ内容を自動的に解析して表示しようとしますが、意図しない画像や説明文が表示されることがあります。
たとえば、ホームページのURLをLINEで友人に送ったとき、サムネイル画像・タイトル・一言説明が表示されますよね。あの表示をコントロールしやすくなるのがOGPです。なお、SNS側の仕様変更やキャッシュの影響で意図通りに表示されない場合があります。
OGP未設定の場合：SNS側がページ内の画像やテキストを自動選択するため、ロゴが小さく表示されたり関係のない画像が出たりと、見栄えが悪くなります。
OGP設定済みの場合：狙った画像・タイトル・説明文が表示されやすくなり、ブランドイメージを統一した状態でシェアされます。
OGPを設定するメリット
OGPを設定することで得られるメリットは主に4つあります。
- クリック率（CTR）の向上：魅力的な画像と的確なタイトル・説明文が表示されることで、シェアされた投稿へのタップ・クリックが増えます。
- ブランドイメージの統一：SNSでシェアされるたびに自社の意図した見せ方で表示されるため、ブランドの一貫性が保たれます。
- SNS経由の流入増加：視認性が上がることで、潜在的なユーザーへのリーチが広がります。
- 信頼感の向上：きちんと画像とタイトルが表示されるページは、ユーザーに「ちゃんと管理されているサイト」という印象を与えます。
特に、ホームページ制作やリニューアルを行う際は、OGP設定まで含めて対応することが重要です。当社でも、Webサイト制作時にOGP設定を標準作業として実施しています。詳しくは制作サービスページをご覧ください。
OGPの基本タグ一覧と書き方
OGPはHTMLの<head>タグ内に記述します。OGP公式仕様で定められた必須プロパティは4つ、それに加えて設定が強く推奨されるタグがあります。
必須タグ（4つ）
| タグ名 | 内容 | 例 |
|---|---|---|
og:title |
ページのタイトル | ホームページ制作 大阪｜WEB制作.com |
og:type |
コンテンツの種類 | website（トップページ）/ article（記事） |
og:image |
シェア時に表示される画像URL | https://example.com/images/ogp.jpg |
og:url |
ページの正規URL | https://example.com/about/ |
推奨タグ
| タグ名 | 内容 | 例 |
|---|---|---|
og:description |
ページの説明文（120字程度） | 大阪のホームページ制作会社。格安・高品質でご提供。 |
og:site_name |
サイト名 | WEB制作.com |
任意タグ（補足設定）
| タグ名 | 内容 | 例 |
|---|---|---|
og:locale |
コンテンツの言語・地域 | ja_JP |
og:image:alt |
OGP画像の代替テキスト | ホームページ制作サービスのイメージ画像 |
実際のHTML記述例は以下のとおりです。
<head>
<meta property="og:title" content="ページタイトル｜サイト名" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://example.com/images/ogp.jpg" />
<meta property="og:url" content="https://example.com/page/" />
<!-- 推奨タグ -->
<meta property="og:description" content="ページの説明文を120文字程度で入力します。" />
<meta property="og:site_name" content="サイト名" />
</head>og:typeの使い分け
og:typeはページの種類によって値を変えます。
website：トップページや固定ページ（会社概要・サービスページなど）article：ブログ記事・コラム・ニュースなどの投稿ページ
トップページには必ずwebsite、記事ページにはarticleを指定するのが基本です。
OGP画像の推奨サイズと注意点
推奨サイズは1200×630px
og:imageに設定する画像の実務上の汎用推奨サイズは横1200px × 縦630px（アスペクト比1.91:1）です。Facebook・X・LINEで表示が崩れにくい実務上の目安として、このサイズに統一するのが実務上最もよく使われる方法です。
| SNS | 推奨サイズ | 実務上の最小目安 | 備考 |
|---|---|---|---|
| 1200×630px | 600×315px程度 | 600px未満は小さく表示される場合あり | |
| X（旧Twitter） | 実務上1200×630pxが流用される（公式はアスペクト比2:1） | 300×157px程度 | 1200×630pxはFacebook基準の流用。X公式は2:1比率・最小300×157px・最大4096×4096px・5MB未満。summary_large_imageで大きく表示可（公式仕様は変更される場合あり） |
| LINE | 1200×630px | 400×400px目安（公式未確定・環境により表示が変わるため実機確認推奨） | 中央部分が正方形に切り抜かれる場合あり（公式未確定） |
上記の最小サイズはSNS公式が明示している値ではなく、実務上の推奨値です。各SNSの仕様は予告なく変更される場合があるため、最新情報は各プラットフォームの公式ドキュメントをご確認ください。
OGP画像を設定するときの注意点
- 画像URLは絶対URL（https://から始まる）で指定する：相対パスは認識されません。
- ファイルサイズは1MB以内が目安：大きすぎると読み込みが遅くなり、SNSのクローラーがスキップすることがあります。
- 重要な要素は中央に配置する：LINEなどでは画像が正方形にトリミングされる場合があるため、伝えたい文字やロゴは中央寄りに置きましょう。
- キャッシュに注意する：画像を差し替えた場合は、URLにパラメータを付けるか確認ツールでキャッシュをクリアする必要があります（後述）。
- alt属性相当のテキストを意識する：og:imageとセットで
og:image:altタグにも代替テキストを設定することが推奨されています。
SNS別OGP設定ガイド（Facebook / X / LINE）
Facebookの設定
Facebookは基本的なOGPタグ（og:title / og:description / og:image / og:url / og:type）をそのまま読み取ります。追加でfb:app_idタグを設定すると、シェアデバッガーとの連携がよりスムーズになります。
<!-- Facebook向け追加設定 -->
<meta property="fb:app_id" content="YOUR_APP_ID" />なお、fb:app_idはなくても基本的な表示には影響しません。
X（旧Twitter）の設定
Xは独自の「Twitter Card」タグを使います。twitter:cardの値によって表示スタイルが変わります。
<!-- X（旧Twitter）向けTwitter Cardタグ -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@アカウント名" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:description" content="説明文" />
<meta name="twitter:image" content="https://example.com/images/ogp.jpg" />twitter:card の2種類の違い
summary：画像が小さく（左側に正方形）表示され、テキストが主体の投稿に向いています。summary_large_image：画像が大きく（横長で上部に）表示され、視覚的に訴求力が高まります。記事・サービスページにはsummary_large_imageを推奨します。
XはOGタグをある程度読み取りますが、Twitter Cardタグが明示されているとより確実に意図した通りに表示されます。
LINEの設定
LINEは基本的にFacebookと同じOGPタグ（og:title / og:description / og:image）を読み取ります。LINE専用のタグを別途設定する必要はありません。
ただし、LINEでは画像が正方形にトリミングされて表示される場合があります。ロゴや文字など重要な要素は必ず画像中央に配置するようにしましょう。また、LINEはog:imageのキャッシュをかなり長期間保持する傾向があるため、画像を差し替えたあとに古い画像が表示され続けることがあります（対処法は後述します）。
WordPressでのOGP設定方法
WordPressではプラグインを使うことで、コードを直接編集しなくてもOGPを簡単に設定できます。代表的なプラグインは以下の2つです。
All in One SEO（AIOSEO）での設定手順
- WordPress管理画面の「プラグイン」→「新規追加」から「All in One SEO」を検索してインストール・有効化します。
- 左メニューの「All in One SEO」→「ソーシャルネットワーク」をクリックします。
- 「Facebook」タブでOGP画像のデフォルト設定を行います。
- 「Twitter」タブでTwitter Cardを有効化し、カード種別（summary_large_image推奨）を選択します。
- 個別の記事・ページでは、編集画面下部の「AIOSEO設定」→「ソーシャル」タブから個別画像・説明を設定できます。
Yoast SEOでの設定手順
プラグインのバージョンによって画面名称が異なる場合があります。メニュー名が見つからない場合はYoast SEO公式ドキュメントをご参照ください。
- 同様に「Yoast SEO」をインストール・有効化します。
- 左メニューの「SEO」→「ソーシャル」を開きます。
- 「Facebook」タブの「Open Graph メタデータを追加する」をオンにします。
- 「Twitter」タブの「Twitterカードのメタデータを追加」をオンにし、デフォルトカード種別を設定します。
- 記事編集画面の「Yoast SEO」ブロック内「ソーシャル」タブで記事ごとに個別設定が可能です。
どちらのプラグインを選ぶべきか？
どちらも主要な機能は同等です。All in One SEOは直感的なUIで初心者向け、Yoast SEOはSEOコンテンツ分析機能が充実しており中〜上級者向けという印象です。どちらか一方だけ有効化して使いましょう（両方同時利用は非推奨）。
ホームページ制作の際のWordPressプラグイン選定でお悩みの方は、当社へのお問い合わせからご相談ください。
OGP確認ツールの使い方
OGPを設定したら、実際にSNSでどう表示されるか確認することが重要です。以下のツールを活用しましょう。
Facebookシェアデバッガー
Meta社が提供する公式ツールで、FacebookでのOGP表示をリアルタイムで確認・デバッグできます。
URL：https://developers.facebook.com/tools/debug/
- ページにアクセスし、確認したいURLを入力します。
- 「デバッグ」ボタンをクリックすると、OGPタグの解析結果と表示プレビューが表示されます。
- 画像が古いままの場合は「もう一度スクレイピング」ボタンをクリックしてキャッシュを更新します。
第三者プレビューツール（RAKKO TOOLS）
X（旧Twitter）公式のCard Validatorは2026年時点で利用できない場合があります。代わりに、第三者プレビューツールの利用を推奨します。
- Facebook・X・LINEなど複数SNSのOGP表示プレビューを一括で確認できます。
- アカウントへのログインなしで使えるため、手軽に確認したいときに便利です。
- X（旧Twitter）のカード表示もプレビューで確認できます。
LINEのOGP確認方法
LINEには公式の確認ツールがありませんが、以下の方法で確認・キャッシュ更新ができます。
- 実機で確認：LINEのトーク画面にURLを貼り付け、リンクプレビューを直接確認するのが確実です。
- サードパーティツール：RAKKO TOOLS OGPデバッガーではFacebook・X・LINEのプレビューを一括確認できます。
- キャッシュクリア：LINEはキャッシュの強制リセット手段がないため、og:imageのURLにクエリパラメータを付加する（例：
?v=2）方法が有効です。
OGPが表示されない・崩れる場合のトラブル対処法
OGPを設定したのに正しく表示されない場合は、以下を順番に確認してください。
問題1：画像が表示されない・古い画像が出る
原因：SNSのキャッシュに古い情報が残っている可能性が高いです。
- Facebookシェアデバッガーで「もう一度スクレイピング」を実行する。
- og:imageのURLにバージョンパラメータを追加する（例：
?v=20240601）。
問題2：設定したタイトル・説明が反映されない
原因：OGPタグの記述ミスやWordPressプラグインの設定漏れが考えられます。
- HTMLのソースコード（Ctrl+U）で
og:title等のタグが正しく出力されているか確認する。 - Yoast SEOとAll in One SEOが両方有効になっていないか確認する（重複出力の原因）。
問題3：画像が切れる・トリミングされる
原因：画像サイズがSNSの要件を満たしていないか、重要な要素が端に寄っています。
- 画像サイズを1200×630pxに変更する。
- ロゴ・文字・商品など伝えたい要素を画像中央に配置し直す。
問題4：WordPressでog:imageが正しいURLになっていない
原因：アイキャッチ画像が設定されていない、またはプラグインのデフォルト画像設定が空になっています。
- 投稿ページの「アイキャッチ画像」を必ず設定する。
- SEOプラグインの「ソーシャル」タブにデフォルトOGP画像を設定する。
問題5：LINEでいつまでも古い画像が表示される
原因：LINEはOGPキャッシュの保持期間が長く、手動でのリセット手段がありません。
- og:imageのURL末尾にクエリパラメータを変更する（例：
ogp.jpg?v=2）。 - WordPressの場合はSEOプラグインの画像再設定後にパーマリンクの更新も行う。
よくある質問
Q. OGPを設定しないとSEOに悪影響がありますか？
A. Googleの検索順位に直接影響するわけではありませんが、SNSシェア時の見た目が悪くなりクリック率が下がります。結果的に流入が減り、間接的にSEOへの悪影響につながる可能性があります。
Q. og:imageは何枚設定できますか？
A. 複数のog:imageタグを記述することは技術的に可能ですが、基本的には最初に読み込まれた1枚が使用されます。管理の煩雑さを避けるため、1ページにつき1枚の設定を推奨します。
Q. 全ページに同じOGP画像を設定してもいいですか？
A. トップページと同じ画像を使い回すと、どのページがシェアされても同じ見た目になります。記事・サービスページごとに専用のOGP画像を用意するとクリック率の向上が期待できます。
Q. WordPressでOGPを設定するのにプログラミング知識は必要ですか？
A. All in One SEOやYoast SEOなどのプラグインを使えば、コードを書かずに設定できます。管理画面の操作だけで対応可能なため、プログラミング知識がなくても問題ありません。
Q. OGP画像はJPGとPNG、どちらがよいですか？
A. どちらでも問題ありませんが、写真系ならJPG（ファイルサイズ小）、ロゴ・テキストを含むデザイン画像ならPNG（画質劣化なし）が向いています。いずれも1MB以内に収めるようにしましょう。
まとめ
OGPとは、WebページがSNSでシェアされたときのタイトル・説明文・画像を制御するためのプロトコルです。設定することでクリック率向上・ブランドイメージ統一・SNS流入増加といった効果が期待できます。
- 必須タグ（4つ）：og:title / og:type / og:image / og:url
- 推奨タグ：og:description / og:site_name も合わせて設定しておくのがベスト
- 推奨画像サイズ：1200×630px（実務上の汎用推奨値。Facebook・X・LINE 共通）
- X専用タグ：twitter:card に
summary_large_imageを指定すると大きく表示される - LINE：専用タグ不要だが、画像は中央寄せで作成・キャッシュ対策が必要
- WordPress：All in One SEO または Yoast SEO プラグインで設定可能
- 確認ツール：Facebookシェアデバッガー・RAKKO TOOLS など第三者プレビューツールを活用する
OGPの設定は一度行えば長く効果が続く施策です。まだ設定していない方は、ぜひ今日から取り組んでみてください。ホームページの改善全般についてお悩みの方は、もあわせてご参照ください。