OG Preview
Getting Started

Getting Started with OG Preview

A free, browser-based tool for previewing how your links look on social media. No sign-up, no install.

OG Preview runs entirely in your browser. You either type your tag values by hand or let the tool read them from a live URL, and you immediately see how the page would appear on Facebook, X (Twitter) and LinkedIn.

Step 1: Open the tool

Go to the home page. It opens in Manual Input mode by default, which works for any page — including drafts that aren't published yet or pages behind a login.

Step 2: Enter your tag values (Manual Input)

Fill in the fields:

  • URL / Domain — shown as the source line in the previews.
  • Title (og:title) — your headline; aim for under 60 characters.
  • Description (og:description) — a short summary, around 150–160 characters.
  • Image URL (og:image) — an absolute https:// link to your preview image (ideally 1200×630px).

The Facebook, X (Twitter) and LinkedIn previews update live as you type. There is no upload — the image is referenced by its URL.

Step 3 (optional): Fetch tags from a URL (Beta)

Switch to Fetch URL (Beta), paste a public page URL and press Preview. The tool retrieves the page through a public CORS proxy, reads the OG/Twitter tags it already has, and shows the previews plus a table of found and missing tags. This mode is best-effort: some sites block proxies, in which case Manual Input is the reliable fallback.

Step 4: Refine until it looks right

Adjust the title, description and image until the previews look the way you want. Watch for a missing image or a title that gets cut off.

Step 5: Add the tags to your page

OG Preview does not export a code file — you add the tags to your own site's <head>. Using the values you settled on, the markup looks like this:

<meta property="og:title" content="Your Page Title"> <meta property="og:description" content="A short, compelling summary."> <meta property="og:image" content="https://yoursite.com/preview.jpg"> <meta property="og:url" content="https://yoursite.com/page"> <meta name="twitter:card" content="summary_large_image">

If you use a CMS, most SEO plugins (for example Yoast SEO or Rank Math on WordPress) provide fields for exactly these values.

Step 6: Test on the real platforms

Once the tags are live, confirm them with the official debuggers, which also let you clear the platform cache:

The complete starting set

The five tags above cover the basics. This fuller set is a good default to paste into any page and then edit — it adds the source URL, brand name, content type, a Twitter image and explicit image dimensions so the first share renders correctly:

<meta property="og:type" content="website"> <meta property="og:url" content="https://yoursite.com/page"> <meta property="og:title" content="Your Page Title"> <meta property="og:description" content="A short, compelling summary."> <meta property="og:image" content="https://yoursite.com/preview.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:site_name" content="YourBrand"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://yoursite.com/preview.jpg">

Minimum vs. complete

If you only have a minute, four tags produce a valid preview: og:title, og:type, og:image and og:url. Everything else — description, dimensions, site name, Twitter tags — improves how the card looks and how reliably it renders, but a link will preview without them.

Common first-time mistakes

  • A relative image path (/preview.jpg) instead of a full https:// URL — crawlers won't resolve it.
  • Tags placed in the <body> rather than the <head>.
  • An image behind a login or blocked by robots.txt, so the crawler can't fetch it.
  • Changing the tags but not re-scraping in the debugger, then thinking the change "didn't work".
  • Using property= for Twitter tags — those use name=, while Open Graph uses property=.

← Back to the tool