OGPタグジェネレーター - SNSシェア用メタタグ作成ツール

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

OGPタグジェネレーターは、ウェブページのソーシャルメディア表示を最適化するためのメタデータを簡単に生成できるツールです。OGP（Open Graph Protocol）タグとX(Twitter)カードタグの両方に対応し、FacebookやX、LinkedInなどのプラットフォームで魅力的なプレビューを表示させることができます。

OGPタグを設定する理由

SNSでウェブページをシェアした際、適切なOGPタグが設定されていないと、タイトルや画像が正しく表示されず、クリック率の低下につながります。OGPタグを設定することで以下のメリットが得られます：

エンゲージメント率の向上: 魅力的な画像とタイトルでユーザーの注意を引きつけ
ブランド認知度の向上: 一貫したビジュアルでブランドイメージを強化
トラフィック増加: 視覚的に訴求力のあるプレビューでクリック率を向上

基本的な使い方

必須項目の入力

以下の基本項目を入力することで、標準的なOGPタグを生成できます：

タイトル (og:title) - ページのタイトル（SNSで表示されるメインタイトル）
説明 (og:description) - ページの概要説明（プレビューに表示される短い説明文）
URL (og:url) - ページの正規URL
画像URL (og:image) - 表示する画像のURL（推奨サイズ：1200×630px）

詳細設定オプション

より詳細な設定が可能な項目：

画像幅・高さ - 画像のピクセルサイズを明示的に指定
画像の代替テキスト - アクセシビリティ向上のための代替テキスト
タイプ - コンテンツの種類（website、article、bookなど）
サイト名 - ブランド名やサイト名
ロケール - 言語・地域設定（例：ja_JP、en_US）

X(Twitter)カード設定

X(Twitter)での表示を最適化したい場合は、以下の追加設定が可能です：

カードタイプ - summary、summary_large_image、app、playerから選択
Xアカウント - サイトのXアカウント（@usernameの形式）

実装方法

生成されたタグの使用

左側のフォームに必要な情報を入力
右側にリアルタイムで生成されるHTMLタグを確認
生成されたタグをコピー
ウェブページの<head>セクションに貼り付け

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>

  <!-- 生成されたOGPタグをここに貼り付け -->
  <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" />
  <meta property="og:site_name" content="サイト名" />

  <!-- X(Twitter)カードタグ（オプション） -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@username" />
</head>
<body>
  <!-- ページコンテンツ -->
</body>
</html>

推奨設定

最適な表示結果を得るための推奨設定：

画像サイズ: 1200×630px（アスペクト比 1.91:1）
画像形式: JPEGまたはPNG
タイトル文字数: 60文字以内
説明文字数: 160文字以内

実装に関する注意点

prefix属性: 現代のソーシャルメディアプラットフォームでは、<html>タグにprefix="og: http://ogp.me/ns#"を追加する必要はありません
必須タグ: 最低限og:title、og:type、og:image、og:urlを設定することを推奨
画像URL: 必ず絶対URL（https://から始まるURL）を使用してください

生成したOGPタグ