Open Graph preview and generator

Type your URL or paste your page code and see how your link will look on Facebook, LinkedIn, X, WhatsApp and Slack before you publish. With the missing tags generated and the errors pointed out.

  • Free
  • No sign-up
  • By URL or by pasting the HTML
  • Five views at once

For pages on localhost, behind a password or not yet published: right-click the page → "View page source". Copy from <head> to </head> and paste it here.

Or fill in the fields

How it will look

Facebook and LinkedIn

X

WhatsApp and Telegram

Slack and Discord

Google search result

Google does not use Open Graph for its result: it uses the <title> and the meta description, when it does not decide to rewrite them.

Review

    The tags, ready to paste

    How to use it

    1. 01

      Bring your tags

      Type your page URL, paste its source or fill the fields by hand. All three stay in sync.

    2. 02

      Look at the four cards

      Every platform truncates in a different place and uses the image differently. Here you see them side by side.

    3. 03

      Fix it and publish again

      Copy the corrected tags, upload them, and ask the platform to read your link again.

    What happens when you type your URL

    Browsers stop a page from downloading the HTML of another domain, so a function of ours on Cloudflare fetches it for you. It asks only for the start of the document — up to the </head> tag or 256 KB, whichever comes first — hands it back to you and stores nothing: neither the URL nor the content. The result stays cached for ten minutes so your server is not bothered twice while you fix things.

    Some pages that function cannot reach: the ones on your machine, the ones behind a password and the ones you have not published yet. For those the paste box is still there: copy the <head> from the page source and paste it. It is exactly what the function would read, without it leaving your computer.

    The image is separate: showing it means downloading it, and your browser does that directly against whichever server hosts it. It is the same request each platform’s bot will make, which is what makes it a useful test.

    The card is the first impression

    A link shared with no image and no description shows up as a line of grey text, competing in the same thread with links that do have a card. The difference is not the content: it is four tags you write once and forget.

    On the sites we build, that image is generated automatically at build time — one per page, with its own title — and the tags are verified before publishing, alongside broken links and duplicate metadata. Cheaper than finding out when somebody shares the page.

    How we approach technical SEO →

    Frequently asked questions

    What does the tool do when I type my URL?

    Your browser cannot download the HTML of another domain — the same-origin policy prevents it — so a function of ours on Cloudflare fetches it instead. That function downloads only the start of the document, up to </head> or 256 KB, whichever comes first; it hands that piece back to your browser and stores nothing. The result is cached for ten minutes so your server is not bothered twice while you fix things. The analysis, the cards and the generated tags are still computed in your browser.

    I fixed the tags and the card looks the same. Why?

    Because platforms cache what they read the first time, sometimes for days. You have to ask them to read the link again: Facebook and WhatsApp share the Facebook sharing debugger, LinkedIn has its Post Inspector and X its card validator. Running the link through those forces a fresh read.

    What size should the image be?

    1200×630 pixels, the 1.91:1 ratio of large cards. The minimum most platforms accept is 200 pixels on a side, and below 600 it looks soft when scaled up. Avoid small text: on a phone that card is less than half the size.

    Why does my image not appear when the URL is right?

    The three usual reasons, by frequency: the path is relative and the bot cannot resolve it; the image sits behind a login or in a password-protected staging environment; or the server blocks requests that do not come from a browser. This tool tries to load it the same way the bot would, so if it does not appear here, it very likely will not appear there.

    Do I need Twitter tags if I already have Open Graph ones?

    Almost never. X reads the Open Graph tags when it finds none of its own, so adding twitter:card is enough to choose between the wide card and the small thumbnail. Duplicating title, description and image only makes sense if you want to say different things on different networks.

    Does Google use Open Graph?

    Not for the search result. There it uses the <title> and the meta description — and it often rewrites the latter if it thinks some other text on your page answers the query better. Open Graph is for what gets shared: social networks, messaging, and previews inside other apps.

    Is what I paste sent anywhere?

    What you paste, no: the HTML is parsed in your browser by the same parser it uses to render pages, and that parsing executes nothing you paste. The URL you type does go through our function, which downloads it and does not log it. And the image you point at is loaded by your browser directly, because it has to be downloaded to be shown to you — exactly as any page displaying it would.

    Do your links share with no image?

    It is usually one misplaced tag and fifteen minutes of work. And if you also want every page to generate its own image without anyone designing them one by one, that part we build for you.

    We reply within one business dayBogotá · UTC−5

    Message us on WhatsApp (opens in a new tab)