OGPタグジェネレーター

OGP(Open Graph Protocol)メタタグを簡単に生成します。

生成したOGPタグ

<meta property="og:type" content="website" />

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

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

OGPタグを設定する理由

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

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

基本的な使い方

必須項目の入力

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

  1. タイトル (og:title) - ページのタイトル(SNSで表示されるメインタイトル)
  2. 説明 (og:description) - ページの概要説明(プレビューに表示される短い説明文)
  3. URL (og:url) - ページの正規URL
  4. 画像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の形式)

実装方法

生成されたタグの使用

  1. 左側のフォームに必要な情報を入力
  2. 右側にリアルタイムで生成されるHTMLタグを確認
  3. 生成されたタグをコピー
  4. ウェブページの<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:titleog:typeog:imageog:urlを設定することを推奨
  • 画像URL: 必ず絶対URL(https://から始まるURL)を使用してください