Integrations
InstantOG
Automatic Open Graph images for every doc page.
InstantOG is a service that automatically generates Open Graph images for your pages. When someone shares a link to your docs on social media, InstantOG renders a beautiful 1200×630 preview image using your page's metadata — title, description, and favicon.
Tiramisu Docs has a built-in integration. No build step, no image files to manage. Just add your site ID and every doc page gets an og:image tag automatically.
Setup
1. Create an account
Go to instantog.com and register your site. You'll get a site ID (e.g. site_b6bc4c3f).
2. Add to config
Add instantOg to your tiramisu.config.ts:
import { defineConfig } from "@tiramisu-docs/kit"
export default defineConfig({
title: "My Docs",
url: "https://my-docs.dev",
instantOg: {
siteId: "site_b6bc4c3f",
template: "generic/standard",
},
}) 3. Deploy
Deploy your site. InstantOG will generate images on-demand when social platforms request them.
url field in your config must be set to your production URL. InstantOG fetches your live pages to extract metadata, so images are only generated for deployed sites.How It Works
When instantOg is configured, every doc page gets an og:image meta tag pointing to the InstantOG API:
<meta property="og:image"
content="https://instantog.com/api/og?site=site_b6bc4c3f&template=generic/standard&url=https://my-docs.dev/docs/getting-started" /> When a social platform (Twitter, Discord, Slack, etc.) fetches this URL, InstantOG:
- Reads your page's title, description, and favicon
- Renders them into the selected template
- Returns a cached 1200×630 PNG image
No API calls happen during development or build. The image is generated on-demand at share time.
Options
| Option | Type | Description |
|---|---|---|
siteId | string | Required. Your site ID from the InstantOG dashboard. |
template | string | Template ID. Defaults to your site's default template. |
theme | light | dark | Color theme for the generated image. |
accentColor | string | Hex color for accents (e.g. #6366f1). |
gradientBg | boolean | Enable gradient background on the image. |
Templates
InstantOG provides several templates:
| ID | Style |
|---|---|
generic/standard | Clean, all-purpose layout |
generic/minimal | Stripped-down, text-focused |
article/blog-post | Article-style with author info |
article/magazine | Editorial layout |
article/newsletter | Email-style header |
news/headline | Bold news-style |
product/ecommerce | Product showcase |
product/luxury | Premium feel |
product/bold | High-contrast product |
product/playful | Fun, colorful product |
Per-Page Override
If a page sets image in its frontmatter, that takes priority over InstantOG:
meta {
title = My Page,
image = /images/custom-og.png
}