OGP設定 完全ガイド｜SNSでシェアされる画像・タイトル・descriptionの整え方
【ご注意】 本記事は2026年5月時点の各SNSの仕様・推奨値を基にまとめています。SNS側の仕様変更や、CMS・テーマによってメタタグの出力方法が異なるため、設定後は必ず各SNSのデバッガーで実際の表示を確認してください。
① OGPとは｜SNSで「リンクが立つ」仕組み
OGP（Open Graph Protocol）は、もともとFacebookが2010年に提唱したWebページの内容をSNSに正しく伝えるためのメタデータ規格です。HTMLの <head> 内に決められた形式の <meta> タグを書いておくと、URLがシェアされた際にSNS側がそのタグを読み取り、画像付きのリッチなカード（リンクプレビュー）として表示してくれます。
現在ではFacebookだけでなく、X（旧Twitter）、LinkedIn、はてなブックマーク、Slack、Discord、LINE など、主要なSNSやチャットツールがOGPに対応しています。OGPを設定していないページをシェアしても、SNS上ではカードが立たずテキストリンクのみが並ぶ状態になり、視覚的訴求が大きく落ちるうえ、画像が出ない・タイトルが途中で切れるといった事故も起こります。
小規模事業者にとってSNSは数少ない無料の集客チャネル。自社サイトを立ち上げた段階や、新しい記事LPを書いた段階で最初に潰しておきたいのがOGPです。テンプレ化さえできれば、以降はコピペで済むコストの安い投資になります。
② 設定すべき必須メタタグ一覧
OGPに関連するメタタグは数多くありますが、まず外せないのは次のセットです。すべて <head> 内に記述します。
| タグ | 役割 | 必須度 |
|---|---|---|
<title> | ブラウザタブ・検索結果のタイトル | 必須 |
meta name="description" | 検索結果の説明文 | 必須 |
og:title | SNSカードのタイトル | 必須 |
og:description | SNSカードの説明文 | 必須 |
og:image | SNSカードの画像（絶対URL） | 必須 |
og:url | ページの正規URL | 必須 |
og:type | ページ種別（website/article 等） | 必須 |
og:site_name | サイト名 | 推奨 |
twitter:card | Xカードの種類（summary_large_image 等） | 必須 |
twitter:site | サイトのXアカウント（@付き） | 推奨 |
link rel="canonical" | 正規URLの指定（重複コンテンツ対策） | 必須 |
記述例は次の通りです。
<!-- 基本 -->
<title>記事タイトル｜サイト名</title>
<meta name="description" content="記事の説明文（120字目安）" />
<link rel="canonical" href="https://example.com/articles/123" />
<!-- OGP -->
<meta property="og:title" content="記事タイトル" />
<meta property="og:description" content="記事の説明文" />
<meta property="og:image" content="https://example.com/og/article-123.png" />
<meta property="og:url" content="https://example.com/articles/123" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="サイト名" />
<!-- X (Twitter) -->
<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/og/article-123.png" />
<meta name="twitter:site" content="@your_account" />og: 系を一通り設定していれば twitter:title / twitter:description / twitter:image は省略可能です（Xが og: 値を自動でフォールバックして使う）。ただし明示すれば確実に意図した値が使われ、Xだけ画像のアスペクト比や文面を変えたい場合は別途指定します。上のサンプルは「明示派」の書き方で、最小構成にしたいなら twitter:card と twitter:site だけ残せば十分です。
③ og:image の推奨スペック
OGPで最も「失敗が見える」のが画像です。サイズや形式を間違えると、切れる・潰れる・そもそも表示されないといった事故が起きます。
- サイズ：1200×630px（アスペクト比約1.91:1）。これがX summary_large_image・Facebook・LinkedIn いずれにも適合する事実上の標準です。
- ファイル形式：JPGまたはPNG。WebPは対応SNSが限られるため避けるのが無難。
- ファイルサイズ：Facebook公式は8MBまで許容。ただし、X / LinkedIn / はてブ等での安定動作（タイムアウトでカードが立たない事故を避ける）を考えると1MB以下が無難で、理想は300KB前後。重いPNGはTinyPNGなどで圧縮しておくと安全です。
- 必ず絶対URLで指定（
https://から始まる完全なURL）。相対パス（/og/article.png）では多くのSNSで画像が出ません。 - 文字を入れる場合は安全領域を意識。Xの summary_large_image では上下が少し切れて表示されることがあるため、文字は中央寄せ＋上下に余白80px以上を確保すると安心です。
バナーやOGP画像の作り方そのものを学びたい場合は、バナーデザインの基本ガイドもあわせてご覧ください。社内にデザイナーがいなくても破綻しないレイアウトの考え方を解説しています。
④ タイトル・descriptionの文字数最適化
OGPで使うタイトルと説明文には、SNSカード上で「切れずに収まる」目安の文字数があります。
- og:title：全角32文字目安。Xのカードでは32〜38文字で末尾が省略されます。タイトル前半に主訴求を置くのが鉄則。
- og:description：全角120文字目安。なお現行Xの summary_large_image カードは description 自体をほぼ表示しません（タイトルとドメインのみ）。とはいえ Slack / LINE / Facebook / LinkedIn では description が読まれるので設定自体は必須。これらでは120〜200文字程度まで表示されます。
- 絵文字や記号の多用は避ける。SNSによっては全角換算が崩れ、想定より早く切れることがあります。
文字数を正確に数えたい場合は、文字数カウンターツールを使うと、SNS別の表示上限を超えていないかを一目で確認できます。各SNSの仕様まとめは SNS別文字数制限ガイド もあわせてどうぞ。
⑤ SNS別カード仕様の違い
OGPは共通規格ですが、表示の仕方はSNSごとに微妙に異なります。
| SNS | 推奨カード/画像比率 | 注意点 |
|---|---|---|
| X（旧Twitter） | summary_large_image / 1200×630 | 画像なしだと本文が短く埋もれる。card指定必須 |
| 1200×630（大画像表示は600×315以上 / 絶対最小200×200） | 600×315未満は正方形サムネに格下げ。200×200未満はそもそも採用されない | |
| 1200×630 | og:image が必須。タイトルは長めに表示される | |
| はてなブックマーク | 正方形サムネ | og:imageの中央付近が切り出されて表示される |
| Slack / LINE | 1200×630 | OGPをそのまま読み込み。og:imageの絶対URL必須 |
画像で訴求したい記事LP・サービスページでは、Xは summary_large_image を必ず指定し、og:imageは1200×630pxを用意する、という型を守ればまず破綻しません。
⑥ 設定後の確認方法
OGPを書いたら、本番URLで実際にどう表示されるかを必ず確認します。主要なデバッガーは次の通りです。
- Facebook Sharing Debugger：FacebookとMessenger上での表示確認。再スクレイプボタンでキャッシュ更新も可能。
- LinkedIn Post Inspector：LinkedInでのカード表示確認。
- X（Twitter）：Card Validator は廃止されたため、現状の現実解は ①自分の鍵アカウントや下書きで一度投稿してプレビューを見る、②Slackやはてブの DM / 自分宛投稿に URL を貼って OGP 取得挙動から逆算する、のいずれか。
- Slack / Discord に URL を貼る：各ツールが独自にOGPを取りに来てカード化するため、メタタグが拾われているか・画像が抜けていないかの一次確認に使えます。
- 当サイトのOGPチェッカー：URLを入れるだけで3SNSの見た目と必須タグ充足を一括確認。
ローカル開発環境（localhost）ではSNS側からアクセスできないため、これらの確認は本番URLまたは公開ステージングで行います。本番デプロイ前に確認したい場合は、ngrok / Cloudflare Tunnel などのローカルトンネルで一時的な公開URLを発行し、そのURLをFacebook Sharing Debuggerに入れるのが定番です。
⑦ CMS / ホスティング別の設定方法
実際にOGPタグをどこから書き込むかは、使っているCMSやフレームワークで違います。小規模事業者が触る確率の高いものを中心に要点だけ。
- Next.js（App Router）：各
page.tsx/layout.tsxでexport const metadataを書き、openGraph/twitterフィールドを指定。ルートでmetadataBaseを設定しておくと画像URLが自動で絶対URL化されます。 - WordPress（Yoast SEO / All in One SEO）：プラグインを入れると投稿編集画面下部に「ソーシャル」タブが出るので、そこから記事ごとに og:title / og:description / og:image を上書き。テーマ全体の既定値はプラグインの「ソーシャル設定」で指定します。
- STUDIO：右側パネル「ページ設定 → SEO・OGP」から、ページごとにOGP画像とSNS用タイトル・説明文を設定。サイト全体のデフォルトは「サイト設定 → SEO」で。
- Shopify：商品・コレクション・ページの「検索エンジン掲載結果のプレビュー」でtitle/descriptionは編集可能。OGP画像はテーマファイル（
theme.liquid）の<head>にog:imageを追記するか、SEOアプリ（例：SearchPie、Avada SEO）を使うのが手早い。
⑧ よくあるミス・トラブル
ミス1：og:imageを相対パスで指定して画像が出ない
<meta property="og:image" content="/og/article.png" /> のような相対パスは、SNSが画像URLを解決できず表示されません。必ず https:// から始まる絶対URLで指定します。Next.jsの metadata API を使う場合は metadataBase を設定しておくと自動で絶対URL化されます。
ミス2：og:imageを更新したのに古い画像が出続ける
SNSは負荷軽減のためOGP画像を強くキャッシュします。画像差し替え後にすぐ反映させるには：
- Facebook Sharing Debugger で該当URLを入れ「もう一度スクレイピング」を実行
- LinkedIn Post Inspector で再取得
- 確実性を取るなら画像ファイル名を変える（
og-v1.png→og-v2.png）。URLが変われば確実にキャッシュをすり抜けられる
ミス3：descriptionが長すぎ・短すぎ
長すぎると途中で切れて意味不明になり、短すぎるとSNS側が本文から勝手に文章を抜き出します。70〜120文字でページの要旨をまとめるのが安全圏です。
ミス4：og:url と canonical が食い違っている
パラメータ付きURLでシェアされたときに重複コンテンツ扱いされないよう、og:url と canonical は同じ正規URL（パラメータなし）を指定するのが基本です。
ミス5：twitter:cardの指定漏れ
twitter:card を書かないとXでは画像なしの小カードになります。記事・LPなど画像で見せたいページは必ず summary_large_image を指定します。
⑨ 当サイトの「OGPチェッカー」の使い方
Toolbox Portalの「OGPチェッカー」は、確認したいページのURLを入れるだけで、X・Facebook・LinkedInの3SNSでの見た目と必須メタタグの充足状況を一画面で確認できるツールです。
- OGPチェッカーのページを開く
- 確認したいページのURLを入力
- 「チェック」ボタンを押す
- 3SNSのプレビューが並んで表示され、欠けているタグや画像サイズ不適合があれば一覧で指摘される
自社サイトの記事更新時のセルフチェックはもちろん、競合サイトのOGPの作り方を観察する用途にも使えます。複数SNSのデバッガーを行き来する手間を省きたい場合に便利です。
関連して、LPやサイト構築まわりでは LPコンポーネントビルダー でセクションを組み立てる、バナー最適化ツール でSNSサイズに画像を整える、といった使い方が定番です。集客全体の設計は 集客ロードマップ、SNS運用そのものは 小規模事業者のSNS集客入門をご参照ください。
よくある質問(FAQ)
Q. OGPとは何ですか?必ず設定しないといけませんか?
OGP（Open Graph Protocol）は、SNSにURLが貼られた際にどのような画像・タイトル・説明文を表示するかを指定する仕組みです。必須ではありませんが、未設定だと画像なしの素っ気ない見た目になり、クリック率が大きく下がります。SNS経由の流入を狙うサイトでは事実上必須と考えてください。
Q. og:imageの推奨サイズはどのくらいですか?
1200×630px（アスペクト比1.91:1）が現状の標準です。X（Twitter）のsummary_large_image、Facebook、LinkedInいずれもこのサイズで適切に表示されます。ファイル形式はJPGまたはPNG。容量はFacebook公式で8MBまで許容されますが、他SNSでのタイムアウト事故を避けるため1MB以下に抑えるのが無難です。
Q. og:imageを更新したのに古い画像が出続けます。なぜですか?
各SNSが画像をキャッシュしているためです。Facebook Sharing Debugger、LinkedIn Post Inspector などのデバッガーで該当URLを再スクレイプするとキャッシュが更新されます。確実性を高めたい場合は、画像のファイル名やパスにバージョン番号（例：og-v2.png）を入れて別URLとして配信する方法も有効です。
Q. Twitter Cardの「summary」と「summary_large_image」の違いは?
summaryは正方形の小さいサムネイル付きカード、summary_large_imageは横長の大きな画像が目立つカードです。記事・LP・商品ページなど画像で訴求したいページは summary_large_image を選び、og:imageは1200×630pxで用意するのが基本です。
Q. OGPの設定が正しいか確認するにはどうすればいいですか?
各SNSが公式デバッガーを提供しています。Facebook Sharing Debugger、LinkedIn Post Inspector などでURLを入力すると、実際にどのような見た目で表示されるか・必須タグの不足がないかを確認できます。複数SNSをまとめて確認したい場合は、当サイトのOGPチェッカーが便利です。