Web & email / BROWSER-LOCAL

Open Graph Preview

Compose social metadata, preview an approximate card and export safely escaped HTML without fetching a URL.

WORKSPACERuns in your browser
33/200 title · 95/500 description
Approximate preview. Local image remains on your device and is not exported as a public URL.

How to use this tool

  1. Enter title, description and canonical URL.
  2. Optionally choose an image from your device for the local preview.
  3. Set the public image URL for exported tags and download the HTML fragment.

Prepare a share card’s metadata

Generate an HTML fragment for an example page, then publish the image and verify the actual returned HTML with the platform’s debugger.

Input

{
  "title": "Example project",
  "description": "A demonstration share card.",
  "url": "https://example.com",
  "image": "https://example.com/social.png"
}

Expected output

<title>Example project</title>
<link rel="canonical" href="https://example.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="Example project">
<meta property="og:description" content="A demonstration share card.">
<meta property="og:url" content="https://example.com/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Example project">
<meta name="twitter:description" content="A demonstration share card.">
<meta name="description" content="A demonstration share card.">
<meta property="og:image" content="https://example.com/social.png">
<meta name="twitter:image" content="https://example.com/social.png">

The preview simulates a card. The exported image URL must be publicly reachable by the crawler; a local preview file is not uploaded or embedded in the HTML fragment. Different platforms can crop or cache the same metadata differently.

More examples

  • A title containing " is exported with &quot; in attributes.
  • A local image is preview-only; it is never uploaded or converted into a public URL.
  • og:type defaults to website and a public image URL enables summary_large_image.

Know the limits

Preview is approximate. Social networks cache metadata and render different crops and truncation. URLs are included in output but never fetched by this tool.

Common questions

Can it scrape a live website?

No. Enter metadata manually; arbitrary URL fetching is deliberately absent.

Will my local image appear in exported tags?

Only a separately supplied public image URL is exported. Upload the image through your own publishing workflow.

Primary references

Read the full field note