OGPプレビュー — SNSシェアデバッガー

URLを貼り付けるか、以下のフィールドを入力すると、Facebook・Twitter・LinkedIn・Google検索でページがどのように表示されるかをリアルタイムでプレビューできます。

OGプロパティ設定

<div class="og-section-label">基本タグ</div>

<div class="og-field">
  <label for="og-title">og:title（タイトル）</label>
  <input type="text" id="og-title" placeholder="ページのタイトル" maxlength="200">
  <div class="og-char-info" id="og-title-count">0 / 60</div>
</div>

<div class="og-field">
  <label for="og-description">og:description（説明文）</label>
  <textarea id="og-description" placeholder="ページ内容の簡潔な説明..."></textarea>
  <div class="og-char-info" id="og-desc-count">0 / 160</div>
</div>

<div class="og-field">
  <label for="og-url">og:url（ページURL）</label>
  <input type="url" id="og-url" placeholder="https://example.com/page">
</div>

<div class="og-field">
  <label for="og-image">og:image（画像URL）</label>
  <input type="url" id="og-image" placeholder="https://example.com/image.jpg">
  <div class="og-img-hint">推奨サイズ: <span>1200 × 630 px</span>（比率 1.91:1）· 最小 600 × 315 px · 最大 8 MB</div>
</div>

<div class="og-field">
  <label for="og-type">og:type（コンテンツ種別）</label>
  <select id="og-type">
    <option value="website">website（Webサイト）</option>
    <option value="article">article（記事）</option>
    <option value="product">product（商品）</option>
    <option value="video.other">video.other（動画）</option>
    <option value="music.song">music.song（楽曲）</option>
    <option value="book">book（書籍）</option>
    <option value="profile">profile（プロフィール）</option>
  </select>
</div>

<div class="og-field">
  <label for="og-site-name">og:site_name（サイト名）</label>
  <input type="text" id="og-site-name" placeholder="あなたのサイト名">
</div>

<div class="og-section-label" style="margin-top:22px;">Twitterカード設定</div>

<div class="og-field">
  <label for="tw-card">twitter:card（カード種別）</label>
  <select id="tw-card">
    <option value="summary_large_image">summary_large_image（大きな画像）</option>
    <option value="summary">summary（正方形の小さな画像）</option>
  </select>
</div>

<div class="og-field">
  <label for="tw-title">twitter:title <em style="font-weight:400;color:#9ca3af;">（空欄の場合は og:title を使用）</em></label>
  <input type="text" id="tw-title" placeholder="Twitter専用タイトル（任意）">
  <div class="og-char-info" id="tw-title-count">0 / 70</div>
</div>

<div class="og-field">
  <label for="tw-description">twitter:description <em style="font-weight:400;color:#9ca3af;">（空欄の場合は og:description を使用）</em></label>
  <textarea id="tw-description" placeholder="Twitter専用説明文（任意）"></textarea>
  <div class="og-char-info" id="tw-desc-count">0 / 200</div>
</div>

<div class="og-field">
  <label for="tw-image">twitter:image <em style="font-weight:400;color:#9ca3af;">（空欄の場合は og:image を使用）</em></label>
  <input type="url" id="tw-image" placeholder="https://example.com/twitter-image.jpg">
  <div class="og-img-hint">summary_large_image: <span>1200 × 628 px</span> · summary: <span>144 × 144 px</span></div>
</div>

<div class="og-btn-row">
  <button class="og-btn og-btn-primary" id="og-generate-btn">HTMLメタタグを生成</button>
  <button class="og-btn og-btn-secondary" id="og-clear-btn">全てクリア</button>
</div>

画像サイズ推奨一覧

<table class="og-dim-table">
  <thead>
    <tr>
      <th>プラットフォーム</th>
      <th>推奨サイズ</th>
      <th>比率</th>
      <th>上限</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>Facebook</strong></td>
      <td>1200 × 630 px</td>
      <td>1.91:1</td>
      <td>8 MB</td>
    </tr>
    <tr>
      <td><strong>Twitter 大画像</strong></td>
      <td>1200 × 628 px</td>
      <td>約1.91:1</td>
      <td>5 MB</td>
    </tr>
    <tr>
      <td><strong>Twitter 小画像</strong></td>
      <td>144 × 144 px</td>
      <td>1:1</td>
      <td>5 MB</td>
    </tr>
    <tr>
      <td><strong>LinkedIn</strong></td>
      <td>1200 × 627 px</td>
      <td>1.91:1</td>
      <td>5 MB</td>
    </tr>
    <tr>
      <td><strong>Google検索</strong></td>
      <td>（テキストのみ）</td>
      <td>—</td>
      <td>—</td>
    </tr>
  </tbody>
</table>

<div style="margin-top:20px;">
  <div class="og-section-label">文字数の目安</div>
  <table class="og-dim-table">
    <thead>
      <tr><th>プラットフォーム</th><th>タイトル</th><th>説明文</th></tr>
    </thead>
    <tbody>
      <tr><td><strong>Facebook OG</strong></td><td>約60文字</td><td>約160文字</td></tr>
      <tr><td><strong>Twitter</strong></td><td>約70文字</td><td>約200文字</td></tr>
      <tr><td><strong>LinkedIn</strong></td><td>約119文字</td><td>約300文字</td></tr>
      <tr><td><strong>Google検索</strong></td><td>約60文字</td><td>約160文字</td></tr>
    </tbody>
  </table>
</div>

<div style="margin-top:20px;">
  <div class="og-section-label">設定のコツ</div>
  <ul style="font-size:12.5px;color:#374151;padding-left:18px;line-height:1.9;">
    <li>画像URLは必ずHTTPSを使用してください（HTTPはブロックされる場合があります）。</li>
    <li>FacebookはOGデータをキャッシュします。<a href="https://developers.facebook.com/tools/debug/" target="_blank" rel="noopener" style="color:#4f6ef7;">シェアデバッガー</a>でキャッシュを更新できます。</li>
    <li>Twitterは初回シェア時に画像をクロールします。144×144 px未満の画像は無視されます。</li>
    <li>LinkedInは7日間キャッシュされます。新しいURLを投稿すると再クロールされます。</li>
    <li>タイトルは60文字以内にするとGoogle検索での切り詰めを防げます。</li>
    <li>og:titleと&lt;title&gt;タグの重複は可能な限り避けましょう。</li>
  </ul>
</div>

ライブプレビュー

<!-- Facebook -->
<div>
  <div class="og-card-label">Facebook</div>
  <div class="og-card-fb" id="prev-fb">
    <div class="og-card-img" id="prev-fb-img-wrap">
      <span>画像URLを入力してください</span>
    </div>
    <div class="og-card-body">
      <div class="og-card-domain" id="prev-fb-domain">example.com</div>
      <div class="og-card-title" id="prev-fb-title">ページタイトルがここに表示されます</div>
      <div class="og-card-desc" id="prev-fb-desc">ページの説明文がここに表示されます。</div>
    </div>
  </div>
</div>

<!-- Twitter -->
<div>
  <div class="og-card-label">Twitter / X</div>
  <div class="og-card-tw summary-large" id="prev-tw">
    <div class="og-tw-inner">
      <div class="og-card-img-tw" id="prev-tw-img-wrap" style="aspect-ratio:2/1;">
        <span>画像URLを入力してください</span>
      </div>
      <div class="og-card-body-tw">
        <div class="og-card-domain-tw" id="prev-tw-domain">example.com</div>
        <div class="og-card-title-tw" id="prev-tw-title">ページタイトルがここに表示されます</div>
        <div class="og-card-desc-tw" id="prev-tw-desc">ページの説明文がここに表示されます。</div>
      </div>
    </div>
  </div>
</div>

<!-- LinkedIn -->
<div>
  <div class="og-card-label">LinkedIn</div>
  <div class="og-card-li" id="prev-li">
    <div class="og-card-img-li" id="prev-li-img-wrap">
      <span>画像URLを入力してください</span>
    </div>
    <div class="og-card-body-li">
      <div class="og-card-title-li" id="prev-li-title">ページタイトルがここに表示されます</div>
      <div class="og-card-domain-li" id="prev-li-domain">example.com</div>
    </div>
  </div>
</div>

<!-- Google SERP -->
<div>
  <div class="og-card-label">Google検索結果</div>
  <div class="og-card-google">
    <div class="og-serp-url">
      <span id="prev-g-sitename">あなたのサイト</span> &rsaquo;
      <span class="og-serp-breadcrumb" id="prev-g-breadcrumb">example.com</span>
    </div>
    <div class="og-serp-title" id="prev-g-title">ページタイトルがここに表示されます</div>
    <div class="og-serp-desc" id="prev-g-desc">ページの説明文がここに表示されます。Googleはクエリに関連性が高いと判断したページ内のテキストで説明を上書きする場合があります。</div>
  </div>
</div>

生成されたHTMLメタタグ

コピーしました!

📊

ビジネスの会計・経理もスマートに管理しませんか？

freeeなら請求書発行・確定申告・給与計算をクラウドで一元管理。個人事業主から法人まで対応。面倒な帳簿作業を自動化して、本業に集中できます。

freeeを無料で試す

OGプロパティ設定

画像サイズ推奨一覧

ライブプレビュー

生成されたHTMLメタタグ

ビジネスの会計・経理もスマートに管理しませんか？

関連ツール#

関連ツール