OG Images & Social Previews

Every Based Page deployment automatically gets og:image, og:title, and og:description tags injected into the HTML - so links look good when shared anywhere.

Default Behavior

If you don't provide a custom OG image, the deployment uses a Based Page branded fallback image. The og:title and og:description come from the title and description fields you pass at deploy time.

Setting a Custom OG Image

Option 1: URL parameter

Pass og_image with any publicly accessible image URL:

MCP:

"Deploy this page with the OG image at https://example.com/preview.png"

Claude passes og_image: "https://example.com/preview.png" to the deploy tool.

CLI:

npx based-page deploy --file index.html --slug my-site \
  --og-image https://example.com/preview.png

API:

{
  "html": "...",
  "slug": "my-site",
  "og_image": "https://example.com/preview.png"
}

Option 2: Include og-image.png in a multi-file deploy

For multi-file deploys, include a file named exactly og-image.png at the root of the files array. Based Page detects it automatically and serves it at https://{slug}.based.page/og-image.png:

{
  "files": [
    { "path": "index.html", "content": "...", "contentType": "text/html" },
    { "path": "og-image.png", "content": "<base64>", "contentType": "image/png", "encoding": "base64" }
  ]
}

No need to pass og_image separately - the file is detected and used automatically.

Updating the OG Image

Update via new URL

Pass og_image in an update call:

MCP:

"Update my landing page and set the OG image to https://example.com/new-preview.png"

CLI:

npx based-page update --id dep_abc123 --file index.html \
  --og-image https://example.com/new-preview.png

API:

{
  "og_image": "https://example.com/new-preview.png"
}

Update via file replacement

For multi-file deploys, include the new og-image.png in the updated files array. The new file replaces the old one and the og:image tag is updated accordingly.

Removing a Custom OG Image

Pass an empty string for og_image to revert to the Based Page default:

API / MCP tool:

{
  "og_image": ""
}

What Gets Injected

When an OG image is present, Based Page injects:

<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your description">
<meta property="og:url" content="https://your-slug.based.page">
<meta property="og:image" content="https://...">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://...">

twitter:card and twitter:image are only added when an OG image is set.

Recommended Image Size

Use 1200x630px for best results across all platforms (Twitter/X, Discord, Slack, Telegram, LinkedIn, iMessage).

Notes

• OG tags are always injected - they can't be disabled.
• Any existing og:image, og:title, or og:description tags in your HTML are stripped and replaced with the injected values.
• og-image.png must be at the root of the files array (not in a subdirectory) to be auto-detected.