X（旧 Twitter）や Facebook、Slack などにページの URL を貼ったとき、タイトル・説明文・画像がセットになったカードが表示されることがあります。この表示のもとになっているのが OGP（Open Graph Protocol） の meta タグです。OGP を設定していないと、シェアされたときにタイトルだけの素っ気ないリンクになったり、意図しない画像が表示されたりします。この記事では、基本の meta タグの書き方から、og:image の推奨サイズ、X 向けの twitter:card、設定を確認する方法までを解説します。
目次
OGP は SNS でのリンクの見え方を指定する仕組み
OGP（Open Graph Protocol）は、ページがシェアされたときに「タイトル・説明・画像として何を表示してほしいか」を HTML の meta タグで宣言するための仕様です。もともと Facebook が策定したものですが、現在は X・LINE・Slack・Discord など多くの SNS・チャットツールがこの情報を読み取ってカード（リンクプレビュー）を組み立てています。
OGP が無い場合、各サービスはページの <title> や本文から表示内容を推測します。うまく拾ってくれることもありますが、画像が出なかったり、本文の中途半端な一文が説明として表示されたりと、見せ方をコントロールできません。シェアされる可能性のあるページには OGP を設定しておくのが基本です。
基本の meta タグを head に書く
OGP の meta タグは <head> 内に記述します。通常の meta 要素と違い、name 属性ではなく property 属性でプロパティ名を指定するのが特徴です。まずは典型的な設定の全体像を見てみましょう。
<!DOCTYPE html>
<html lang="ja" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<title>記事タイトル | サイト名</title>
<!-- OGP の基本設定 -->
<meta property="og:title" content="記事タイトル">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/sample-article/">
<meta property="og:image" content="https://example.com/images/ogp.png">
<meta property="og:description" content="記事の内容を簡潔にまとめた説明文をここに書きます。">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
</head><html> タグに付けている prefix="og: https://ogp.me/ns#" は、「この文書では og: という接頭辞を Open Graph の意味で使います」という宣言です。OGP の公式サイト（ogp.me）で示されている書き方で、仕様に沿うなら付けておくのが確実です。実際には主要な SNS は prefix が無くても OGP を読み取ってくれますが、付けて困ることはないので、テンプレートに含めておくとよいでしょう。
各プロパティの役割は次のとおりです。このうち og:title・og:type・og:image・og:url の4つは、OGP の仕様で必須とされている基本プロパティです。
| プロパティ | 内容 |
|---|---|
og:title | ページのタイトル。サイト名は og:site_name に分けるので含めなくてよい |
og:type | ページの種類。トップページは website、記事ページは article など |
og:url | ページの正規の URL。絶対 URL で指定する |
og:image | カードに表示する画像の URL。絶対 URL で指定する |
og:description | ページの説明文。1〜2文程度の簡潔な文章にする |
og:site_name | サイト全体の名前 |
og:locale | 言語と地域。日本語サイトは ja_JP（省略時は en_US 扱い） |
og:url には、そのページの「正規の URL」を指定します。同じページに複数の URL でアクセスできる場合（パラメーター付き URL など）でも、シェアのカウントや情報の集約はこの URL を基準に行われます。www の有無や末尾のスラッシュも含めて、サイトとして正式な形に統一しておきましょう。
og:image は絶対 URL・1200×630 が基本
カードの印象をもっとも左右するのが og:image です。ここでつまずきやすいポイントが2つあります。
1つ目は URL の書き方です。og:image の値は https:// から始まる絶対 URL で指定してください。OGP を読み取るのはブラウザーではなく各 SNS のクローラー（サーバー側のプログラム）なので、/images/ogp.png のような相対パスでは画像の場所を解決できず、画像なしのカードになってしまいます。
2つ目は画像のサイズです。横長のカードで使われる画像は、1200×630 ピクセル（縦横比約 1.91:1）で用意するのが定番です。これは Facebook が高解像度端末向けに推奨しているサイズで、X の大きな画像カード（summary_large_image）でもきれいに表示できるため、1枚でほとんどのサービスをカバーできます。小さすぎる画像はカードに採用されなかったり、引き伸ばされてぼやけたりするので注意してください。
また、カードのレイアウトによっては画像の上下や左右が切り取られて表示されることがあります。ロゴや文字は画像の中央付近に配置し、端ぎりぎりには置かないようにデザインしておくと安全です。
X（旧 Twitter）向けの twitter:card
X でカードを表示させるには、OGP に加えて twitter:card という meta タグでカードの種類を指定します。OGP と違ってこちらは property ではなく name 属性で書く点に注意してください。
<!-- X（旧 Twitter）向けの設定 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@サイトのアカウント名">twitter:card でよく使う値は次の2つです。ブログ記事なら、アイキャッチ画像を大きく見せられる summary_large_image を選ぶことが多いでしょう。
| 値 | 表示 |
|---|---|
summary | 正方形の小さいサムネイルとタイトル・説明文が横に並ぶカード |
summary_large_image | 横長の大きな画像の下にタイトル・説明文が付くカード |
タイトル・説明・画像を X 専用に上書きしたい場合は twitter:title・twitter:description・twitter:image も用意されていますが、これらを省略した場合、X は og:title・og:description・og:image の値をそのまま利用します。つまり、OGP をきちんと設定してあれば、X 向けには twitter:card を1行足すだけで済みます。
og:type はトップページと記事ページで使い分ける
og:type には「そのページが何であるか」を表す値を指定します。ブログやコーポレートサイトで実際に使うのは、ほぼ次の2つです。
トップページには website を指定します。サイトそのものを表すページに使う値で、迷ったときの既定値としても website が推奨されています。一方、ブログ記事やニュース記事のような個別のコンテンツページには article を指定します。article を指定したページでは、article:published_time（公開日時）や article:author（著者）といった記事専用の追加プロパティも利用できます。
<!-- トップページ -->
<meta property="og:type" content="website">
<!-- 記事ページ -->
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-09-08T10:00:00+09:00">シェアしても表示が更新されないとき
デバッガーで読み取り結果を確認する
OGP を設定したら、実際にシェアする前に読み取り結果を確認しておきましょう。Facebook が提供している「シェアデバッガー」（Sharing Debugger）に URL を入力すると、クローラーが取得したタイトル・説明・画像と、問題があればその警告を確認できます。OGP そのものの検証ツールとして、Facebook 以外向けの設定チェックにも役立ちます。
X については、以前は Card Validator というツールでプレビューを確認できましたが、現在はプレビュー表示が提供されていません。投稿作成画面に URL を貼り付けるとカードのプレビューが表示されるので、そこで確認する（確認だけして投稿せずに閉じる）のが手軽です。
キャッシュが残っていて反映されない
OGP を修正したのにシェア時の表示が古いまま、というのはよくあるトラブルです。原因はほとんどの場合、SNS 側のキャッシュです。各サービスは一度読み取った OGP の情報をしばらく保存して使い回すため、ページ側を修正しても即座には反映されません。
Facebook の場合は、シェアデバッガーで対象の URL を開いて「もう一度スクレイピング」を実行すると、その場でキャッシュを更新できます。明示的な更新手段が用意されていないサービスでは、キャッシュの期限が切れるのを待つしかないこともあります。公開直後の第一印象が大事なページほど、公開前に OGP まで確認しておくことが重要です。
まとめ
OGP は、SNS やチャットツールでリンクがシェアされたときのカード表示を制御する meta タグの仕様です。property 属性で og:title・og:type・og:url・og:image の必須4つを軸に、og:description・og:site_name・og:locale を加えるのが基本形でした。
画像は 1200×630 ピクセルを絶対 URL で指定し、X 向けには twitter:card（多くの場合 summary_large_image）を1行追加します。og:type はトップページが website、記事ページが article という使い分けです。設定後はシェアデバッガーで読み取り結果を確認し、修正が反映されないときは SNS 側のキャッシュを疑ってください。