Modernes OG-Image-Handling mit Takumi

Open-Graph-Bilder sind entscheidend für die Optik deiner Seite in sozialen Netzwerken. Sie werden beim Teilen von Links auf Plattformen wie LinkedIn, X (Twitter) oder WhatsApp angezeigt und sind oft der erste visuelle Eindruck, den Besucher von deiner Seite bekommen. Mit dem Takumi-Plugin für nuxt-og-image wird die Generierung dieser Bilder zum Kinderspiel – ganz ohne externen Dienst.

Warum Takumi?

Takumi ist ein spezialisierter Renderer, der HTML und CSS serverseitig in PNG-Bilder umwandelt. Anders als die Standard-Lösung von nuxt-og-image (die auf Chromium setzt) oder externe Dienste wie Vercel OG, läuft Takumi als reiner Rust-Prozess. Das bedeutet:

• Geschwindigkeit: Ein OG-Bild wird in wenigen Millisekunden gerendert, nicht in Sekunden.
• Kein Chromium: Du sparst dir das Installieren und Betreiben einer kompletten Browser-Engine auf dem Server.
• Deterministisch: Gleicher Input liefert immer das gleiche Output – keine Caching-Probleme.

Setup in Nuxt 4

Die Einrichtung ist denkbar einfach. Nach der Installation von @nuxt-og-image und @takumi-rs/core erstellst du eine Takumi-Komponente unter components/OgImage/:

<template>
  <div class="w-[1200px] h-[600px] flex flex-col items-center justify-center bg-gray-900 p-16">
    <h1 class="text-5xl font-bold text-white text-center">{{ title }}</h1>
    <p class="text-2xl text-gray-400 mt-6">{{ description }}</p>
  </div>
</template>

Wichtig: Takumi unterstützt nur einen Teil der Tailwind-Klassen. Transform-, Filter- und Shadow-Klassen funktionieren nicht – stattdessen verwendest du inline styles.

Zero Runtime

Durch zeroRuntime: true in der nuxt.config.ts werden alle OG-Images bereits beim Build generiert:

ogImage: {
  zeroRuntime: true
}

Das bedeutet:

• Kein API-Call zur Laufzeit
• Keine Latenz beim ersten Aufruf
• Die Bilder liegen als statische PNGs im Build-Output
• Perfekt für Netlify Deploy Previews und CDN-Caching

Self-hosted Fonts

Damit die OG-Images DSGVO-konform sind, werden die Schriftarten nicht von Google Fonts geladen, sondern direkt ins Bild eingebunden. Dazu konfigurierst du die gewünschten Fonts via @nuxt/fonts:

fonts: {
  families: [
    { name: "Inter", provider: "google", weights: [400, 700] }
  ]
}

Das Modul lädt die Fonts herunter und bettet sie in die OG-Images ein – kein Runtime-Request, keine Datenschutzbedenken.

Einsatz auf jeder Seite

Die Nutzung ist komfortabel: Auf jeder Seite rufst du einfach defineOgImage("MeinTemplate") auf. Der Name bezieht sich dabei auf die Datei unter components/OgImage/. Werte wie title und description werden automatisch aus den SeoMeta-Tags übernommen – oder du übergibst sie explizit:

defineOgImage({
  component: "Default",
  props: {
    title: "Mein eigener Titel",
    description: "Eine individuelle Beschreibung"
  }
})

Das Ergebnis sind scharfe, konsistente OG-Images für jede Seite – ohne manuelle Arbeit.