To see how a link will look when someone shares it, open the FindUtils Open Graph Preview tool and either paste the page's HTML or type the tags in by hand. The tool reads the og: and twitter: meta tags, flags what is missing or too long, and draws the card the way it would appear on Facebook, X (Twitter), LinkedIn, Discord, Slack and WhatsApp. When the preview looks right, click Copy Tags and paste the finished block into your page's <head>. Everything runs in your browser and there is no sign-up.
This guide walks through both input modes, explains each validation message, shows how the six previews differ, and lists what the tool does not check. For the background on which tags matter and why previews break, read Open Graph tags explained.
How to Use Open Graph Preview, Step by Step
- Open the tool. Go to Open Graph Preview. It starts in Manual Entry mode.
- Choose your input. If the page already exists, switch to Paste HTML, paste the page source (or just its
<head>) into the HTML Source box and click Extract Tags. The fields fill with the values the tool found. If you are writing tags for a new page, stay in Manual Entry and fill the fields yourself. - Fill or fix the Open Graph fields.
og:title,og:description,og:image,og:url,og:typeandog:site_name. The title and description fields show a live character count. - Set the X (Twitter) fields if you need them.
twitter:carddefaults tosummary_large_image. Leavetwitter:title,twitter:descriptionandtwitter:imageempty to reuse your Open Graph values, or fill them to show different text on X. - Read the Validation panel. Errors mean a platform has nothing to build a card from. Warnings mean the card will work but may be cut off or incomplete. The next section explains each one.
- Switch between the platform tabs. Check each preview for a cropped image, a cut-off title or a missing description.
- Generate and copy. Click Generate Tags, then Copy Tags (the button changes to Copied!) and paste the block into your page's
<head>. Clear All resets every field.
Tip: to get the HTML of a live page, open it in your browser, choose View Page Source, and copy everything between <head> and </head>. Use the page source rather than the browser's element inspector, because the source is closer to what a platform's crawler receives.
What the Validation Messages Mean
| Message | Type | What it means and what to do |
|---|---|---|
Missing og:title | Error | No title for the card. Add one that makes sense on its own, without the site name in front. |
Missing og:description | Error | Most platforms will show no text under the title. Write one or two plain sentences. |
Missing og:image | Error | No picture. Many platforms then show a small text-only card or a bare link. Use a full https:// URL. |
| Title over 60 characters | Warning | Long titles are cut off in several previews. Put the key words first. |
| Description over 155 characters | Warning | The end may be hidden. Keep the important part in the first sentence. |
Missing og:url | Warning | Set it to the page's canonical address, so shares of different URL variants point to one place. |
Missing twitter:card | Warning | Without it, X may fall back to a small summary card. Add summary_large_image for the big image layout. |
The 60 and 155 character limits are the tool's practical targets for keeping text visible across platforms, not limits from a specification. X documents its own maximums of 70 characters for twitter:title and 200 for twitter:description in its Cards markup reference, and the counters on those fields use the same numbers.
The Open Graph protocol itself lists four required properties: og:title, og:type, og:image and og:url. The tool adds the og:type you pick in its dropdown, so if you also fix the og:url warning, your tags cover all four.
How the Six Previews Differ
Each platform draws a shared link in its own way. The tool's previews follow these shapes:
| Tab | Image | Text shown | Notes |
|---|---|---|---|
| Wide, 1.91:1 | Domain in capitals, one line of title, one line of description | The title is usually the part people read | |
| Twitter/X | 2:1 with summary_large_image; a small square thumbnail with summary | Title and description | Uses your twitter: values first, then falls back to og: |
| Wide, 1.91:1 | Title only | Do not rely on the description here | |
| Discord | Below the text | Site name, title, up to three lines of description | Shows the most text of the six |
| Slack | Shown at a capped size | Site name (or domain), title, description | Slack reads Open Graph and X Card tags, per its unfurling docs |
| Wide, 1.91:1 | Up to two lines of title and two of description | Common on phones, so check it at a glance |
Two practical lessons come out of comparing the tabs. First, an image made at a 1.91:1 ratio, for example 1200 by 630 pixels, fits most previews without cropping. If you need to make or fix one, use the Image Resizer, the Image Cropper or the Aspect Ratio Calculator. Second, the title carries the card on every platform, and on LinkedIn it is the only text, so spend most of your effort there.
Which og:type and twitter:card to Pick
og:type: usewebsitefor a home page or a tool page andarticlefor a blog post or news story. The dropdown also hasproduct,profile,video.movie,video.episode,music.songandbookfor pages that really are one of those things.twitter:card: usesummary_large_imagewhen you have a good wide image, andsummarywhen your image is a square logo or icon.appandplayerare special card types for app downloads and embedded audio or video. They need extra tags that this tool does not generate, so most pages should not pick them.
Limits to Know
- It does not fetch a URL. The tool works from the HTML or values you give it. It cannot see the live page, so it cannot tell you whether a platform has cached an older version.
- It does not download the image. It shows the image from the URL you entered, but it does not check the file's size, format or pixel dimensions. Check those yourself against each platform's rules.
- It reads tags, not fallbacks. If a page has no
og:title, some platforms fall back to the<title>element. The tool only reads theog:andtwitter:tags, so a missing tag shows as missing even when a platform might still show something. - Previews are close, not exact. Platforms change their layouts without notice. Use the previews to catch obvious problems such as a missing image or a cut-off title.
- Scripts do not run. If your site adds meta tags with JavaScript after the page loads, they will not be in the page source you paste. Many crawlers do not run scripts either, so this is worth fixing on the page itself.
FAQ
How do I check my Open Graph tags without publishing the page?
Use Manual Entry, or paste the HTML of a draft into Paste HTML. The tool needs no live page, so you can check the tags before anything goes online.
Why does my link show no image when I share it?
The most common causes are a missing og:image, an image URL that is relative instead of a full https:// address, or an old copy cached by the platform. Paste your page's HTML into the tool to confirm the tag is there and points to a full URL.
Do I need separate Twitter tags if I have Open Graph tags?
Usually not. X falls back to og:title, og:description and og:image when the matching twitter: tags are missing. Add twitter:card so X knows which layout you want.
Why does LinkedIn not show my description?
The LinkedIn preview in the tool shows only the image and title, so write a title that works without the description.
Is the HTML I paste uploaded anywhere?
No. The tags are read and the previews are drawn in your browser, and you can use the tool without an account.
What should I do after the preview looks right?
Copy the tags into your page's <head>, publish, and share the link once. If a platform still shows an old card, it is likely using a cached copy. Several platforms offer a debugger or inspector page that can refresh it.
Related Reading
- Open Graph tags explained: why your link preview looks wrong
- JSON to Social Card guide
- Meta Tag Generator and SERP Preview, for the tags and snippet search engines use
