Open Graph & Twitter Card Social Preview Generator

1. Page details

2. Preview

Image preview
EXAMPLE.COMYour title

Your description

Approximate Facebook / LinkedIn style. Each app crops and shortens a little differently.

3. Meta tags

What Open Graph and Twitter Card tags do

When someone shares your link on Facebook, LinkedIn, WhatsApp, X (Twitter), Slack or Discord, the app reads special <meta> tags in your page’s <head> to build the preview card: the title, description and image. Without them, the app guesses, and the preview often shows the wrong image or no image at all.

The essential tags

<meta property="og:title" content="Page title">
<meta property="og:description" content="One or two sentences">
<meta property="og:image" content="https://example.com/share.jpg">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

X falls back to the Open Graph tags when its own twitter:title, twitter:description and twitter:image tags are missing, so the twitter:card line is usually the only extra one you need.

Image size

  • Use 1200 × 630 pixels (1.91:1). It displays well on Facebook, LinkedIn and X large cards.
  • Keep important text and logos away from the edges; some apps crop to a square.
  • Use JPG or PNG under about 5 MB, and an absolute URL starting with https://.

Title and description length

Aim for a title under about 60 characters and a description under about 155. Longer text is cut off with an ellipsis in most previews.

How to add the tags

  1. Fill in the fields above and copy the generated tags.
  2. Paste them inside the <head> of your page. On WordPress, SEO plugins such as Rank Math or Yoast have a Social tab that writes these tags for you; use one method, not both, to avoid duplicates.
  3. Check the result with the Facebook Sharing Debugger or LinkedIn Post Inspector. These tools also clear the platform’s cached preview after you change an image.