Open Graph Preview - Illustrative Social Cards

Check social-card composition before sharing a page

SimplyUtils Open Graph Preview is a manual composition check: enter a title, page URL, image URL and optional text, then compare three illustrative layouts. It can show a browser-loaded image and generate escaped social tags. It does not scrape the page, reproduce a live Facebook, LinkedIn or X renderer, inspect their caches or certify that a social crawler will display the result.

Worked example: make a crop problem visible

Prepare your own 1,200 by 630 test image with a small label near the edge and a larger label near the center. Host it at a URL you control and have permission to use. Enter Route briefing as the title, https://example.com/briefing as Page URL, your test image URL, and Map label near the west edge as Image alternative text. The page URL is a fictional example; replace it before publishing.

1. Before Load preview image, the card says Image not requested. Merely typing a URL creates no image request.
2. Select Load preview image to request that URL from your browser. Compare where the edge label falls in the centered 1.91:1 crop.
3. Switch Card layout between Wide link card, Compact article card and Rounded large-image card. The compact layout shows one title line and omits the description; the other layouts show a description with a two-line visual clamp.
4. If the important label is hard to read, edit the source image to move essential information away from the edge, then load the changed image URL and compare again.

These layouts demonstrate composition choices; they are not platform-specific pixel limits. Your receiving application may use another crop, size, font or text length, omit a field or render no card. Browser loading verifies only that this browser received an image. Authentication, crawler access, file format, content type and platform caching still need their own checks.

Review the generated properties

The Open Graph protocol specifies title, type, image and URL as the basic properties. This form requires a title and absolute HTTP(S) page and image URLs before exposing output. It supports website and article, with optional description, site name and image alternative text; it does not provide every property that other content types may require.

For Route briefing, website, https://example.com/briefing and https://example.com/images/briefing.jpg, the generated core properties are og:title with Route briefing, og:type with website, og:image with the image URL and og:url with the page URL. Optional empty fields are omitted. The second group is an X large-image Card draft using the same entered title and image, plus optional description and alternative text.

HTML attributes are escaped so a label containing a quote or ampersand remains text. The full title and description are exported; visual clamping does not cut the underlying code. Copy social tags into the page head, then inspect the published source for conflicting tags added by a CMS or plugin.

Input limits and recovery

The title accepts 300 UTF16 characters, description 1,000, URLs 2,048, site name 120 and alternative text 300. Single-line ordinary Unicode is accepted; invalid controls, malformed percent escapes, URL credentials and fragments are rejected. These are application bounds rather than social-network display guarantees. Correct the displayed error to restore the card and output.

If Image request failed appears, check that the URL serves an actual accessible image and retry. The tool does not substitute a third-party placeholder, infer a successful crawler fetch or upload anything. A failed or stalled request leaves the page in an explicit unavailable state. Changing the image clears its earlier preview. Reset fields clears your inputs and image request state. If copying fails, select the displayed output and copy manually or retry.

Distinct purpose and privacy

Use this page when you need to compare image composition and compact versus wide card text. For code import and saved drafts, use Meta Tags Generator. For search snippets, use Google SERP Preview. Shared metadata fields do not make these previews evidence of the receiving services' actual output.

Manual fields and code generation stay in your browser without saved input history. Load preview image contacts the entered host, which receives the request and can observe your network address; the image element requests no referrer. No page HTML is fetched. General site analytics and advertising are described in the Privacy Policy. Reloading clears the entered fields. Use original or properly licensed images when publishing your real card.

Frequently asked questions