---
title: "OGPタグジェネレーター - OGPメタタグを作成 | Web ToolBox"
description: "OGPメタタグを生成できるツールです。URL、タイトル、説明文、画像URLを入力すると、X、Facebook、Discordなどで使うOpen Graphタグを確認できます。"
canonical_url: "https://web-toolbox.dev/tools/ogp-tag-generator"
meta:
  author: K
  "og:description": "OGPメタタグを生成できるツールです。URL、タイトル、説明文、画像URLを入力すると、X、Facebook、Discordなどで使うOpen Graphタグを確認できます。"
  "og:image": "https://web-toolbox.dev/og/ja/tools/ogp-tag-generator-63720d42.png"
  "og:image:alt": OGPタグジェネレーター
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "OGPタグジェネレーター - OGPメタタグを作成 | Web ToolBox"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **OGPタグジェネレーター**

SNS向けのOGPメタタグを生成

**タイトル (og:title)**

**説明 (og:description)**

**URL (og:url)**

**画像URL (og:image)**

**画像幅 (og:image:width)**

**画像高さ (og:image:height)**

**画像の代替テキスト (og:image:alt)**

**タイプ (og:type)**

**サイト名 (og:site\_name)**

**ロケール (og:locale)**

**X(Twitter)カードタグを追加**

## OGPタグジェネレーターとは？

OGP 用の meta タグを入力内容から組み立てて、そのままコピーできるツールです。`**og:title**`、`**og:description**`、`**og:url**`、`**og:image**` に加えて、画像サイズ、alt、`**og:type**`、`**og:site_name**`、`**og:locale**` などもまとめて生成できます。

必要に応じて X の `**twitter:card**` と `**twitter:site**` も追加できるので、シェア用 meta タグを一通り用意したいときに便利です。

## 使い方

1. タイトル、説明、URL、画像 URL などを入力します。
2. 必要なら画像サイズ、alt、タイプ、サイト名、ロケールも指定します。
3. X カードを追加したい場合は、チェックをオンにしてカードタイプとアカウントを設定します。
4. 右側に生成された meta タグを確認してコピーします。

入力内容はリアルタイムでコードへ反映されるため、必要なタグだけを見ながら整えられます。

## 生成できる主なタグ

- `**og:title**`
- `**og:description**`
- `**og:url**`
- `**og:image**`
- `**og:image:width**`
- `**og:image:height**`
- `**og:image:alt**`
- `**og:type**`
- `**og:site_name**`
- `**og:locale**`
- `**twitter:card**`
- `**twitter:site**`

X 用の設定はチェックをオンにした場合だけ追加されます。

## 出力例

たとえばタイトル、説明、URL、画像 URL を入力し、X カードも有効にすると、出力は次のようになります。

```html
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの説明" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:type" content="website" />

<!-- Twitter Card Tag -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@username" />
```

## 活用シーン

- 新しいページに OGP タグを入れたいとき
- シェア画像や説明文の meta タグをまとめて用意したいとき
- X カードの `**summary**` と `**summary_large_image**` を切り替えて準備したいとき
- 手書きの meta タグで記述ミスを減らしたいとき

## 使うときの注意点

- このツールはタグ生成用で、実際の表示確認は [**OGPチェッカー**](https://web-toolbox.dev/tools/ogp-checker) や [**OGP画像シミュレーター**](https://web-toolbox.dev/tools/ogp-image-simulator) で行うのが確実です
- 画像 URL やページ URL には絶対 URL を使うほうが安全です
- 入力値はそのまま `**content**` 属性へ入るため、最終的な HTML への組み込み時は内容を見直してください

**使ってみてどうでしたか？**

最終更新: 2025年5月29日

### **関連ツール**

- [<h4>**OGPチェッカー**</h4>](https://web-toolbox.dev/tools/ogp-checker)
- [<h4>**OGP画像シミュレーター**</h4>](https://web-toolbox.dev/tools/ogp-image-simulator)
- [<h4>**見出し抽出**</h4>](https://web-toolbox.dev/tools/heading-extractor)
- [<h4>**サジェストキーワード抽出**</h4>](https://web-toolbox.dev/tools/suggestion-extractor)
- [<h4>**URL一括オープン**</h4>](https://web-toolbox.dev/tools/url-bulk-opener)
- [<h4>**URLパーサー**</h4>](https://web-toolbox.dev/tools/url-parser)
- [<h4>**Border Radiusジェネレーター**</h4>](https://web-toolbox.dev/tools/border-radius-generator)
- [<h4>**Box Shadowジェネレーター**</h4>](https://web-toolbox.dev/tools/box-shadow-generator)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/ogp-tag-generator#webpage","@type":"WebPage","description":"OGPメタタグを生成できるツールです。URL、タイトル、説明文、画像URLを入力すると、X、Facebook、Discordなどで使うOpen Graphタグを確認できます。","name":"OGPタグジェネレーター - OGPメタタグを作成","url":"https://web-toolbox.dev/tools/ogp-tag-generator","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/ogp-tag-generator"]}]},{"@id":"https://web-toolbox.dev/tools/ogp-tag-generator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"OGPメタタグを生成できるツールです。URL、タイトル、説明文、画像URLを入力すると、X、Facebook、Discordなどで使うOpen Graphタグを確認できます。","name":"OGPタグジェネレーター - OGPメタタグを作成","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.