Softonic

Open Graph Preview

Step 1 / 2
Next

Type your title, description, site name, page URL and image URL, and this tool renders a live Facebook and X (Twitter) share card that updates on every keystroke. It is a design sandbox for your Open Graph tags: nothing is fetched or published, so you can rehearse the headline length and the image crop until the card looks right, then copy the wording into your real og: tags.

How the preview is assembled

  1. 1

    Type the card fields

    Title, site name, description, page URL and image URL. Every field maps to one og: tag.

  2. 2

    Watch the cards update

    The Facebook and X mock-ups re-render as you type, using each platform's real layout and truncation.

  3. 3

    Add an image URL

    Paste an absolute https image address to see the crop; leave it empty and the Facebook card shows a placeholder.

  4. 4

    Copy into your og: tags

    When the card reads well, transfer the same title, description and image into your page's meta tags.

What each field becomes

Field Open Graph tag Shown in the card
Title og:title Bold headline, truncated to one line
Description og:description Grey subtitle, clamped to two lines
Site name og:site_name Small label above the Facebook headline
URL og:url The domain is shown; the host drives it
Image URL og:image Cropped to 1.91:1 on both mock cards

The tool reads the host out of the URL you type, so https://blog.example.com/post shows blog.example.com on the card.

The two cards, and how they differ

  • Facebook shows the image cropped to 1.91:1, then the domain in small caps, the bold title on one line, and the description on up to two lines. With no image URL it renders a grey placeholder, which is the single most common cause of a flat, imageless share in the wild.
  • X (Twitter) shows a rounded summary_large_image card: the image on a 2:1 crop, the domain, the title and the description underneath.

Getting the wording to fit

  • Title: aim for 60 to 70 characters. Facebook cuts off around 88 and X around 70, so a title inside 70 stays whole everywhere.
  • Description: keep it under about 160 characters; the card clamps to two lines and the rest is discarded.
  • Image: design at 1200 x 630 px so the 1.91:1 crop is clean, and host it on an absolute https:// URL. A relative path will not load once the tags go live.
  • Site name: short and brand-only, no tagline. It sits above the headline as a label.

Publishing-day checklist

  • [ ] Title under 70 characters
  • [ ] Description under 160 characters
  • [ ] Image URL is absolute (https, not // or a relative path)
  • [ ] Image designed at 1200 x 630 px, JPG or PNG
  • [ ] URL matches the canonical you will ship
  • [ ] Wording copied into the real og: tags, then verified with a checker

Frequently Asked Questions

No. You type the card fields by hand and the tool mocks up how they would look. It is a design sandbox, not a scraper, so it also works before the page is online. To read the tags already present on a page, paste that page’s HTML into the Open Graph Checker instead.

A Facebook card and an X (Twitter) large-image card. They use the same Open Graph values, so a card that reads well here is a good proxy for LinkedIn, Slack, Discord and other apps that unfurl from the same og: tags, each with slightly different limits.

Because the image field is empty, or the URL you pasted is not a working absolute https address. Add a full https image URL and the crop appears at once. When it goes live, keep the file under 5 MB and served with a public image/* content type.

Each platform truncates at a different point (Facebook near 88 characters, X near 70), and the mock card mirrors that. Trim the title to 60 to 70 characters and it will stay whole on every platform.

Related Tools

Meta Description Length Checker

Measure a meta description in characters and estimated pixels, compare editorial ranges, and inspect illustrative desktop and mobile previews.

Canonical Tag Generator

Generate a valid rel=canonical link tag for any URL. Includes URL validation and the common mistakes to avoid.

Google SERP Simulator

Preview an approximate Google-style search snippet with character limits for mobile and desktop. Your draft stays in this browser session.

HTTP Security Headers Checker

Paste HTTP response headers and review HSTS, CSP, clickjacking, MIME, referrer and cross-origin policies locally in your browser.

External Links Extractor

Paste raw HTML, optionally set a base URL, and get a clean de-duplicated list of every external http/https link the code contains for link audits and SEO reviews.

XML Sitemap Validator

Check sitemap XML in your browser for parse errors, missing locations, duplicate URLs, and common sitemap field values.

Tool available in other languages