OG Image Tester

  <div class="og-field">
    <div class="og-label">
      <span>og:description</span>
      <span class="og-counter" id="og-desc-count">0 / 155</span>
    </div>
    <textarea id="og-desc" rows="3" placeholder="A short description of this page for social sharing…"></textarea>
  </div>

  <div class="og-field">
    <div class="og-label"><span>og:url</span></div>
    <input type="url" id="og-url" placeholder="https://example.com/my-page">
  </div>
</div>

<div class="og-col">
  <div class="og-field">
    <div class="og-label"><span>og:image URL</span></div>
    <input type="url" id="og-image" placeholder="https://example.com/og-image.png">
    <div class="og-dim-result" id="og-dim-result"></div>
  </div>

  <div class="og-field">
    <div class="og-label"><span>og:type</span></div>
    <select id="og-type">
      <option value="website">website</option>
      <option value="article">article</option>
      <option value="product">product</option>
      <option value="profile">profile</option>
      <option value="video.other">video.other</option>
    </select>
  </div>

  <div class="og-field">
    <div class="og-label"><span>twitter:card</span></div>
    <select id="og-twcard">
      <option value="summary_large_image">summary_large_image</option>
      <option value="summary">summary</option>
      <option value="app">app</option>
      <option value="player">player</option>
    </select>
  </div>

  <div class="og-field">
    <div class="og-label"><span>twitter:site (optional)</span></div>
    <input type="text" id="og-twsite" placeholder="@yourusername">
  </div>
</div>