InstantOG

InstantOG ist ein Dienst, der automatisch Open-Graph-Bilder für Ihre Seiten generiert. Wenn jemand einen Link zu Ihrer Dokumentation in sozialen Medien teilt, rendert InstantOG ein ansprechendes 1200×630-Vorschaubild anhand der Metadaten Ihrer Seite — Titel, Beschreibung und Favicon.

Tiramisu Docs hat eine eingebaute Integration. Kein Build-Schritt, keine Bilddateien zu verwalten. Fügen Sie einfach Ihre Site-ID hinzu und jede Dokumentationsseite erhält automatisch ein og:image-Tag.

Einrichtung

1. Konto erstellen

Gehen Sie zu instantog.com und registrieren Sie Ihre Website. Sie erhalten eine Site-ID (z.B. site_b6bc4c3f).

2. Zur Konfiguration hinzufügen

Fügen Sie instantOg zu Ihrer tiramisu.config.ts hinzu:

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. Bereitstellen

Stellen Sie Ihre Website bereit. InstantOG generiert Bilder bei Bedarf, wenn Social-Media-Plattformen sie anfordern.

So funktioniert es

Wenn instantOg konfiguriert ist, erhält jede Dokumentationsseite ein og:image-Meta-Tag, das auf die InstantOG-API verweist:

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

Wenn eine Social-Media-Plattform (Twitter, Discord, Slack, usw.) diese URL abruft, macht InstantOG Folgendes:

• Liest Titel, Beschreibung und Favicon Ihrer Seite
• Rendert sie in das ausgewählte Template
• Gibt ein gecachtes 1200×630-PNG-Bild zurück

Während der Entwicklung oder beim Build werden keine API-Aufrufe getätigt. Das Bild wird bei Bedarf zum Zeitpunkt des Teilens generiert.

Optionen

Templates

InstantOG bietet mehrere Templates:

Seitenspezifische Überschreibung

Wenn eine Seite image in ihrem Frontmatter setzt, hat dies Vorrang vor InstantOG:

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