OGPメタタグの設定方法｜SNSシェア時のタイトル・画像を最適化する

SNSでURLをシェアした際に表示されるタイトル・画像・説明文は、ページのHTMLに記述されたOGPタグによって制御されています。OGPが正しく設定されていないとURLがそのまま表示されるだけになり、クリック率が大きく下がります。

OGPとは

OGP（Open Graph Protocol） は、FacebookとOGP.meが策定したHTMLメタタグの仕様です。<head> 内に property="og:..." 形式のタグを記述することで、SNS・チャットアプリ・Slackなど多くのプラットフォームがリッチなプレビューを生成できるようになります。

基本のOGPタグ

<head>
  <meta property="og:title" content="ページのタイトル">
  <meta property="og:description" content="ページの説明（120〜160文字程度）">
  <meta property="og:image" content="https://example.com/ogp.png">
  <meta property="og:url" content="https://example.com/page/">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="サイト名">
</head>

各タグの役割は以下の通りです。

タグ	内容
og:title	シェア時のタイトル（ページ `<title>` と同じでよい）
og:description	シェア時の説明文
og:image	シェア時に表示される画像のURL
og:url	そのページの正規URL
og:type	ページの種類（トップは `website`、記事は `article`）
og:site_name	サイト全体の名称

OGP画像のサイズ

SNSプレビューで画像が正しく表示されるには適切なサイズが必要です。

推奨サイズ: 1200×630px（横長）
最小サイズ: 600×315px
形式: JPG または PNG
容量: 8MB以下

画像URLは必ず 絶対URL で記述します。相対パスは多くのSNSクローラーで正しく解釈されません。

Twitter/X向けのタグ

Twitter/X は独自の twitter: プレフィックスを使います。og: タグがあれば多くは省略できますが、カードの種類指定は必須です。

<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.png">

twitter:card の値は summary（小さい画像）と summary_large_image（大きい画像）が一般的です。

記事ページのOGP

ブログ記事など個別ページでは og:type を article にし、公開日も記述します。

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-05-10T00:00:00+09:00">
<meta property="article:author" content="著者名">

## よくあるミスと確認方法

画像がキャッシュされて更新されない: SNSクローラーは画像をキャッシュするため、画像URLにバージョンパラメータ（?v=2 など）を付けると強制更新できる
og:image に相対パスを使っている: 絶対URLでないとクローラーが取得できない
og:title を設定していない: <title> タグとは別に明示的に設定する

設定後はOGP確認ツールでシェア時のプレビューがどう表示されるかを確認できます。Facebook・Twitter/X のデバッガーでキャッシュをクリアして最新の状態をテストするのも効果的です。