Open Graph & Twitter Cards
Wie optimiert man das Erscheinungsbild von geteilten Inhalten in sozialen Netzwerken mit Open Graph Meta-Tags?- Was sind Open Graph Tags?
- Wichtige Open Graph Eigenschaften
- Implementierungsbeispiel
- Twitter Cards
- Open Graph und SEO
- Open Graph Tags testen
Was sind Open Graph Tags?
Open Graph ist ein Protokoll, das ursprünglich von Facebook entwickelt wurde und heute von den meisten sozialen Netzwerken unterstützt wird. Es ermöglicht Websitebetreibern zu kontrollieren, wie ihre Inhalte aussehen, wenn jemand einen Link auf Facebook, LinkedIn, WhatsApp, Telegram oder anderen Plattformen teilt.
Ohne Open Graph Tags bestimmt das soziale Netzwerk selbst, welches Bild und welcher Text aus der Seite extrahiert wird – was oft zu unattraktiven Vorschauen führt. Mit Open Graph Tags haben Sie die volle Kontrolle über Titel, Beschreibung, Vorschaubild und Inhaltstyp.
Wichtige Open Graph Eigenschaften
og:title– Der Titel des Inhalts. Darf vom<title>-Tag abweichen.og:description– Eine kurze Beschreibung.og:image– URL des Vorschaubildes. Empfohlene Grösse: 1200×630 Pixel.og:url– Die kanonische URL der Seite.og:type– Der Inhaltstyp:website,article,product, etc.og:site_name– Der Name der Website.og:locale– Die Sprache des Inhalts (z.B.de_CHfür Deutsch/Schweiz).
Implementierungsbeispiel
Open Graph Tags werden im <head>-Bereich der HTML-Seite als Meta-Tags eingebettet:
<!-- Open Graph Meta-Tags -->
<meta property="og:title" content="Core Web Vitals optimieren – Anleitung">
<meta property="og:description" content="Wie Sie LCP, INP und CLS verbessern und damit Ihr Google-Ranking steigern.">
<meta property="og:image" content="https://suchmaschinenoptimierung.andreasreisch.ch/images/core-web-vitals.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://suchmaschinenoptimierung.andreasreisch.ch/core-web-vitals.html">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Suchmaschinenoptimierung">
<meta property="og:locale" content="de_CH">Twitter Cards
Twitter (jetzt X) nutzt ein eigenes System namens Twitter Cards. Es gibt vier Kartentypen:
- summary – Kleines Vorschaubild links, Titel und Beschreibung rechts
- summary_large_image – Grosses Bild oberhalb von Titel und Beschreibung (am häufigsten genutzt)
- app – Für die Bewerbung von App-Downloads
- player – Für eingebettete Videos und Audio
<!-- Twitter Card Meta-Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Core Web Vitals optimieren">
<meta name="twitter:description" content="Wie Sie LCP, INP und CLS verbessern">
<meta name="twitter:image" content="https://suchmaschinenoptimierung.andreasreisch.ch/images/core-web-vitals.jpg">Open Graph und SEO
Open Graph Tags sind kein direkter Ranking-Faktor für Google. Der Einfluss auf SEO ist jedoch indirekt:
- Höhere Share-Rate – Ansprechende Social-Media-Vorschauen werden häufiger geteilt
- Mehr Traffic – Geteilte Inhalte bringen Besucher zurück auf die Website
- Potenzielle Backlinks – Viral gegangene Inhalte können zu natürlichen Backlinks führen
Open Graph Tags testen
- Facebook Sharing Debugger – Zeigt, wie Facebook die Seite interpretiert und gibt Fehlermeldungen aus.
- LinkedIn Post Inspector – Zeigt die LinkedIn-Vorschau Ihrer Seite.
- Twitter Card Validator – Zeigt die Twitter-Kartenvorschau.
- OpenGraph.xyz – Nützliches unabhängiges Tool zur schnellen Überprüfung aller Open Graph Tags.
Weitere Informationen zu Meta-Tags und Schema Markup finden Sie auf den entsprechenden Seiten dieser Website.