Paste your URL or fill in the fields below to instantly preview how your page will appear when shared on Facebook, Twitter, LinkedIn, and in Google search results.

Open Graph Properties

<div class="og-section-label">Core Tags</div>

<div class="og-field">
  <label for="og-title">og:title</label>
  <input type="text" id="og-title" placeholder="Your page title" 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="A concise description of your page content..."></textarea>
  <div class="og-char-info" id="og-desc-count">0 / 160</div>
</div>

<div class="og-field">
  <label for="og-url">og: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">Recommended: <span>1200 × 630 px</span> (1.91:1) · Min 600 × 315 px · Max 8 MB</div>
</div>

<div class="og-field">
  <label for="og-type">og:type</label>
  <select id="og-type">
    <option value="website">website</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="Your Site Name">
</div>

<div class="og-section-label" style="margin-top:22px;">Twitter Card</div>

<div class="og-field">
  <label for="tw-card">twitter:card</label>
  <select id="tw-card">
    <option value="summary_large_image">summary_large_image (large image)</option>
    <option value="summary">summary (small square image)</option>
  </select>
</div>

<div class="og-field">
  <label for="tw-title">twitter:title <em style="font-weight:400;color:#9ca3af;">(leave blank to use og:title)</em></label>
  <input type="text" id="tw-title" placeholder="Twitter-specific title (optional)">
  <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;">(leave blank to use og:description)</em></label>
  <textarea id="tw-description" placeholder="Twitter-specific description (optional)"></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;">(leave blank to use 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">Generate HTML Meta Tags</button>
  <button class="og-btn og-btn-secondary" id="og-clear-btn">Clear All</button>
</div>

Image Dimension Guide

<table class="og-dim-table">
  <thead>
    <tr>
      <th>Platform</th>
      <th>Recommended Size</th>
      <th>Ratio</th>
      <th>Max Size</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 Large</strong></td>
      <td>1200 × 628 px</td>
      <td>~1.91:1</td>
      <td>5 MB</td>
    </tr>
    <tr>
      <td><strong>Twitter Summary</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 (SERP)</strong></td>
      <td>N/A (uses text)</td>
      <td>—</td>
      <td>—</td>
    </tr>
  </tbody>
</table>

<div style="margin-top:20px;">
  <div class="og-section-label">Title Character Limits</div>
  <table class="og-dim-table">
    <thead>
      <tr><th>Platform</th><th>Title</th><th>Description</th></tr>
    </thead>
    <tbody>
      <tr><td><strong>Facebook OG</strong></td><td>~60 chars</td><td>~160 chars</td></tr>
      <tr><td><strong>Twitter</strong></td><td>~70 chars</td><td>~200 chars</td></tr>
      <tr><td><strong>LinkedIn</strong></td><td>~119 chars</td><td>~300 chars</td></tr>
      <tr><td><strong>Google SERP</strong></td><td>~60 chars</td><td>~160 chars</td></tr>
    </tbody>
  </table>
</div>

<div style="margin-top:20px;">
  <div class="og-section-label">Tips</div>
  <ul style="font-size:12.5px;color:#374151;padding-left:18px;line-height:1.8;">
    <li>Use HTTPS for all image URLs (HTTP may be blocked).</li>
    <li>Facebook caches OG data — use the <a href="https://developers.facebook.com/tools/json-formatter/" target="_blank" rel="noopener" style="color:#4f6ef7;">Sharing Debugger</a> to refresh.</li>
    <li>Twitter crawls images on first share. Images smaller than 144×144 px are ignored.</li>
    <li>LinkedIn has a 7-day cache — post a new URL to trigger a fresh crawl.</li>
    <li>Keep titles under 60 characters to avoid truncation in Google search.</li>
    <li>Avoid duplicate og:title and &lt;title&gt; tag values where possible.</li>
  </ul>
</div>

Live Previews

<!-- 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>No image URL provided</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">Your page title will appear here</div>
      <div class="og-card-desc" id="prev-fb-desc">Your page description will appear here.</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>No image URL provided</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">Your page title will appear here</div>
        <div class="og-card-desc-tw" id="prev-tw-desc">Your page description will appear here.</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>No image URL provided</span>
    </div>
    <div class="og-card-body-li">
      <div class="og-card-title-li" id="prev-li-title">Your page title will appear here</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 Search Result</div>
  <div class="og-card-google">
    <div class="og-serp-url">
      <span id="prev-g-sitename">Your Site</span> &rsaquo;
      <span class="og-serp-breadcrumb" id="prev-g-breadcrumb">example.com</span>
    </div>
    <div class="og-serp-title" id="prev-g-title">Your page title will appear here</div>
    <div class="og-serp-desc" id="prev-g-desc">Your page description will appear here. Google may override this with page content it deems more relevant to the query.</div>
  </div>
</div>

Generated HTML Meta Tags

Copied to clipboard!

Generate meta tags → Meta Tag Generator

Create favicons → Favicon Generator

Generate placeholder images → Placeholder Image Generator