ページのURLをSNSやチャットに貼ったとき、画像が出なかったり、意図しない文章が表示されたりすることがあります。原因の多くはOGPの設定不足です。OGPを設定すると、シェアされたときのタイトル・説明・画像を自分で指定でき、クリックされやすい見せ方に整えられます。この記事では、OGPの基本、設定する主なタグ、画像サイズの目安、X向けのカード設定、表示の確認方法を手順で解説します。情報は2026年10月時点のものです。
OGP設定の要点
この記事の要点
- OGPは、シェアされたときのタイトル・説明・画像・URLを指定するためのmetaタグ。
- 最低限、og:title、og:description、og:image、og:url、og:typeの5つを設定する。
- 画像は横1200×縦630ピクセル（約1.91:1）を基準にし、大事な文字や顔は中央に寄せる。
OGPとは
OGP（Open Graph Protocol）とは、Webページの情報をSNSなどに正しく伝えるための共通の記述ルールです。もとはFacebookが提唱したもので、現在はFacebook、LINE、Slack、Xなど多くのサービスが、リンクのプレビューを作る際にOGPの情報を読み取ります。
OGPを設定していない場合、サービス側がページから自動で文字や画像を拾うため、関係のない画像が出たり、何も表示されなかったりします。検索結果に出るtitleタグやメタディスクリプションとは別に、SNS向けの見せ方を決める設定と考えると分かりやすいです。
設定する主なタグ
OGPのタグは、HTMLの<head>内にproperty属性を使って書きます。name属性ではない点に注意してください。
タグ | 内容 | 書き方のポイント |
|---|---|---|
og:title | シェア時のタイトル | titleタグと同じでもよい。サイト名は省いて短くする |
og:description | シェア時の説明文 | 全角60〜90字程度で要点を書く |
og:image | 表示する画像のURL | https から始まる絶対URLで指定する |
og:url | ページの正式なURL | パラメータなしの正規URLにする |
og:type | ページの種類 | トップページは website、記事は article |
og:site_name | サイト名 | 全ページ共通で設定する |
<meta property="og:title" content="ホームページ制作の流れ｜依頼から公開までの手順">
<meta property="og:description" content="依頼から公開までの流れを、工程ごとの期間の目安とあわせて解説します。">
<meta property="og:image" content="https://example.com/images/ogp.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/blog/website-flow">
<meta property="og:type" content="article">
<meta property="og:site_name" content="サイト名">OGP画像のサイズと作り方
OGP画像は、横1200×縦630ピクセル（比率約1.91:1）を基準にするのが一般的です。多くのSNSで大きく表示でき、サービスごとに端が切れても内容が伝わりやすいサイズです。
- 文字や人物の顔など大事な要素は、画像の中央に寄せる。端はサービスによって切り取られることがある。
- スマートフォンで小さく表示されても読めるよう、文字は大きく、量は少なくする。
- og:image:width と og:image:height でサイズを明記すると、初回のシェアから画像が表示されやすくなる。
- 記事ごとに専用の画像を用意できない場合は、サイト共通の画像を設定しておく。
当社のブログでは、記事ごとのOGP画像が未設定の場合に、サムネイル画像、アイキャッチ、サイト共通の画像の順で自動的に代わりを使う設定にしています。画像の入れ忘れがあっても、何も表示されない状態を防げます。
X（旧Twitter）向けのカード設定
Xでは、OGPに加えてtwitter:cardというタグでカードの表示形式を指定できます。大きな画像で表示したい場合は summary_large_image を指定します。
<meta name="twitter:card" content="summary_large_image">タイトル・説明・画像は、Xでもog:title、og:description、og:imageの値を利用できるため、OGPを正しく設定していれば、追加するのはtwitter:cardだけで済むことが多いです。
設定の手順と確認方法
- サイト共通のOGP（og:site_name、共通画像）と、ページごとのOGP（タイトル・説明・URL・画像）を分けて考える。
- CMSやテーマにOGPの設定欄があるか確認する。WordPressなどではSEO系のプラグインで設定できることが多い。
- 画像を1200×630ピクセルで用意し、公開されたURLで指定する。
- 公開後、ページのソースを表示し、og:から始まるタグが出力されているか確認する。
- 実際にSNSやチャットにURLを貼り、表示を確認する。Facebookのシェアデバッガーなど、各サービスの確認ツールも使える。
SNSはリンクの情報を一定期間キャッシュ（保存）します。設定を直しても古い表示が残る場合は、各サービスの確認ツールで情報を再取得すると反映されることがあります。
よくある失敗
- og:imageを相対パス（/images/ogp.png など）で書き、画像が表示されない。
- 全ページでog:titleとog:urlがトップページのままになっている。
- 画像の端に文字を置き、SNSによって切れてしまう。
- propertyではなくnameでOGPのタグを書いている。
- 公開前のテスト環境のURLが、og:urlやog:imageに残っている。
OGPは検索順位を直接上げる設定ではありませんが、シェアされたときのクリックに影響します。検索結果向けの設定は構造化データとはやSEO対策とはもあわせて確認してください。
まとめ
- OGPは、SNSやチャットでシェアされたときのタイトル・説明・画像を指定する設定。
- og:title、og:description、og:image、og:url、og:typeの5つを最低限設定する。
- 画像は1200×630ピクセルを基準にし、大事な要素は中央に置く。
- Xではtwitter:cardでカードの形式を指定する。
- 設定後は実際にURLを貼って表示を確認し、古い表示が残る場合は確認ツールで再取得する。
サイト全体のOGPやSNS向けの見せ方を整えたい場合は、サービス一覧からご相談いただけます。
