Open Graph und Twitter Cards, Link-Vorschau in Telegram, WhatsApp, Facebook (2026)

open graph5 Min. Lesezeit25. Juli 2026

Autor: DevStudio.it

TL;DR

Wenn jemand eine URL in Telegram, WhatsApp, Facebook, LinkedIn oder X einfügt, baut die App eine Karte aus Open Graph (og:*) und, für X, Twitter Cards. Ohne korrekte Meta-Tags: zufälliges Favicon, abgeschnittener Titel oder kein Bild. Kartenstandard: 1200×630 (~1.91:1), absolute HTTPS-URL, og:title, og:description, og:image, og:url, og:type. In Next.js App Router setzen Sie das in generateMetadata / metadata. Deploy auf DevStudioIT Cloud; dynamische OG für Cases über Branchly. Unten: Tag-Checkliste, Next.js-Code, Crawler-Cache-Fallen und Tests.

Für wen das ist

  • Firmen, die Blog und Landings in Social / Chat teilen
  • Next.js-App-Router-Entwickler ohne WordPress-SEO-Plugins
  • Marketer mit „hässlicher Vorschau“ trotz schöner Site
  • Mehrsprachige Teams (pl/en/de) mit Title/Description pro Locale

Keywords (SEO)

open graph nextjs, twitter cards link vorschau, og:image 1200x630, facebook whatsapp telegram meta tags, social share card 2026, generateMetadata open graph

Was der Crawler liest (und was nicht)

Messenger führen Ihren Client-JS nicht im Nutzerbrowser aus, sie machen HTTP GET und parsen HTML (oft frühe Bytes / SSR). Deshalb:

  • Meta müssen im ersten HTML stehen (Server Components / SSG), nicht nur per useEffect
  • Bild öffentlich erreichbar (nicht hinter Auth, nicht localhost)
  • Große JS-only-SPAs ohne SSR = leere oder falsche Previews
Plattform Primäre Tags Hinweise
Facebook / Messenger og:* Debugger erzwingt Rescrape
WhatsApp og:title, og:description, og:image aggressiver Cache
Telegram og:* manchmal auch twitter:*
LinkedIn og:* Post Inspector
X (Twitter) twitter:card, twitter:image… summary_large_image

Minimales Tag-Set

<meta property="og:type" content="website" />
<meta property="og:site_name" content="DevStudio.it" />
<meta property="og:locale" content="de_DE" />
<meta property="og:url" content="https://devstudioit.com/de/blog/slug" />
<meta property="og:title" content="Kartentitel, max ~60–70 Zeichen" />
<meta property="og:description" content="1–2 Sätze, ~110–160 Zeichen" />
<meta property="og:image" content="https://devstudioit.com/og-share.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Bildbeschreibung" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Kartentitel" />
<meta name="twitter:description" content="Beschreibung" />
<meta name="twitter:image" content="https://devstudioit.com/og-share.jpg" />

Für Blogposts: og:type = article plus optional article:published_time, article:author.

Bildspezifikation 1200×630

Parameter Empfehlung
Größe 1200×630 px (sicherer Standard)
Ratio ~1.91:1
Format JPG oder PNG; WebP scheitert bei manchen Crawlern
Gewicht meist < 1 MB (besser < 300 KB)
Safe Zone Text/Logo in mittleren ~80%, Ränder können croppen
URL absolut https://...

Projekt-Fallback: /og-share.jpg. Pro Post override via Frontmatter ogImage.

Kein 4K-Vollseiten-Screenshot, Crawler skalieren sowieso; Sie verlangsamen nur den Scrape.

Next.js App Router, generateMetadata

import type { Metadata } from 'next';

const BASE = 'https://devstudioit.com';

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>;
}): Promise<Metadata> {
  const { locale, slug } = await params;
  const post = await getPost(locale, slug); // Markdown oder Branchly
  const image = post.ogImage?.startsWith('http')
    ? post.ogImage
    : `${BASE}${post.ogImage ?? '/og-share.jpg'}`;

  const url = `${BASE}/${locale}/blog/${slug}`;

  return {
    title: post.title,
    description: post.description,
    alternates: { canonical: url },
    openGraph: {
      type: 'article',
      locale: locale === 'pl' ? 'pl_PL' : locale === 'de' ? 'de_DE' : 'en_US',
      url,
      siteName: 'DevStudio.it',
      title: post.title,
      description: post.description,
      images: [{ url: image, width: 1200, height: 630, alt: post.title }],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      images: [image],
    },
  };
}

Root-Layout setzt Defaults; Seiten überschreiben. Keine zwei widersprüchlichen og:image im &lt;head&gt;.

Crawler-Cache, Bug-Report Nr. 1

Bild geändert, WhatsApp zeigt noch das alte? Das ist Plattform-Cache, nicht Ihr CDN.

Plattform Tool / Trick
Facebook Sharing Debugger → Scrape Again
LinkedIn Post Inspector → inspect
X Card Validator
WhatsApp oft: ?v=2 anhängen zum Testen; warten oder anderes Gerät
Telegram @webpagebot oder später erneut einfügen

Auf DevStudioIT Cloud langes Cache-Control für OG-Bilder erst wenn final, während Iteration Dateinamen versionieren (og-share-2026-07.jpg).

Dynamische Karten (optional)

Für Cases aus CMS/DB (Branchly):

  1. ogImageUrl am Datensatz speichern
  2. Oder PNG via ImageResponse mit Titel auf Brand-Hintergrund erzeugen

Generierte Karten wirken einheitlich, brauchen aber Plattform-Tests, manche Crawler haben Scrape-Timeouts.

Checkliste vor Publish

  • Absolutes og:image HTTPS, 200 OK
  • Dimensionen stimmen (width/height Meta = echte Pixel)
  • Title ≤ ~70 Zeichen, Description nicht mitten im Wort abgeschnitten
  • og:url = Locale-Canonical
  • Getrennte Title/Description pl/en/de
  • twitter:card = summary_large_image für großes Bild
  • FB Debugger + Einfügen in Telegram/WhatsApp auf öffentlicher Staging-URL

Typografie und Branding auf der 1200×630-Karte

Eine Social Card ist ein Mini-Billboard: in 0,5 s müssen Marke und Thema sitzen. Praxis:

  1. Hintergrund, Brandfarbe oder Foto mit starkem Overlay (Text mobil lesbar)
  2. Logo, klein in der Safe Zone; nicht 40% der Fläche
  3. Titel auf der Grafik, kürzer als HTML-og:title (~6–8 Wörter)
  4. Kein Mini-UI, kein voller Dashboard-Screenshot; ein Motiv wählen
  5. Locale, eigene PL/EN/DE-Grafik, wenn der Titel in die Bitmap gebrannt ist

Für den DevStudio-Blog reicht oft ein Template: Gradient + Titelzeile + Marke. Fallback /og-share.jpg ist besser als fehlendes og:image.

FAQ

Reicht eine siteweite og-share.jpg?

Als Fallback, ja. Für Blog und wichtige Landings oft eigenes Bild (Titel + Branding) für besseren Feed-CTR.

Darf og:image relativ /og-share.jpg sein?

Next.js Metadata API absolutisiert oft, Crawler sind wählerisch. Besser volle https://...-URL.

Open Graph vs. JSON-LD, dasselbe?

Nein. OG = Social Preview. JSON-LD = Google-Verständnis (Organization, BlogPosting). Sie brauchen beides.

Warum zeigt LinkedIn einen anderen Titel als og:title?

Oft eigener Cache oder &lt;title&gt;. Rescrape im Inspector erzwingen; SSR muss aktuelles HTML liefern.

Wollen Sie korrekte Social Cards auf Ihrer Site?

Ähnliche Beiträge

Vertrauenssignale auf der Unternehmenswebsite, Conversion und E-E-A-T 2026
5 Min. Lesezeit
FAQPage-Schema und Rich Results, Wann Google FAQs zeigt (2026)
4 Min. Lesezeit
robots.txt im Next.js App Router, Crawl-Budget und Disallow-Fallen (2026)
4 Min. Lesezeit

Über den Autor

Wir bauen schnelle Websites, Web/Mobile-Apps, KI-Chatbots und Hosting — mit Fokus auf SEO und Conversion.

Alle Beiträge

Empfohlene Links

Von Theorie zu Produktion — Branchly, Hosting-Stack und Referenzen.

Branchly
Datenbank / Plattform
Unsere DB-Plattform und Möglichkeiten.
branchly.cloud öffnen
DevStudioIT Cloud
Hosting & Deployments
Panel für Hosting, Projekte und Deployments.
devstudioit.cloud öffnen
Proof
Portfolio
Reale Projekte und Ergebnisse.
Zum Portfolio

Gefällt euch unser Ansatz? Lasst uns gemeinsam bauen.

Projektkonfiguration starten