Social-Media-Vorschau

Sehen Sie, wie Ihre Seite beim Teilen auf Google, Facebook, X, LinkedIn, WhatsApp, Slack, Discord oder Pinterest aussieht, korrigieren Sie, was abgeschnitten wird, und kopieren Sie fertige Open-Graph-Tags zum Einfügen.

1. Angaben zu Ihrer Seite

Füllen Sie das Formular aus oder importieren Sie die Angaben aus dem Code einer Seite.

0 / 60
0 / 155
Seitentyp
Vorschaubild

JPG, PNG, WebP oder GIF. Das ausgewählte Bild dient nur der Vorschau: Geben Sie für den Code auch seine Online-Adresse an.

2. Vorschauen

Eine Simulation für jede Plattform: Das tatsächliche Ergebnis kann leicht abweichen, die Kürzungen kommen der Realität aber sehr nahe.

Google

Eexample.comhttps://example.com › …
SeitentitelHier erscheint die Beschreibung der Seite.

Facebook

example.comSeitentitelHier erscheint die Beschreibung der Seite.

X

Seitentitel
Von example.com

LinkedIn

Seitentitelexample.com

WhatsApp

SeitentitelHier erscheint die Beschreibung der Seite.example.com
https://example.com10:24

Slack

example.comSeitentitelHier erscheint die Beschreibung der Seite.

Discord

example.comSeitentitelHier erscheint die Beschreibung der Seite.

Pinterest

SeitentitelEexample.com

Pinterest zeigt das ganze Bild, ohne es zuzuschneiden. Ein Bild im Hochformat (2:3, zum Beispiel 1000 × 1500 px) nimmt dort mehr Platz ein, wird anderswo aber zugeschnitten.

3. Prüfungen und Code

Was Sie korrigieren sollten, dann die Tags zum Einfügen in Ihre Seite.

  • ProblemTitel fehltOhne Titel leitet jedes Netzwerk selbst einen aus der Seite ab.
  • ProblemBeschreibung fehltDie Netzwerke greifen dann auf einen Textausschnitt der Seite zurück, oft keine gute Wahl.
  • ProblemKein BildLinks ohne Bild werden deutlich seltener angeklickt. Planen Sie ein Bild mit 1200 × 630 px ein.
  • Zu verbessernSeitenadresse fehltog:url gibt die offizielle Adresse der Seite an, damit geteilte Links zusammengefasst werden.

Fügen Sie ihn in den head-Bereich Ihrer Seite ein.

Füllen Sie das Formular aus, um den Code zu erstellen.

Über die Social-Media-Vorschau

Jedes Mal, wenn jemand Ihre Seite teilt, zeigt das Netzwerk eine Karte mit Titel, Beschreibung und Bild. Dieses Tool zeigt Ihnen diese Karten schon vor der Veröffentlichung und schreibt die Tags, aus denen sie entstehen.

So sehen Ihre Links gut aus

Wenn Ihre Seite geteilt wird, zeigt jedes Netzwerk eine Karte mit Titel, Beschreibung und Bild. Diese Angaben stammen aus den Open-Graph-Tags im Code der Seite. Ohne sie bleibt die Karte leer oder zeigt Unpassendes.

Die richtigen Längen

Google kürzt einen Titel bei etwa 60 Zeichen und eine Beschreibung bei etwa 155. Ein Bild mit 1200 × 630 Pixeln (1,91:1) sieht überall gut aus: Platzieren Sie das Wichtigste in der Mitte, da manche Plattformen es zuschneiden. Pinterest bevorzugt ein Bild im Hochformat.

Fertiger Code zum Einfügen

Kopieren Sie die HTML-Tags für den head-Bereich Ihrer Seite oder das Metadaten-Objekt für eine Next.js-Website. Nach der Veröffentlichung behalten die Netzwerke die alte Vorschau manchmal noch einige Tage im Cache.

Es wird nichts hochgeladen

Die Vorschauen werden in Ihrem Browser simuliert. Ihr Bild und Ihre Texte werden nirgendwohin gesendet. Die einzige Anfrage stellt Ihr Browser selbst, wenn er eine von Ihnen eingegebene Bildadresse lädt.

Entwicklung

JWT-Decoder

Header, Payload und Datumsangaben eines JWT lesen und seine Signatur prüfen.

Entwicklung

SVG zu HTML

SVG in HTML, JSX und React konvertieren.