はじめに
こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
ReactアプリケーションでSNSシェア時に表示される**OGP（Open Graph Protocol）**を設定する方法をご紹介します。OGPを正しく設定することで、リンクが魅力的に見え、クリック率の向上が期待できます。
なお、React 19 + Vite 環境を想定しています。
🧭 OGP（Open Graph Protocol）とは？
OGP（Open Graph Protocol）は、
SNSでURLを共有した際に、タイトル・説明文・画像などを表示するための仕組みです。
たとえばX（旧Twitter）やLINEでURLを送ると、
次のようなプレビューが表示されます👇
┌────────────────────────────┐
│ React 19でOGPを設定する方法 │
│ ReactアプリでのOGP設定をわかりやすく解説 │
│ [ サムネイル画像 ] │
└────────────────────────────┘
このプレビュー情報は、HTMLの <head> 内に書かれた metaタグ によって制御されています。
🧩 OGPタグの基本構成
React 19（Viteなど）では、
index.html の <head> にOGPタグを直接書くだけで設定が完了します。
以下のコードを参考にしてください👇
<!-- Open Graph -->
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの説明文（110〜140文字程度）" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<!-- 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/ogp.png" />
✅ 各項目の意味
| タグ | 説明 |
|---|---|
og:title |
ページタイトル |
og:description |
ページの説明文 |
og:type |
コンテンツの種類（website でOK） |
og:url |
ページのURL（絶対URLで指定） |
og:image |
サムネイル画像のURL(public/配下にogp.png を配置する) |
og:site_name |
サイト全体の名前 |
twitter:card |
Twitterカードの種類（summary_large_image が一般的） |
⚙️ index.html に埋め込む例（Viteの場合）
React 19 では、追加のライブラリは不要です。
index.html に直接タグを追加すれば、SNSで正しくOGPが表示されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ✅ OGP設定 -->
<meta property="og:title" content="My Portfolio" />
<meta property="og:description" content="React 19で作成したポートフォリオサイトです。" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.github.io/portfolio/" />
<meta property="og:image" content="https://example.github.io/portfolio/ogp.png" />
<meta property="og:site_name" content="My Portfolio" />
<meta property="og:locale" content="ja_JP" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Portfolio" />
<meta name="twitter:description" content="React 19で作成したポートフォリオサイトです。" />
<meta name="twitter:image" content="https://example.github.io/portfolio/ogp.png" />
<title>My Portfolio</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/portfolio/assets/index.js"></script>
</body>
</html>
✅ ポイント
-
og:imageとog:urlは 必ず絶対URL（https://〜） で指定 - 画像サイズは 1200×630px（推奨） です。
🖼️ OGP画像を作るときのポイント
| 項目 | 内容 |
|---|---|
| サイズ | 1200 × 630 px |
| 形式 | JPG or PNG |
| ファイル名 |
ogp.png などシンプルに |
| 構成 | 背景 + サイト名 + キャッチコピー |
| 公開場所 |
public/ogp/ogp.png（ビルド後に参照可能に） |
Canva や Figma を使うと、SNS向けのOGP画像を手軽に作れます。
✅ まとめ
| 内容 | ポイント |
|---|---|
| 設定場所 |
index.html の <head> に直接書く |
| 注意点 | 絶対URLで指定（https://〜） |
| 画像サイズ | 1200×630px（推奨） |
| React 19 |
react-helmet などの追加ライブラリは不要 |
React 19では、OGP設定はとてもシンプルです。
index.htmlに必要なタグを追加するだけでOK！