Meta-Tags und Open Graph

SEO-Tags mit Vorschau

Keine Datenbank: AIMRAN speichert weder deine Dateien noch Texte oder Ergebnisse

Was ist Meta-Tags und Open Graph?

Meta-Tags sind unsichtbare Codezeilen, die Google und sozialen Netzwerken sagen, wie deine Seite dargestellt werden soll: Titel, Beschreibung und Bild, die bei der Suche oder beim Teilen des Links erscheinen.

Gib die Daten deiner Seite ein und sieh, wie sie in den Google-Ergebnissen und beim Teilen auf Facebook, LinkedIn oder X aussieht. Dann kopierst du das HTML und fügst es in deine Website ein.

So funktioniert es

  1. Gib Titel und Beschreibung ein und behalte den Zeichenzähler im Blick.
  2. Ergänze URL, Bild, Name der Website und Sprache.
  3. Wähle Seitentyp, Twitter-Card und optional die Theme-Farbe.
  4. Prüfe die Vorschau in Google und beim Teilen.
  5. Kopiere das HTML und füge es in den <head> deiner Seite ein.

Vorteile

Technische Details

Erzeugt <title>, meta description, link rel="canonical" und optional theme-color. Der Open-Graph-Block enthält og:type (website oder article), og:title, og:description, og:url, og:image, og:site_name und og:locale und ergänzt og:image:width 1200 und og:image:height 630, wenn die Karte mit großem Bild gewählt ist. Der X/Twitter-Block enthält twitter:card (summary oder summary_large_image), twitter:title, twitter:description, twitter:image und twitter:site, wobei das @ automatisch ergänzt wird. Alle Werte werden für HTML maskiert, leere Tags werden weggelassen. Die Zähler empfehlen Titel mit 30 bis 60 Zeichen und Beschreibungen mit 70 bis 160; die Google-Vorschau kürzt an diesen Grenzen.

Häufige Fragen

Was sind Meta-Tags?

HTML-Tags im <head> einer Seite, die Suchmaschinen und sozialen Netzwerken ihren Inhalt beschreiben. Die wichtigsten sind der Titel und die Meta-Description.

Wie viele Zeichen sollte der SEO-Titel haben?

Etwa 30 bis 60 Zeichen, damit Google ihn vollständig anzeigt. Die Meta-Description bis etwa 160.

Was ist Open Graph?

Ein von Facebook entwickeltes Protokoll, das festlegt, welcher Titel, welche Beschreibung und welches Bild beim Teilen eines Links in Netzwerken wie Facebook, LinkedIn oder WhatsApp erscheinen.

Welche Größe sollte das og:image haben?

Empfohlen sind 1200 × 630 Pixel (Seitenverhältnis 1,91:1), damit es beim Teilen groß und scharf erscheint.

Was ist der Unterschied zwischen summary und summary_large_image?

summary zeigt ein kleines Vorschaubild neben dem Text; summary_large_image zeigt auf X (Twitter) ein großes Bild über dem Titel.

Weitere Tools: Entwickler