What size should an Open Graph image be?

1200 × 630 pixels, a 1.91:1 ratio, is the size every major platform accepts without cropping badly. Keep it under about 1 MB and avoid small text, which becomes unreadable in a feed.

How long should my meta title and description be?

Aim for 50–60 characters of title and 150–160 of description. Past those points the platforms cut you off mid-sentence, and the counters here turn red as soon as you cross them.

Why does my link still show the old preview after I fix the tags?

Every platform caches the first version it scraped. Once your new tags are live, force a refresh using the platform's own debugger — the Facebook Sharing Debugger, LinkedIn's Post Inspector or X's card validator.

Do I need separate Twitter tags as well as Open Graph?

X falls back to Open Graph for most fields, but twitter:card is what makes it render the large image layout. The generated snippet includes both, which is the safest combination.

Is my image uploaded when I preview it?

No. The image is read locally and rendered from a temporary in-memory URL, so unpublished artwork never leaves your browser. Only the public image URL you type is written into the tags.

Open Graph Preview & Tag Sandbox

Mock up your link card for X, LinkedIn and Facebook, then copy the exact meta tags to ship.

Drop a preview image, or click to browse

Stays on your device · JPG, PNG, WebP · 1200×630 ideal

Meta title41/60 · 9 short of 50

Meta description112/160 · 38 short of 150

Site name

Target URL

Public image URL (used in the tags)

X (Twitter)

1200 × 630 preview image

textspro.com

Free Online Tools for Images, PDFs & Text

Compress images, edit PDFs, generate passwords and 20+ more free online tools that run entirely in your browser.

1200 × 630 preview image

Free Online Tools for Images, PDFs & Text

textspro.com · 1 min read

Facebook

1200 × 630 preview image

textspro.com

Free Online Tools for Images, PDFs & Text

Compress images, edit PDFs, generate passwords and 20+ more free online tools that run entirely in your browser.

Meta tags — paste into your <head>

<!-- Primary -->
<title>Free Online Tools for Images, PDFs &amp; Text</title>
<meta name="description" content="Compress images, edit PDFs, generate passwords and 20+ more free online tools that run entirely in your browser." />
<link rel="canonical" href="https://textspro.com/" />

<!-- Open Graph (Facebook, LinkedIn, WhatsApp, Slack…) -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="TextsPro" />
<meta property="og:title" content="Free Online Tools for Images, PDFs &amp; Text" />
<meta property="og:description" content="Compress images, edit PDFs, generate passwords and 20+ more free online tools that run entirely in your browser." />
<meta property="og:url" content="https://textspro.com/" />
<meta property="og:image" content="https://textspro.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Free Online Tools for Images, PDFs &amp; Text" />

<!-- X / Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Free Online Tools for Images, PDFs &amp; Text" />
<meta name="twitter:description" content="Compress images, edit PDFs, generate passwords and 20+ more free online tools that run entirely in your browser." />
<meta name="twitter:image" content="https://textspro.com/og-image.png" />

Next:Resize the OG image Compress the OG image

A link that unfurls badly is a link nobody clicks — no image, a truncated headline, or the domain showing where the title should be. The trouble is that the usual way to check is to publish first and debug afterwards, and every platform caches what it saw the first time. This sandbox moves that loop to before you deploy: type a title, description and URL, drop in an image, and watch three real card layouts update as you go, with character counters showing when you have crossed the line where each platform starts truncating.

How to Use the Open Graph Preview

1
Drop in the image you plan to use as your social preview — 1200 × 630 is the safe size everywhere.
2
Type your meta title and description, watching the counters for the 50–60 and 150–160 character sweet spots.
3
Set the site name and target URL so the cards show the right domain.
4
Copy the generated Open Graph and Twitter meta tags into your page's <head>.

Why Use TextsPro

Nothing here touches a server: the image you drop in is displayed straight from your device with a local object URL, and the tags are assembled in the page as you type. That means you can preview an unpublished campaign, an embargoed announcement or a private staging URL without any of it reaching a third-party scraper or debugging endpoint. It also means the preview is instant rather than waiting on a fetch, and there is no rate limit, no account and no cache to bust when you change your mind. The generated tags cover Open Graph and the Twitter card properties together, including image dimensions and alt text, so one paste covers every major platform.

Processed in your browser — files are never uploaded
Instant results with no queues or waiting
No signup, no watermarks, completely free

Frequently Asked Questions

Related Tools

Image Resizer

Resize images to any dimension online.

Image Compressor

Compress images without losing quality.

JSON Formatter

Format and beautify JSON data.