Contents
Open Graph und Twitter Cards: der vollständige Leitfaden
Wie Open-Graph-Metadaten die Link-Vorschau steuern, worin sie sich von Google-Snippets unterscheiden und wie Sie Titel, Bilder und Beschreibungen prüfen.
Wenn ein Nutzer einen Link auf Facebook, Telegram, LinkedIn oder WhatsApp teilt, holt sich die Plattform die Daten nicht willkürlich von Ihrer Website. Sie liest spezielle Meta-Tags im <head> der Seite. Das ist das Open Graph Protocol, das Facebook 2010 entwickelt hat.
Ohne OG-Markup raten soziale Plattformen Titel, Beschreibung und Bild selbst, und das Ergebnis ist unberechenbar. Mit sauberem Markup bestimmen Sie das Aussehen der Vorschau und maximieren die CTR geteilter Links.
<head> werden zu einer Karte mit Titel, Beschreibung und Bild.Open Graph wirkt sich nicht direkt auf die Suchrankings aus. Es ist ein Werkzeug für Social-Traffic. Eine Teilung mit attraktiver Vorschau erhöht aber die Reichweite und kann indirekt den Linkjuice und den markenbezogenen Traffic beeinflussen.
Was ist Open Graph
Das Open Graph Protocol (OGP) ist eine Reihe von Meta-Tags im <head> einer HTML-Seite. Sie legen fest, wie die Seite beim Teilen in sozialen Netzwerken dargestellt wird. Das Protokoll nutzt den Namensraum og: und wird von allen großen Plattformen unterstützt: Facebook, LinkedIn, Telegram, WhatsApp, Pinterest und Slack.
Zentrale OG-Tags
| Tag | Pflicht | Beschreibung |
|---|---|---|
| og:title | Ja | Seitentitel in der Vorschau (bis zu 60–70 Zeichen) |
| og:description | Empfohlen | Beschreibung (bis zu 155–160 Zeichen) |
| og:image | Ja | URL des Vorschaubilds (min. 200×200 px, empf. 1200×630 px) |
| og:url | Ja | Kanonische URL der Seite |
| og:type | Ja | Objekttyp: website, article, product |
| og:site_name | Empfohlen | Name der Website (z. B. 'seohead.tech') |
| og:locale | Empfohlen | Sprache der Seite: en_US, ru_RU |
| og:image:width | Empfohlen | Breite des Bildes in Pixeln |
| og:image:height | Empfohlen | Höhe des Bildes in Pixeln |
| og:image:alt | Empfohlen | Alt-Text für das Vorschaubild |
Beispiel für die Umsetzung im Code:
html
<!-- Full OG tag set for an article -->
<head>
<meta property="og:title" content="Open Graph and Twitter Cards: complete guide" />
<meta property="og:description" content="How to set up Open Graph markup for maximum CTR when sharing on social media" />
<meta property="og:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph and Twitter Cards guide" />
<meta property="og:url" content="https://seohead.tech/en/blog/open-graph" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="seohead.tech" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ru_RU" />
<!-- Additional for article -->
<meta property="article:published_time" content="2026-05-17T00:00:00Z" />
<meta property="article:author" content="https://seohead.tech/en/about" />
<meta property="article:section" content="On-Page SEO" />
</head>og:image — Anforderungen und Größen
Das OG-Bild ist das wichtigste Element einer Vorschau. Es nimmt mindestens 80 % der Kartenfläche ein und entscheidet, ob Nutzer auf den Link klicken. Bei falscher Größe oder falschem Format beschneidet Facebook das Bild oder verweigert die Anzeige.
| Plattform | Empfohlene Größe | Minimum | Format |
|---|---|---|---|
| Facebook / Meta | 1200×630 px | 600×315 px | JPG, PNG, GIF, WebP |
| Twitter / X | 1200×600 px | 300×157 px | JPG, PNG, WebP, GIF |
| 1200×627 px | 200×200 px | JPG, PNG, GIF | |
| Telegram | 1280×720 px (16:9) | beliebig | JPG, PNG, WebP |
| 1200×630 px | 300×200 px | JPG, PNG |
Universallösung: 1200×630 px im WebP-Format. Das Seitenverhältnis 1,91:1 wird auf allen großen Plattformen korrekt dargestellt. Die Dateigröße darf bis zu 8 MB betragen (Limit von Facebook), optimal sind weniger als 300 KB.
Twitter Cards
Twitter (X) unterstützt OG-Tags, hat aber auch ein eigenes Markup: Twitter Cards. Die Plattform liest zuerst die twitter:-Tags und greift dann auf die og:-Tags zurück. Empfohlen ist, beide Sets anzugeben.
| Twitter-Card-Tag | OG-Entsprechung | Beschreibung |
|---|---|---|
| twitter:card | — | Kartentyp: summary, summary_large_image, app, player |
| twitter:title | og:title | Titel (bis zu 70 Zeichen) |
| twitter:description | og:description | Beschreibung (bis zu 200 Zeichen) |
| twitter:image | og:image | URL des Bildes |
| twitter:image:alt | og:image:alt | Alt-Text für das Bild |
| twitter:site | — | @Benutzername des Accounts der Website |
| twitter:creator | — | @Benutzername des Autors der Inhalte |
Beispiel für die Umsetzung im Code:
html
<!-- Twitter Cards markup -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@seohead_tech" />
<meta name="twitter:creator" content="@seohead_tech" />
<meta name="twitter:title" content="Open Graph and Twitter Cards: complete guide" />
<meta name="twitter:description" content="Setting up OG markup for maximum CTR when sharing" />
<meta name="twitter:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta name="twitter:image:alt" content="Open Graph guide" />OG-Objekttypen
| og:type | Wann verwenden | Zusätzliche Tags |
|---|---|---|
| website | Startseite, Leistungsseiten, Landingpages | — |
| article | Blogbeiträge, News, Leitfäden | article:published_time, article:author, article:section |
| product | Produktseiten im Online-Shop | product:price:amount, product:price:currency |
| profile | Autorenseiten, Nutzerprofile | profile:first_name, profile:last_name |
| video | Seiten mit Videoinhalten | video:duration, video:release_date |
Umsetzung in Next.js
In Next.js 13+ (App Router) setzen Sie OG-Tags bequem über die Metadata API. Dieser typisierte Ansatz kommt ohne manuell geschriebene HTML-Meta-Tags aus.
typescript
// app/[locale]/blog/[slug]/page.tsx
import type { Metadata } from 'next';
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const article = await getArticle(params.slug);
return {
title: article.titleEn,
description: article.leadEn,
openGraph: {
title: article.titleEn,
description: article.leadEn,
url: `https://seohead.tech/en/blog/${params.slug}`,
siteName: 'seohead.tech',
images: [
{
url: `https://seohead.tech${article.coverImage}`,
width: 1200,
height: 630,
alt: article.coverImageAltEn,
},
],
locale: 'en_US',
type: 'article',
publishedTime: article.date,
authors: ['https://seohead.tech/en/about'],
section: article.tagEn,
},
twitter: {
card: 'summary_large_image',
title: article.titleEn,
description: article.leadEn,
images: [`https://seohead.tech${article.coverImage}`],
creator: '@seohead_tech',
},
};
}Validierung und Fehlersuche
| Tool | Plattform | URL |
|---|---|---|
| Facebook Sharing Debugger | Facebook, Instagram, WhatsApp | developers.facebook.com/tools/debug/ |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ | |
| Open Graph Checker | universell | opengraph.xyz |
| Telegram | Telegram | Link einfach in einen Chat einfügen, die Vorschau erscheint sofort |
Facebook speichert OG-Tags im Cache. Wenn Sie das Markup aktualisiert haben, die Vorschau sich aber nicht ändert, nutzen Sie den Facebook Sharing Debugger (Schaltfläche „Scrape Again“). Der Telegram-Cache aktualisiert sich automatisch. Für ein erzwungenes Neuladen hängen Sie
?v=2 an die URL an.FAQ
Beeinflusst Open Graph das Google-Ranking?
Direkt nicht. Google nutzt OG-Tags nicht für das Ranking. Indirekt schon: Eine attraktive Vorschau erhöht die Teilungen, was zu mehr Links und markenbezogenem Traffic führen kann.
Was ist wichtiger: og:title oder <title>?
Für die Suche zählt
<title>, für soziale Netzwerke og:title. Beide können sich unterscheiden: Für die Suche optimieren Sie den Titel auf Keywords (50–60 Zeichen), für soziale Netzwerke auf Klicks und Emotionen (bis zu 70 Zeichen). Beide Tags müssen vorhanden sein.Warum zeigt Telegram keine Vorschau?
Drei Hauptgründe: 1) Das Bild ist per HTTPS nicht erreichbar oder für Bots gesperrt. 2) og:image fehlt oder die URL ist ungültig. 3) Die Seite ist für Crawler gesperrt (noindex, robots.txt, Cloudflare Bot Fight Mode). Prüfen Sie die Erreichbarkeit des Bildes mit
curl -A 'TelegramBot' URL.Brauche ich Twitter Cards, wenn ich OG bereits eingerichtet habe?
Viele Plattformen greifen auf Open Graph zurück. Plattformspezifische Tags bieten dort, wo sie unterstützt werden, zusätzliche Steuerung. Testen Sie eine echte geteilte URL: Kein Tag-Set garantiert, wie jede Plattform eine Vorschau zwischenspeichert oder darstellt.
Wie generiere ich OG-Bilder dynamisch?
Next.js unterstützt die dynamische Erstellung von OG-Bildern über
ImageResponse aus next/og. Das Bild entsteht serverseitig im Format PNG/WebP auf Basis einer JSX-Vorlage. So erhalten Sie für jeden Artikel eine eigene Vorschau, ohne Bilder manuell vorzubereiten.Check it with SpiderHead
Free and local: run the audit on your own machine.
