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タグを生成できます:
- タイトル (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)を使用してください