Generator fuer Meta-Tags und Open Graph

Erstellen Sie SEO- und Social-Metadaten mit Live-Vorschauen fuer Google, Facebook, X und LinkedIn. Kopieren Sie HTML oder Next.js-Metadaten direkt weiter.

Meta-Tags konfigurieren

Hinweise
  • Titel: 30 bis 60 Zeichen; Beschreibungen: 70 bis 160 Zeichen
  • og:image: 1200 × 630 px empfohlen (mindestens 600 px breit)
  • fuer Twitter bzw. X funktioniert 1200 × 628 px am besten
Basic
Open Graph
Die Vorschau nutzt zuerst das hochgeladene Bild (nur visuell) und faellt sonst auf og:image zurueck. Der Upload-Button sitzt oberhalb der Vorschaukarten. Hochgeladene Bilder veraendern den generierten Code nicht.
Twitter
Die X- bzw. Twitter-Vorschau zeigt zuerst das hochgeladene Bild, ansonsten die Twitter-Bild-URL und, falls diese leer ist, og:image. Uploads sind nur fuer die Vorschau da und aendern den exportierten Code nicht.
  • Der Titel sollte 30 bis 60 Zeichen haben
  • Die Beschreibung sollte 70 bis 160 Zeichen haben
Facebook-Vorschau
preview
example.com
Ihr Seitentitel
Kurze, klare Zusammenfassung fuer Suche und Social Sharing.
X-Preview
preview
example.com
Ihr Seitentitel
Kurze, klare Zusammenfassung fuer Suche und Social Sharing.
LinkedIn-Vorschau
preview
example.com
Ihr Seitentitel
Kurze, klare Zusammenfassung fuer Suche und Social Sharing.

Generierter Code

Fuegen Sie den Code in den <head> Ihres HTML ein (Server-Template oder statische Datei). Fuer SPAs sollten Sie SSR, SSG oder einen Prerender-Schritt nutzen, damit Social Crawler die Tags verlaesslich sehen.
<!-- Basic Meta Tags -->
<title>Ihr Seitentitel</title>
<meta name="description" content="Kurze, klare Zusammenfassung fuer Suche und Social Sharing.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/your-page">

<!-- Open Graph / Facebook -->
<meta property="og:title" content="Ihr Seitentitel">
<meta property="og:description" content="Kurze, klare Zusammenfassung fuer Suche und Social Sharing.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/your-page">
<meta property="og:site_name" content="Beispielseite">
<meta property="og:image" content="https://vladimirsiedykh.com/api/og">
<meta property="og:image:alt" content="Beschreibender Alt-Text zum Bild">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">
<meta name="twitter:creator" content="@creator">
<meta name="twitter:title" content="Ihr Seitentitel">
<meta name="twitter:description" content="Kurze, klare Zusammenfassung fuer Suche und Social Sharing.">
<meta name="twitter:image" content="https://vladimirsiedykh.com/api/og">
<meta name="twitter:image:alt" content="Beschreibender Alt-Text zum Bild">

Haeufige Fragen

Antworten auf haeufige Fragen zu Open Graph, Twitter Cards, Bildgroessen und dazu, wo der Code in Next.js- oder React-Apps eingeordnet wird.

Im App Router nutzen Sie am besten die Metadata API. Globale Defaults kommen in `app/layout.tsx`, seitenbezogene Werte in die jeweilige Route über `export const metadata` oder `generateMetadata()`. So bleiben Titel, Beschreibungen und Social-Tags sauber an der Route gebunden.

Für verlässliche Open-Graph- und X-Previews ja. Viele Social Crawler verlassen sich auf das initiale HTML und ignorieren rein clientseitige Änderungen. Server Rendering, Static Generation oder ein Prerender-Schritt sorgen dafür, dass die Tags beim Abruf bereits vorhanden sind.

Für Open Graph ist 1200 × 630 Pixel ein solider Standard. Für `summary_large_image` auf X passt ebenfalls etwa 1200 × 628. Wichtig ist nicht nur die Größe, sondern auch, dass das Bild schnell geladen wird und unter einer stabilen URL verfügbar ist.

Der Upload dient nur der visuellen Vorschau im Tool. Im erzeugten Code werden immer die Bild-URLs verwendet, die Sie in den Formularfeldern eingeben. So bleibt die Ausgabe produktionsnah und direkt einsetzbar.

Für die Vorschau im Tool gilt: Upload zur Ansicht zuerst, danach die explizite X-Bild-URL und anschließend die Open-Graph-Bild-URL. Der exportierte Code nutzt immer die Werte aus dem Formular und keine temporären Upload-Dateien.

`summary_large_image` eignet sich für breite, visuelle Vorschauen. `summary` ist kompakter und passt besser zu kleineren, sachlichen Karten. Die Typen `app` und `player` sind spezieller und brauchen zusätzliche Felder, daher sind sie nur in bestimmten Fällen sinnvoll.

Bewertungen

Aktuelle Bewertungen und Rueckmeldungen von Tool-Nutzerinnen und -Nutzern

Wollen Sie Metadaten und SEO sauber im grossen Stil umsetzen?

Ich implementiere korrekte Metadaten in Ihrer Next.js- oder React-App inklusive Validierung, Vorschau und Monitoring, damit alles mit wachsendem Content stabil bleibt.

Bester Start

Projektanfrage senden

Klare Einschätzung und nächster Schritt innerhalb von 24 Stunden

Anfrage starten

Per E-Mail starten

Kurz den Ablauf schildern und schriftlich weitermachen

Kontakt öffnen

Leitfaden anfordern

Kurzer Leitfaden zu Dashboards, Automatisierung und Umsetzungsplanung

Verwandte Ressourcen

Beitraege zu Metadaten, Vorschauen und technischer SEO-Umsetzung