Social Media Preview Cards mit OG-Image Meta Tags schweben im dunklen Raum
    DevelopmentStrategy

    OG-Image Best Practices für SPAs: So werden deine Vibe-Coding-Projekte teilbar

    Till FreitagTill Freitag14. April 20264 min read
    Till Freitag

    TL;DR: „SPAs liefern keine OG-Meta-Tags – Social Previews sind leer. Die Lösung: Pre-Rendering für statische Tags + dynamische OG-Image-Generierung via Edge Functions für individuelle Seiten."

    — Till Freitag

    Du hast mit Lovable oder Bolt eine App gebaut. Sie funktioniert. Sie sieht gut aus. Aber wenn du den Link auf LinkedIn teilst, passiert das hier:

    • Kein Bild – nur ein generisches Platzhalter-Icon
    • Kein Titel – oder schlimmer: "React App"
    • Keine Beschreibung – LinkedIn zeigt nichts

    Das Problem ist nicht dein Content. Das Problem ist die Architektur.

    Warum SPAs keine Social Previews haben

    Single Page Applications rendern alles im Browser. Wenn LinkedIn, Twitter oder WhatsApp deinen Link crawlen, führen sie kein JavaScript aus. Sie bekommen nur die leere index.html:

    <!DOCTYPE html>
<html>
<head>
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="/assets/index.js"></script>
</body>
</html>

    Keine og:title. Kein og:image. Kein og:description. Keine Preview.

    Was Open Graph Tags sind – und warum sie wichtig sind

    Open Graph (OG) Tags sind Meta-Tags im <head> deiner HTML-Seite, die Social-Media-Plattformen lesen:

    <meta property="og:title" content="Dein Seitentitel" />
<meta property="og:description" content="Beschreibung für die Preview" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/seite" />
<meta property="og:type" content="website" />

    Das Problem bei SPAs: Diese Tags werden erst zur Laufzeit via JavaScript gesetzt (z.B. mit react-helmet-async). Aber Crawler warten nicht auf JavaScript.

    Die Lösung: 3-Schichten-Strategie

    Schicht 1: Pre-Rendering für statische OG-Tags

    Playwright SSG rendert jede Seite vorab und baked die Meta-Tags ins HTML:

    // playwright-ssg.ts
const pages = ['/blog/mein-artikel', '/services/beratung'];

for (const path of pages) {
  const page = await browser.newPage();
  await page.goto(`http://localhost:5173${path}`);
  await page.waitForSelector('meta[property="og:title"]');
  const html = await page.content();
  // Speichere als statische HTML-Datei
}

    Ergebnis: Crawler bekommen vollständig gerenderte Seiten mit allen OG-Tags.

    → Playwright SSG Tutorial: Schritt für Schritt

    Schicht 2: Dynamische OG-Images mit Edge Functions

    Für Blog-Artikel oder Produktseiten willst du individuelle Preview-Bilder. Vercel Edge Functions generieren diese on-the-fly:

    // api/og-image.tsx (Vercel Edge Function)
import { ImageResponse } from '@vercel/og';

export const config = { runtime: 'edge' };

export default function handler(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    <div style={{
      display: 'flex',
      fontSize: 48,
      background: 'linear-gradient(135deg, #1a2744, #0d1b2a)',
      color: 'white',
      width: '100%',
      height: '100%',
      padding: 60,
      alignItems: 'center',
    }}>
      {title}
    </div>,
    { width: 1200, height: 630 }
  );
}

    Im HTML:

    <meta property="og:image" content="https://example.com/api/og-image?title=Mein+Artikel" />

    Schicht 3: Fallback-Image als Sicherheitsnetz

    Definiere immer ein Default-OG-Image in deiner index.html:

    <meta property="og:image" content="https://example.com/og-default.jpg" />

    Falls Pre-Rendering oder Edge Function fehlschlagen, zeigt LinkedIn wenigstens dein Brand-Image statt eines leeren Kästchens.

    Die OG-Image Checkliste

    Format & Größe

    • 1200×630px – das universelle OG-Image-Format
    • < 1 MB Dateigröße (LinkedIn schneidet größere Bilder ab)
    • WebP oder JPG – PNG nur wenn Transparenz nötig
    • Kein wichtiger Content in den äußeren 10% – Plattformen croppen unterschiedlich

    Meta-Tags

    • og:image mit absoluter URL (nicht relativ!)
    • og:image:width und og:image:height setzen
    • og:image:alt für Accessibility
    • twitter:card auf summary_large_image setzen

    Technisch

    • HTTPS obligatorisch – HTTP-Images werden blockiert
    • Cache-Header setzen (Cache-Control: public, max-age=31536000)
    • Keine Redirects – OG-Image-URL muss direkt zum Bild führen
    • CDN nutzen – schnelle Ladezeiten für Crawler

    Häufige Fehler bei Vibe-Coding-Projekten

    1. react-helmet-async allein reicht nicht

    react-helmet-async setzt die Tags client-seitig. Crawler sehen sie trotzdem nicht. Du brauchst immer Pre-Rendering.

    2. Relative Bild-URLs

    <!-- ❌ Falsch -->
<meta property="og:image" content="/images/preview.jpg" />

<!-- ✅ Richtig -->
<meta property="og:image" content="https://example.com/images/preview.jpg" />

    3. Kein Twitter-Card Fallback

    Twitter/X liest og:image, aber bevorzugt twitter:image. Setze beide:

    <meta property="og:image" content="https://example.com/og.jpg" />
<meta name="twitter:image" content="https://example.com/og.jpg" />
<meta name="twitter:card" content="summary_large_image" />

    4. OG-Image wird gecacht

    LinkedIn und Facebook cachen OG-Images aggressiv. Nach Änderungen musst du den Cache manuell invalidieren:

    Unsere Implementierung: till-freitag.com

    Auf unserer eigenen Website nutzen wir exakt diese Strategie:

    1. react-helmet-async setzt OG-Tags pro Seite im React-Code
    2. Playwright SSG rendert alle Seiten vorab – OG-Tags sind im statischen HTML
    3. Statische OG-Images in WebP für Blog-Artikel aus dem Asset-Registry
    4. Absolute URLs über eine zentrale BASE_URL Konfiguration

    Ergebnis: Jeder geteilte Link zeigt ein perfektes Preview-Bild auf LinkedIn, Twitter und WhatsApp.

    Quick-Win: OG-Image in 5 Minuten

    Wenn du sofort starten willst, hier der minimale Ansatz:

    1. Erstelle ein 1200×630px Bild mit deinem Brand
    2. Lege es in /public/og-image.jpg
    3. Füge in index.html ein:
    <meta property="og:image" content="https://deine-domain.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://deine-domain.com/og-image.jpg" />

    Das ist kein Ersatz für dynamische OG-Images – aber deutlich besser als nichts.

    Nächste Schritte

    OG-Images sind nur ein Teil des SEO-Puzzles für Vibe-Coding-Projekte. Der vollständige Stack umfasst Pre-Rendering, Schema-Markup und Edge Delivery.

    → Vibe Coding SEO Guide: Der komplette Überblick → JSON-LD Schema für SPAs automatisieren → Lovable → GitHub → Vercel: Der Production-Workflow

    👉 Kostenloses SEO-Audit für dein Vibe-Coding-Projekt →

    TeilenLinkedInWhatsAppE-Mail

    Related Articles

    Google Search Console Dashboard mit Performance-Graphen und Coverage Reports
    April 14, 20264 min

    Google Search Console für Vibe-Coding-Projekte: Setup, Debugging & Indexierung

    Deine Lovable-App ist live auf Vercel – aber Google indexiert nichts? So richtest du die Search Console ein, debuggst Cr…

    Read more
    Rakete aus Code-Elementen startet durch Suchergebnisseiten mit Lighthouse Score 100
    April 14, 20265 min

    Vibe Coding & SEO: Warum KI-generierte Apps unsichtbar bleiben – und wie wir das lösen

    Lovable, Bolt, v0 – Vibe Coding Tools erzeugen SPAs, die Google nicht sieht. Unser Playbook macht sie SEO-ready: SSG, Sc…

    Read more
    Pipeline-Diagramm mit drei Stationen: Lovable, GitHub, Vercel
    April 14, 20264 min

    Lovable → GitHub → Vercel: Der komplette Deployment-Flow für SEO-ready Apps

    Lovable generiert die App, GitHub versioniert den Code, Vercel liefert mit < 50ms TTFB aus. Dieser Guide zeigt den kompl…

    Read more
    Headless Browser rendert SPA-Seiten als statisches HTML für Suchmaschinen
    April 14, 20265 min

    Playwright SSG Tutorial: So machst du Lovable Apps für Google sichtbar

    SPAs sind für Suchmaschinen unsichtbar. Mit Playwright kannst du jede Lovable App in statisches HTML rendern – automatis…

    Read more
    AI Website Builder Vergleich – Framer, Webflow AI, Wix AI, Durable und Lovable-Stack im SEO-Test
    April 10, 20265 min

    AI Website Builder im Vergleich: Framer vs. Webflow AI vs. Wix AI vs. Durable vs. Lovable-Stack

    Fünf Wege zur Website im SEO-Vergleich: Framer, Webflow AI, Wix AI, Durable – und der Lovable + GitHub + Vercel-Stack. W…

    Read more
    Lovable vs. Bolt vs. v0 – Welcher AI Web Builder passt zu dir?
    February 24, 20264 min

    Lovable vs. Bolt vs. v0 – Welcher AI Web Builder passt zu dir?

    Lovable, Bolt.new oder v0? Wir vergleichen die drei beliebtesten AI Web Builder – mit ehrlicher Einschätzung, Preisen un…

    Read more
    Vernetzte Schema-Knoten als leuchtender Graph auf dunklem Hintergrund
    April 14, 20265 min

    JSON-LD Schema für SPAs automatisieren: Structured Data ohne Backend

    SPAs haben keine Structured Data – und Google zeigt keine Rich Snippets. Dieses Tutorial zeigt, wie du JSON-LD Schemas i…

    Read more
    Futuristische Code-Editor-Fenster mit Turquoise- und Blue-Akzenten auf dunklem Hintergrund
    March 10, 20266 min

    Wir sind keine Webagentur – und das ist der Punkt

    Ihr sucht eine Webagentur? Dann seid ihr bei uns falsch. Ihr sucht jemanden, der euer digitales Problem löst? Dann seid …

    Read more
    Gegenüberstellung von No-Code-Bausteinen und klassischem Custom-Code auf geteiltem Bildschirm
    June 25, 20252 min

    No-Code vs. Custom Development – Wann reicht was? (Entscheidungshilfe 2026)

    No-Code, Vibe Coding oder Custom Development? Wir zeigen, wann welcher Ansatz sinnvoll ist – mit konkreten Beispielen un…

    Read more