Preview metadata without fetching a page
Compose a portable HTML fragment while keeping local images and drafts on your device.
Keep URL roles separate
The canonical page URL identifies the page a card describes. A public image URL identifies a separately hosted resource that a social crawler must be able to retrieve. A file chosen from your device has neither role until you publish it through your own hosting workflow.
This tool can preview a local file with a temporary Blob URL. It revokes that URL when replaced or cleared. The exported fragment uses only the public image URL you explicitly type; it never uploads your file or scrapes a remote page.
Export markup as data
The generator escapes quotes, ampersands and angle brackets inside attributes. A title containing a quotation mark must remain an attribute value rather than terminate it and introduce another element. React also renders the preview as text instead of interpreting your draft as HTML.
The fragment includes a document title, canonical link, description, Open Graph properties and social card metadata. Put it into the head of the final page, using your framework’s metadata system where appropriate. Do not insert an entire second document into an existing head.
<meta property="og:type" content="website"> <meta property="og:title" content="An example title">
Test the published page too
A local card is approximate: real platforms choose their own crop, truncation and cache lifetime. A public page must return metadata in a form the crawler can read, and its image must be accessible without a session or expired signed URL.
After deployment, inspect the actual returned HTML and use the platform’s debugging facilities if available. Repeatedly changing metadata may not immediately refresh a cached share card. The tool deliberately makes no promise about a platform’s final rendering.
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.
Keep the references close
Primary documentation supports the technical details above. Check it alongside the behavior of your own runtime and deployment.
Open Open Graph preview →