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

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.

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:

1// app/layout.tsx – Sorgt in Next.js automatisch für absolute https://-Pfade bei og:image
2import type { Metadata } from "next";
3
4const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://beispiel.de";
5
6export const metadata: Metadata = {
7  metadataBase: new URL(siteUrl),
8  title: {
9    default: "Produktname – Klare Funktionsbeschreibung",
10    template: "%s | Produktname",
11  },
12  description:
13    "Prägnante Zusammenfassung in 120 bis 155 Zeichen für Suchmaschinen und Messenger-Vorschauen.",
14  openGraph: {
15    type: "website",
16    locale: "de_DE",
17    siteName: "Produktname",
18    images: [
19      {
20        url: "/og-default.png", // wird dank metadataBase zu https://beispiel.de/og-default.png aufgelöst
21        width: 1200,
22        height: 630,
23        alt: "Übersicht der Anwendung",
24      },
25    ],
26  },
27  twitter: {
28    card: "summary_large_image",
29  },
30};

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

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
• Google Search Central – Titel-Links und Snippets in Google-Suchergebnissen steuern: developers.google.com/search/docs/appearance/snippet
• LinkedIn Engineering / Post Inspector – Spezifikationen und Cache-Invalidierung für geteilte URLs: 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
• Weiterführend im Digital Garden: Lies Webseiten für KI optimieren (GEO), wie neben klassischen Vorschau-Crawlern auch KI-Antwortsysteme deine Metadaten und JSON-LD auslesen, oder Frontend-Performance für schnelle Server-Antwortzeiten beim Link-Abruf.