OGPとは？なぜ設定が必要なのか
OGP（Open Graph Protocol）は、Webページの内容をSNSやメッセージアプリに正しく伝えるための仕組みだ。HTMLの<head>内に専用のmetaタグを記述することで、Facebook・X（旧Twitter）・LINE・Slackなどでリンクをシェアした際に表示されるタイトル・説明文・画像を制御できる。
OGPを設定しないとどうなるか
OGPが未設定の場合、SNS側がページ内のテキストや画像を自動的に取得しようとする。しかし自動取得の精度は低く、意図しない画像がサムネイルに表示されたり、タイトルが途中で切れたり、説明文がまったく見当違いな内容になったりする。特にECサイトやブログでは、シェアされた時の見た目がクリック率に直結するため、機会損失は大きい。
OGPを設定するメリット
- SNSでシェアされた時のCTR（クリック率）が向上する
- ブランドイメージを統一的にコントロールできる
- プロフェッショナルな印象を与え、サイトの信頼性が上がる
- LINEやSlackでURLを送った際にも見やすいプレビューが表示される
Point
OGPは「設定しなくても動くが、設定しないと損をする」タイプの施策だ。特にSNS経由の流入を増やしたい場合、OGPの最適化はSEOと同じくらい重要な基本施策になる。
OGP基本タグ一覧
OGPのmetaタグはproperty属性とcontent属性のペアで記述する。以下が基本となる7つのプロパティだ。
| プロパティ | 説明 | 記述例 |
|---|---|---|
og:title |
ページのタイトル。SNSに表示される見出し | <meta property="og:title" content="記事タイトル"> |
og:description |
ページの説明文。80文字以内が推奨 | <meta property="og:description" content="ページの概要"> |
og:type |
コンテンツの種類 | <meta property="og:type" content="article"> |
og:url |
ページの正規URL（canonical URL） | <meta property="og:url" content="https://example.com/page/"> |
og:image |
OG画像のURL。SNSのサムネイルに使用される | <meta property="og:image" content="https://example.com/ogp.png"> |
og:site_name |
サイト名 | <meta property="og:site_name" content="サイト名"> |
og:locale |
言語・地域 | <meta property="og:locale" content="ja_JP"> |
Point
og:typeにはトップページではwebsite、個別記事ページではarticleを設定するのが一般的だ。プロフィールページならprofileも使える。
プラットフォーム別テンプレート（コピペ可能）
ここからは、実際にHTMLの<head>内にコピペで貼れるテンプレートを紹介する。自分のサイト情報に書き換えてそのまま使ってほしい。
基本テンプレート（全プラットフォーム共通）
まずはすべてのSNSで使われる基本のOGPタグだ。この7行は必ず設定しておきたい。
X（Twitter）カード用追加タグ
X（旧Twitter）では、OGPの基本タグに加えてTwitter Card専用のmetaタグを記述することで、より大きなカード表示が可能になる。twitter:cardの値をsummary_large_imageにすると、横長の大きな画像付きカードが表示される。
| twitter:card の値 | 表示形式 | 画像サイズ |
|---|---|---|
summary |
小さい正方形の画像 + テキスト | 240×240px以上 |
summary_large_image |
横長の大きな画像 + テキスト | 1200×628px推奨 |
LINE向け最適化
LINEはOGPのog:imageを直接使用してプレビューを生成する。Twitter Card専用のタグは参照しないため、og:imageが正しく設定されていれば特別な追加タグは不要だ。ただし、以下の点に注意が必要になる。
- 推奨画像サイズ: 1200×630px（アスペクト比 1.91:1）
- 画像が小さいとサムネイルが正方形にクロップされる
- 画像URLは必ず絶対パス（https://から始まるURL）で記述する
- og:titleとog:descriptionがそのままLINEのプレビューに使われる
全部入りテンプレート（コピペ推奨）
Facebook・X・LINE・Slackのすべてに対応する完全版テンプレートだ。以下をHTMLの<head>内に貼り付け、各値を自分のサイト情報に書き換えればOGP設定は完了する。
ツール紹介
上記のタグを手動で書くのが面倒な場合は、メタタグジェネレーターを使えばフォーム入力だけで一括生成できる。OGPタグだけでなく、SEO用のmeta descriptionやcanonicalタグもまとめて出力されるので効率的だ。
OG画像の推奨サイズと作り方
OG画像はSNSシェア時の「顔」になる要素だ。画像のサイズや形式を間違えると、せっかく設定しても意図通りに表示されない。各プラットフォームの推奨仕様を押さえておこう。
| プラットフォーム | 推奨サイズ | アスペクト比 |
|---|---|---|
| 1200×630px | 1.91:1 | |
| X（Twitter）summary_large_image | 1200×628px | 1.91:1 |
| X（Twitter）summary | 240×240px以上 | 1:1 |
| LINE | 1200×630px | 1.91:1 |
| Slack | 1200×630px | 1.91:1 |
OG画像を作る際のポイント
- テキストは中央80%の安全領域に収める（端はクロップされる場合がある）
- ファイルサイズは5MB以下に抑える（推奨は1MB以下）
- ファイル形式はPNGまたはJPGを使用（WebPは一部プラットフォームで非対応）
- 文字を含める場合は大きめのフォントサイズにする（スマホでも読めるように）
- 画像URLは必ず絶対パスで指定する（相対パスはNG）
Point
全プラットフォーム共通で使うなら1200×630pxが最も安全なサイズだ。1枚のOG画像をすべてのSNSで使い回せるため、運用コストを最小化できる。
ツール紹介
OG画像がSNS上でどのように表示されるかを事前に確認したい場合は、OGイメージプレビューツールが便利だ。画像URLを入力するだけで、Facebook・X・LINEでの表示をシミュレーションできる。
OGP設定の確認方法
OGPを設定した後は、必ず各プラットフォームのデバッグツールで表示を確認しておこう。設定ミスがあっても、デバッグツールを使えばすぐに問題箇所がわかる。
-
ToolShare Lab OGイメージプレビュー
OGイメージプレビューにURLを入力するだけで、各SNSでの表示イメージを即座に確認できる。og:titleやog:descriptionの長さチェックも同時に行える。
-
Facebook シェアデバッガー
Facebookの公式ツール「Sharing Debugger」（https://developers.facebook.com/tools/debug/）にURLを入力すると、Facebookが取得したOGP情報を確認できる。キャッシュのクリアもここから行える。
-
X Card Validator
X（旧Twitter）の「Card Validator」（https://cards-dev.twitter.com/validator）でTwitter Cardの表示を確認できる。summary_large_imageが正しく表示されるかをチェックしよう。
-
実際にSNSでシェアしてテスト
最終確認として、実際にFacebook・X・LINEでURLをシェアしてみるのが確実だ。公開前のテストには非公開投稿や自分だけに送信する方法を使うとよい。
よくあるトラブルと解決方法
OGPの設定でよくあるトラブルとその解決方法をまとめた。ほとんどの問題は以下のどれかに該当する。
画像が表示されない
最も多いトラブルだ。原因のほとんどはog:imageのURLが相対パスになっていること。OGPの画像URLはhttps://から始まる絶対パスで指定する必要がある。また、画像ファイル自体が存在するかどうかもブラウザで直接URLを開いて確認しておこう。
古い情報が表示される
OGPを更新したのに、SNSのプレビューが変わらないケースだ。これはSNS側のキャッシュが原因。Facebookは「Sharing Debugger」でURLを再スクレイピングすればキャッシュがクリアされる。Xも「Card Validator」で同様の操作が可能だ。LINEはキャッシュのクリア方法が提供されていないため、24時間程度で自動更新されるのを待つ必要がある。
意図しないページ情報が表示される
og:urlが間違っている、またはcanonicalタグとog:urlが異なるURLを指している場合に起きる。og:urlにはそのページの正規URLを設定し、<link rel="canonical">と同じURLに揃えておくのが基本だ。
日本語が文字化けする
HTMLファイルの文字エンコーディングが正しく設定されていない場合に起きる。<meta charset="utf-8">がOGPタグより前に記述されているか確認しよう。
画像は表示されるがクロップ位置がおかしい
画像のアスペクト比が推奨値（1.91:1）と異なると、SNS側が自動的にクロップ（切り取り）して表示する。重要な情報が端に配置されていると切れてしまうため、テキストやロゴは画像の中央80%の領域に配置しよう。
注意
OGPの設定を変更した後は、必ず各SNSのデバッグツールでキャッシュをクリアすること。古いキャッシュが残っていると、正しく設定しても反映されないケースがある。特にFacebookのキャッシュは数日間残ることがあるので注意が必要だ。
WordPressでのOGP設定方法
WordPressの場合、OGPの設定にはプラグインを使う方法と、テーマファイルに直接記述する方法がある。
プラグインを使う場合（推奨）
最も手軽なのはSEOプラグインを使う方法だ。以下のプラグインはいずれもOGPタグの自動生成機能を備えている。
| プラグイン | OGP対応 | 特徴 |
|---|---|---|
| Yoast SEO | 標準搭載 | 投稿編集画面でOGP画像やタイトルを個別設定可能 |
| All in One SEO | 標準搭載 | ソーシャルタブでFacebook・Xそれぞれを個別設定可能 |
| Rank Math | 標準搭載 | SNSプレビュー機能付き。設定UIが直感的 |
| FLAVOR（旧SEO SIMPLE PACK） | 標準搭載 | 日本製プラグイン。SWELLテーマとの相性が良い |
プラグインなしで設定する場合
プラグインを増やしたくない場合は、テーマのheader.phpに直接OGPタグを記述できる。以下はfunctions.phpにフックを追加する方法の例だ。
注意
SEOプラグインとテーマの両方がOGPタグを出力していると、タグが重複してSNS側が正しく解釈できなくなる。どちらか一方に統一すること。テーマにOGP機能が内蔵されている場合（Cocoon、SWELLなど）は、プラグイン側のOGP出力をオフにするか、テーマ側の機能を無効化するかを選択する。
静的サイト・Next.jsでのOGP設定
静的HTML
静的HTMLサイトの場合は、各ページの<head>内にmetaタグを直接記述する。ページごとにタイトルや画像を変えたい場合は、各ページのHTMLファイルを個別に編集する必要がある。テンプレートエンジン（EJS、Pug等）を使っている場合は、変数でページごとの値を差し込む形にすると管理が楽になる。
Next.js（App Router）
Next.js 14以降のApp Routerでは、metadata APIまたはgenerateMetadata関数を使ってOGPを設定する。
Nuxt.js
Nuxt 3ではuseHeadコンポーザブルまたはuseSeoMetaコンポーザブルを使用する。