# Link-Vorschau & OpenGraph-Tester – Wie Google, WhatsApp und LinkedIn URLs darstellen

> **Autor:** Lukas Kopischke (Lead Software-Engineer, Düsseldorf)
> **Kanonische URL:** https://lukiluki.me/garden/link-preview
> **Markdown-Endpunkt:** https://lukiluki.me/garden/link-preview.md
> **Kategorie:** UI & Design Systems | **Tags:** OpenGraph, Meta-Tags, Social-Cards, SERP-Snippet, Next.js
> **Veröffentlicht:** 2026-10-26 | **Aktualisiert:** 2026-10-26
> **Zusammenfassung:** Schneller Link-Vorschau-Tester: Prüfe OpenGraph-Tags, Vorschaubilder und Zeichenlängen deiner URL live für Google, WhatsApp, LinkedIn sowie Slack.

---
Du teilst einen frisch veröffentlichten Artikel bei WhatsApp, LinkedIn oder im Team-Slack – doch statt des geplanten Vorschaubildes erscheint nur ein grauer Kasten, der Titel bricht mitten im wichtigsten Wort ab oder die Plattform zeigt hartnäckig eine veraltete Überschrift von letzter Woche. Wer das vorab prüfen will, landet im Netz meist auf überladenen Marketing-Portalen mit Login-Zwang.

Messenger und soziale Netzwerke laden beim Einfügen einer Adresse lediglich die ersten Kilobyte des statischen Server-HTMLs herunter, führen kein Browser-JavaScript aus und werten die Meta-Angaben im `<head>` nach einer festen Fallback-Kette aus (`og:*` vor `twitter:*` vor `<title>`). Nur wenn dort eine öffentlich erreichbare, absolute `https://`-Bildadresse und plattformgerechte Textlängen stehen, entsteht eine saubere Vorschaukarte; bei Seiten hinter Logins oder bereits zwischengespeicherten URLs greift jede reine HTML-Prüfung zu kurz.

> **Merksatz:**
> Link-Crawler sind keine vollständigen Browser: Was nicht sofort im ersten Server-HTML als absoluter Meta-Tag im Seitenkopf steht, existiert für WhatsApp, LinkedIn und Slack nicht.

## Wie Messenger- und Such-Crawler deinen Seitenkopf auslesen

Sobald jemand einen Link in ein Chatfenster kopiert, startet im Hintergrund das sogenannte Unfurling (Automatischer Abruf einer verlinkten URL durch den Server oder Client eines Messengers, um aus den Meta-Tags eine visuelle Vorschaukarte mit Titel, Bild und Quelle zu erzeugen.). Grundlage dafür ist das 2010 eingeführte Open Graph Protocol (Standardisiertes Vokabular aus HTML-Meta-Tags (z. B. property='og:title', 'og:image'), mit dem Webseiten ihre Darstellung beim Teilen in sozialen Medien und Messengern steuern.).

In der Praxis scheitern Vorschaukarten fast immer an vier technischen Hürden, die im normalen Desktop-Browser unsichtbar bleiben:

1. **Relative statt absoluter Bildpfade:** Im Browser funktioniert `<img src="/banner.png">`, weil der Browser die aktuelle Domain ergänzt. Viele Link-Scraper verlangen bei `<meta property="og:image" content="...">` laut Spezifikation jedoch zwingend eine vollständige Adresse inklusive Protokoll (`https://deine-domain.de/banner.png`). Fehlt sie, bleibt das Bildfeld leer.
2. **Clientseitig nachgeladene Meta-Tags (SPA-Falle):** Setzt eine reine Single-Page-Application den Seitentitel erst im Browser per JavaScript (`document.title = ...`), erhält der Messenger-Bot nur die leere HTML-Hülle der Startseite. Für zuverlässige Vorschauen müssen Meta-Tags bereits beim Server-Rendering oder statischen Build im `<head>` stehen.
3. **Zu große Bilddateien oder inkompatible Formate:** WhatsApp bricht den Bilder-Download häufig ab, wenn das `og:image` deutlich größer als **300 bis 600 KB** ist oder als SVG ausgeliefert wird (SVG wird von fast keinem Social-Crawler als Vorschaubild gerendert – nutze immer **PNG, JPEG oder WebP** in `1200 × 630 Pixel`).
4. **Späte Meta-Tags hinter riesigen Inline-Styles:** Viele Crawler lesen aus Sicherheits- und Kostengründen nur den Anfang des HTML-Dokuments (oft die ersten 64 bis 150 KB). Stehen riesige Inline-Skripte oder Base64-Schriften *vor* den `og:`-Tags, bricht der Parser vorher ab.

In Next.js (App Router) vermeidest du relative Pfade automatisch, indem du im Root-Layout einmalig `metadataBase` hinterlegst:

```typescript
// app/layout.tsx – Sorgt in Next.js automatisch für absolute https://-Pfade bei og:image
import type { Metadata } from "next";

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://beispiel.de";

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: {
    default: "Produktname – Klare Funktionsbeschreibung",
    template: "%s | Produktname",
  },
  description:
    "Prägnante Zusammenfassung in 120 bis 155 Zeichen für Suchmaschinen und Messenger-Vorschauen.",
  openGraph: {
    type: "website",
    locale: "de_DE",
    siteName: "Produktname",
    images: [
      {
        url: "/og-default.png", // wird dank metadataBase zu https://beispiel.de/og-default.png aufgelöst
        width: 1200,
        height: 630,
        alt: "Übersicht der Anwendung",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
  },
};
```

## Welche Regeln gelten auf Google, WhatsApp, LinkedIn und Slack?

| Plattform | Genutzte Haupt-Tags | Optimales Bildmaß & Limit | Sichtbare Textlänge (Richtwert) | Besonderheit & Cache-Verhalten |
| :--- | :--- | :--- | :--- | :--- |
| **Google Suche** | `<title>`, `<meta name="description">`, `canonical` | Seiten-Favicon (`≥ 48×48 px`) + ggf. Artikelbild | Titel ~55–60 Z. (~600 px), Beschreibung ~145–160 Z. | Google ignoriert die Meta-Description häufig und zieht eigene Textstellen passend zur Suchanfrage |
| **WhatsApp** | `og:title`, `og:description`, `og:image` | `1200 × 630 px` (PNG/JPG), **unter 300 KB** halten | Titel ~65 Z., Beschreibung ~90 Z. (2 Zeilen) | Vorschau wird direkt auf dem Gerät des **Absenders** vor dem Abschicken erzeugt |
| **LinkedIn** | `og:title`, `og:image` | `1200 × 627 px` (`1.91:1`), max. 5 MB (kein SVG!) | Titel ~70 Z.; **Beschreibung im Feed ausgeblendet** | Cacht alte Vorschauen ca. 7 Tage lang; manueller Reset über den *LinkedIn Post Inspector* |
| **Slack & Discord** | `og:site_name`, `og:title`, `og:description`, `og:image` | `1200 × 630 px` + `twitter:card="summary_large_image"` | Titel ~75 Z., Beschreibung ~140 Z. | Ohne `summary_large_image` rendern manche Kanäle nur ein winziges Vorschaubild am rechten Rand |

  #### Empfohlen (Do): Robuste Vorschau-Architektur
* Ein festes Format von **1200 × 630 Pixeln** (`1.91:1`) als komprimiertes PNG oder JPEG unter **300 KB** ausliefern
    * Das wichtigste Thema in die **ersten 45 Zeichen** des Titels schreiben, damit Mobilgeräte den Kern nicht abschneiden
    * Wichtigen Text im Vorschaubild mittig platzieren (mindestens 80 Pixel Sicherheitsabstand zum Rand gegen App-Zuschnitte)
  #### Vermeiden (Don't): Typische Stolpersteine
* Keine `.svg`-Dateien als `og:image` verlinken – LinkedIn, WhatsApp und Slack verweigern dafür die Bildvorschau
    * Sich nicht darauf verlassen, dass Google deine `metaDescription` wörtlich übernimmt; der sichtbare Seitenanfang bleibt entscheidend (siehe [GEO-Leitfaden](/garden/geo))
    * Keine geänderten Bilder unter exakt demselben Dateinamen ohne Versionsparameter (`?v=2`) ausliefern, wenn die alte URL schon geteilt wurde

> **Warum sich eine bereits geteilte Vorschau nicht sofort aktualisiert**
> Hast du einen Tippfehler im Titel behoben, zeigt LinkedIn oder Slack beim erneuten Einfügen derselben URL oft trotzdem den alten Stand. Das liegt nicht an deiner Webseite, sondern am Zwischenspeicher der Plattform. Hänge zum sofortigen Gegenprüfen testweise `?v=2` an die Adresse an oder stoße im offiziellen *LinkedIn Post Inspector* einen erzwungenen Neuabruf an.

## Prüfpunkte vor dem Teilen einer neuen Seite

- [ ] **Server-HTML ohne JavaScript prüfen:** Stehen `<title>`, `og:title`, `og:description` und `og:image` bereits im ersten HTML-Dokument (prüfbar per `curl -sL https://deine-url.de | head -n 50` oder oben im Live-Prüfer)?
- [ ] **Bild-Format und Dateigröße kontrollieren:** Antwortet die `og:image`-URL mit HTTP `200`, nutzt `PNG`/`JPEG` (kein `SVG`) und bleibt für schnelle Mobilnetze und WhatsApp unter ~300 KB?
- [ ] **LinkedIn-Tauglichkeit ohne Beschreibungstext testen:** Ergibt deine Karte auch dann sofort Sinn, wenn wie bei LinkedIn ausschließlich Bild, Titel und Domainname zu sehen sind?

## Quellen und nächste Schritte

* **The Open Graph Protocol (Offizielle Spezifikation)** – *Grundlegende Meta-Properties und strukturierte Bild-Attribute*: [ogp.me](https://ogp.me/)
* **Google Search Central** – *Titel-Links und Snippets in Google-Suchergebnissen steuern*: [developers.google.com/search/docs/appearance/snippet](https://developers.google.com/search/docs/appearance/snippet)
* **LinkedIn Engineering / Post Inspector** – *Spezifikationen und Cache-Invalidierung für geteilte URLs*: [www.linkedin.com/post-inspector](https://www.linkedin.com/post-inspector/)
* **Next.js App Router Documentation** – *Metadata Files, `metadataBase` und `opengraph-image` Generierung*: [nextjs.org/docs/app/building-your-application/optimizing/metadata](https://nextjs.org/docs/app/building-your-application/optimizing/metadata)
* **Weiterführend im Digital Garden:** Lies [Webseiten für KI optimieren (GEO)](/garden/geo), wie neben klassischen Vorschau-Crawlern auch KI-Antwortsysteme deine Metadaten und `JSON-LD` auslesen, oder [Frontend-Performance](/garden/performance-optimization) für schnelle Server-Antwortzeiten beim Link-Abruf.

---
*Quelle: [Lukas Kopischke – Digital Garden](https://lukiluki.me/garden/link-preview) | Vollständiger Index: [llms.txt](https://lukiluki.me/llms.txt)*