--- url: https://findutils.com/guides/open-graph-preview-guide title: "Open Graph Preview: Check How a Link Looks on Facebook, X, LinkedIn, Slack and More" description: "How to use the free FindUtils Open Graph Preview tool: paste a page's HTML or type the tags, read the validation messages, compare six platform previews, and copy finished og: and twitter: tags." category: seo content_type: guide guide_type: subtopic cluster: seo locale: en read_time: 7 status: published author: "olgunozoktas" published_at: 2026-10-27T15:08:00Z excerpt: "Open Graph Preview shows how a shared link will look on Facebook, X, LinkedIn, Discord, Slack and WhatsApp before you post it. Paste the page's HTML to pull out its tags, or type them in by hand, then read the validation panel, switch between the six previews and copy a clean block of og: and twitter: tags. This guide covers each step, what every message means, how the previews differ, and the limits to know." tag_ids: ["seo", "open-graph", "link-preview", "meta-tags", "social-media"] tags: ["SEO", "Open Graph", "Link Preview", "Meta Tags", "Social Media"] primary_keyword: "open graph preview" secondary_keywords: ["og tag checker", "link preview tester", "facebook link preview", "twitter card preview", "check og image", "og meta tag generator"] tool_tag: "open-graph-preview" related_tool: "open-graph-preview" related_tools: ["open-graph-preview", "meta-tag-generator", "serp-preview", "image-resizer", "image-cropper", "aspect-ratio-calculator"] updated_at: "2026-10-27T15:08:00Z" og_image: "/images/content/guides/open-graph-preview-guide-cover-20261027.webp" image_alt: "One web page on a dark navy background with lines fanning out to six small preview cards of different shapes, each with an image block, a title bar and a short text line." --- To see how a link will look when someone shares it, open the FindUtils [Open Graph Preview](/seo/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 ``. 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](/blog/open-graph-tags-explained-why-link-previews-look-wrong/). ## How to Use Open Graph Preview, Step by Step 1. **Open the tool.** Go to [Open Graph Preview](/seo/open-graph-preview/). It starts in **Manual Entry** mode. 2. **Choose your input.** If the page already exists, switch to **Paste HTML**, paste the page source (or just its ``) 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. 3. **Fill or fix the Open Graph fields.** `og:title`, `og:description`, `og:image`, `og:url`, `og:type` and `og:site_name`. The title and description fields show a live character count. 4. **Set the X (Twitter) fields if you need them.** `twitter:card` defaults to `summary_large_image`. Leave `twitter:title`, `twitter:description` and `twitter:image` empty to reuse your Open Graph values, or fill them to show different text on X. 5. **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. 6. **Switch between the platform tabs.** Check each preview for a cropped image, a cut-off title or a missing description. 7. **Generate and copy.** Click **Generate Tags**, then **Copy Tags** (the button changes to **Copied!**) and paste the block into your page's ``. **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 `` and ``. 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](https://web.archive.org/web/20260116124848/https://developer.x.com/en/docs/x-for-websites/cards/overview/markup), and the counters on those fields use the same numbers. The [Open Graph protocol](https://ogp.me/) 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 | |---|---|---|---| | Facebook | 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:` | | LinkedIn | 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](https://docs.slack.dev/messaging/unfurling-links-in-messages) | | WhatsApp | 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](/convert/image-resizer/), the [Image Cropper](/design/image-cropper/) or the [Aspect Ratio Calculator](/calculate/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`**: use `website` for a home page or a tool page and `article` for a blog post or news story. The dropdown also has `product`, `profile`, `video.movie`, `video.episode`, `music.song` and `book` for pages that really are one of those things. - **`twitter:card`**: use `summary_large_image` when you have a good wide image, and `summary` when your image is a square logo or icon. `app` and `player` are 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 `` element. The tool only reads the `og:` and `twitter:` 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](/blog/open-graph-tags-explained-why-link-previews-look-wrong/) - [JSON to Social Card guide](/guides/json-to-social-card-guide/) - [Meta Tag Generator](/seo/meta-tag-generator/) and [SERP Preview](/seo/serp-preview/), for the tags and snippet search engines use ## Sources - [The Open Graph protocol](https://ogp.me/) - [X Developer Platform: Cards markup tag reference (archived January 2026)](https://web.archive.org/web/20260116124848/https://developer.x.com/en/docs/x-for-websites/cards/overview/markup) - [Slack Developer Docs: Unfurling links in messages](https://docs.slack.dev/messaging/unfurling-links-in-messages)