# SERP & Social Vorschau-Studio Zeigt Google SERP (pixelgenaue Titel-Abschneidung Desktop/Mobile), X- und OpenGraph-Karten mit Pre-Launch-SEO-Diagnose > Kanonische Seite: https://elysiatools.com/de/tools/serp-social-preview-studio - **Kategorie:** Development - **Schlagwörter:** serp, seo, vorschau, social cards, og, twitter ## Überblick Gib die Metadaten deiner Seite ein und das Tool rendert drei reale Ziele: 1. Google-SERP-Karte — Titel-Abschneidung auf Desktop (~600px) und Mobile (~920px), berechnet aus realen Arial-Pixelbreiten (string-pixel-width), nicht nur Zeichenanzahl. 2. X-(Twitter)-Karte — Layouts summary und summary_large_image. 3. OpenGraph-Karte — LinkedIn/Facebook-Stil mit empfohlenem og:image-Verhältnis 1.91:1. Zusätzlich läuft eine Pre-Launch-SEO-Diagnose: zu kurzer/langer Titel, Abschneidung pro Gerät, Beschreibungslänge, nicht-escapte Zeichen, Canonical-URL-Gültigkeit, Unterstrich vs. Bindestrich, og:image HTTPS/gültig, Länge von og:description, og:site_name, fehlende twitter:card — plus Hinweise, wenn der Titel auf strukturierte Daten FAQ / HowTo / Product hindeutet. So verwendest du es: - Fülle aus, was du hast; lass den Rest leer, um Lücken zu sehen. - Wähle das Gerät: Desktop, Mobile oder beide. - Nutze die Diagnosetabelle als Launch-Checkliste. ## Eingaben - **Seitentitel** (text): Best Running Shoes 2026 — Tested & Reviewed | RunLab - **Meta-Beschreibung** (textarea): We tested 40 running shoes for comfort, durability, and speed. See our top picks for road, trail, and racing in 2026. - **Canonical-URL** (text): https://example.com/best-running-shoes-2026 - **OpenGraph-Bild-URL** (text): https://example.com/og/running-shoes-1200x630.jpg - **OG-Alt-Beschreibung** (textarea): Same as meta description, or a tailored social copy - **Seitenname** (text): RunLab - **Twitter-Kartentyp** (select) - **Vorschau-Gerät** (select) ## Wann verwenden - Vor dem Veröffentlichen neuer Blogbeiträge oder Landingpages, um die Darstellung in Suchmaschinen und sozialen Netzwerken zu prüfen. - Bei der Optimierung bestehender Meta-Tags, um sicherzustellen, dass Titel und Beschreibungen auf Mobil- und Desktop-Geräten nicht abgeschnitten werden. - Zur Qualitätskontrolle von OpenGraph-Bildern und Twitter-Cards, um eine fehlerfreie Darstellung beim Teilen von Links zu garantieren. ## Funktionsweise - Tragen Sie den Seitentitel, die Meta-Beschreibung und die Canonical-URL in die entsprechenden Eingabefelder ein. - Fügen Sie optional die OpenGraph-Bild-URL hinzu und wählen Sie das gewünschte Vorschau-Gerät sowie den Twitter-Kartentyp aus. - Das Tool berechnet die exakte Pixelbreite des Titels in Arial und rendert sofort die Google-SERP-, X- und OpenGraph-Vorschau. - Überprüfen Sie die automatische Pre-Launch-SEO-Diagnose auf Warnungen wie zu lange Texte, ungültige URLs oder fehlende Social-Media-Tags. ## Anwendungsfälle - Überprüfung der mobilen und Desktop-Darstellung von Google-Suchergebnissen vor dem Content-Launch. - Validierung von OpenGraph-Bild-URLs auf HTTPS-Konformität und das korrekte Seitenverhältnis von 1.91:1. - Erkennung von Formatierungsfehlern wie Unterstrichen in URLs oder unescapten Sonderzeichen in Meta-Beschreibungen. ## Häufig gestellte Fragen ### Wie berechnet das Tool die Abschneidung des Google-Titels? Die Abschneidung basiert auf der tatsächlichen Pixelbreite der Zeichen in der Schriftart Arial (ca. 600px für Desktop und 920px für Mobilgeräte), nicht auf der bloßen Zeichenanzahl. ### Welche Social-Media-Plattformen werden simuliert? Das Tool simuliert X-Karten (Summary und Summary Large Image) sowie OpenGraph-Karten für Plattformen wie Facebook und LinkedIn. ### Was prüft die integrierte SEO-Diagnose? Sie prüft Titellängen, Geräte-Abschneidungen, HTTPS-Gültigkeit der Bild-URL, Canonical-URLs, Sonderzeichen und gibt Hinweise auf strukturierte Daten. ### Warum ist die Angabe einer Canonical-URL wichtig? Die Canonical-URL teilt Suchmaschinen die bevorzugte Version einer Seite mit. Das Tool validiert das Format und prüft auf typische Fehler wie Unterstriche. ### Kann ich das Tool auch ohne OpenGraph-Bild nutzen? Ja, Sie können Felder leer lassen. Die Diagnose weist Sie dann gegebenenfalls auf das Fehlen hin, damit Sie die Lücken vor dem Launch schließen können. ## Ähnliche Tools - [Social-Media-Bildgrößen-Spickzettel](https://elysiatools.com/de/tools/social-media-image-size-cheatsheet): Kuratierte 2026-Referenz der Bildabmessungen für Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest und WeChat, filterbar nach Plattform. - [Batch-Bild-Umbenennen](https://elysiatools.com/de/tools/image-batch-rename): Batch-Umbenennung von Bilddateien mit Mustern, Textersatz, Nummerierung und Groß-/Kleinschreibung. Gibt umbenannte Dateien als ZIP-Download zurück. - [Benutzerdefinierter Faltungskern](https://elysiatools.com/de/tools/image-custom-kernel): Wendet benutzerdefinierten Faltungskern an, indem Sie eigene Matrixwerte für personalisierte Bildeffekte und -verarbeitung definieren - [Bild-Relief-Effekt](https://elysiatools.com/de/tools/image-emboss): Professionelle Relief-Effekte mit einstellbarer Tiefe, Winkel und Lichtrichtung für 3D-Oberflächenerscheinung anwenden - [Verschwommenes-Hintergrund-Bild-Erweiterer](https://elysiatools.com/de/tools/image-extend-blur-background): Erweitert die Bildleinwand mit verschwommenem Hintergrund, perfekt für Portraits, Produktfotos und professionelle Präsentationen - [Verlaufs-Bild-Erweiterer](https://elysiatools.com/de/tools/image-extend-gradient): Erweitert die Bildleinwand mit Verlaufshintergründen für moderne Designeffekte und sanfte Übergänge - [Gaußsche Unschärfe](https://elysiatools.com/de/tools/image-gaussian): Wendet gaußsche Unschärfe für Glättung und Rauschunterdrückung mit präziser Kontrolle an - [Laplace-Operator für Bilder](https://elysiatools.com/de/tools/image-laplacian): Wendet Laplace-Operator für Kantenerkennung, Schärfung und Bildverbesserung mit verschiedenen Kernvarianten an ## Beispiele - [Android Java Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-java): Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Android Kotlin Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-kotlin): Android Kotlin Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung - [Web Rust Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/web-image-processing-rust): Web Rust Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung ## Verwandte Inhalte - [Tools fur Bildformat-Konvertierung und animierten Export](https://elysiatools.com/de/hubs/image-convert): Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub. - [Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung](https://elysiatools.com/de/hubs/image-utility): Bunde Bildbereinigung, Beschneiden, Padding, Rahmen, Batch-Resize/Kompression, Wasserzeichen und visuelle Veredelung in einem Hub fur Asset-Vorbereitung. - [Bildmetadaten-, EXIF- und Datenschutz-Bereinigungs-Tools](https://elysiatools.com/de/hubs/image-metadata): Vergleichen Sie Bildmetadaten-Viewer, EXIF/IPTC/XMP-Inspektoren, Ausrichtungsfixes, Metadaten-Editoren und Datenschutz-Bereinigungstools für Foto-Publishing-Workflows. - [Tools für Bildbereinigung, Größenänderung und Detailverbesserung](https://elysiatools.com/de/hubs/image-cleanup-resize-and-detail-enhancement): Bereiten Sie Bilder mit Orientierungskorrektur, Zuschnitt, Entrauschen, Größenänderung, Schärfen und Stapelkonvertierung vor.