InstantOG

InstantOG est un service qui génère automatiquement des images Open Graph pour vos pages. Lorsque quelqu'un partage un lien vers votre documentation sur les réseaux sociaux, InstantOG produit une belle image d'aperçu 1200×630 en utilisant les métadonnées de votre page — titre, description et favicon.

Tiramisu Docs dispose d'une intégration native. Pas d'étape de build, pas de fichiers image à gérer. Ajoutez simplement votre identifiant de site et chaque page de documentation obtient automatiquement une balise og:image.

Configuration

1. Créer un compte

Rendez-vous sur instantog.com et enregistrez votre site. Vous obtiendrez un identifiant de site (par ex. site_b6bc4c3f).

2. Ajouter à la configuration

Ajoutez instantOg à votre 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. Déployer

Déployez votre site. InstantOG générera les images à la demande lorsque les plateformes sociales les demanderont.

Comment ça fonctionne

Lorsque instantOg est configuré, chaque page de documentation obtient une balise meta og:image pointant vers l'API InstantOG :

<meta property="og:image"
  content="https://instantog.com/api/og?site=site_b6bc4c3f&template=generic/standard&url=https://my-docs.dev/docs/getting-started" />

Lorsqu'une plateforme sociale (Twitter, Discord, Slack, etc.) récupère cette URL, InstantOG :

• Lit le titre, la description et le favicon de votre page
• Les intègre dans le modèle sélectionné
• Retourne une image PNG 1200×630 mise en cache

Aucun appel API n'est effectué pendant le développement ou le build. L'image est générée à la demande au moment du partage.

Options

Modèles

InstantOG propose plusieurs modèles :

Remplacement par page

Si une page définit image dans son frontmatter, cela a la priorité sur InstantOG :

meta {
  title = My Page,
  image = /images/custom-og.png
}