Vollständiger Leitfaden zu Meta-Tags & Open Graph für AI-Suche

Was sind Meta-Tags?

Meta-Tags sind Code-Snippets in Ihrem HTML, die Ihren Seiteninhalt beschreiben. Sie sind für Besucher unsichtbar, aber für Suchmaschinen und AI-Plattformen sichtbar. Betrachten Sie sie als Etiketten, die erklären, worum es auf Ihrer Seite geht.

Für GEO-Optimierung helfen Meta-Tags AI-Engines, Ihren Content-Kontext, Zweck und die Anzeige beim Teilen zu verstehen. Ordnungsgemäße Meta-Tags verbessern die Auffindbarkeit und Präsentation Ihres Contents.

Wesentliche Meta-Tags

Meta-Beschreibung

Eine kurze Zusammenfassung Ihres Seiteninhalts. Erscheint in Suchergebnissen und AI-Engine-Antworten. 150-160 Zeichen sind ideal.

<meta name="description" content="Learn how to optimize your website for AI search engines with Bloffee's complete GEO optimization platform. Improve your content for ChatGPT, Claude, and other AI tools." />

Best Practices: Schreiben Sie einzigartige Beschreibungen für jede Seite. Fügen Sie primäre Keywords natürlich ein. Machen Sie es überzeugend und genau.

Title-Tag

Ihr Seitentitel erscheint in Browser-Tabs, Suchergebnissen und beim Teilen. 50-60 Zeichen empfohlen. Fügen Sie Ihre Marke und Haupt-Keyword ein.

<title>Complete Guide to Meta Tags & Open Graph</title>

Canonical-URL

Teilt Suchmaschinen die bevorzugte Version Ihrer Seite mit. Verhindert Duplicate-Content-Probleme. Wesentlich für GEO.

<link rel="canonical" href="https://geo-score.online/learn/technical/meta-tags-complete" />

Robots-Meta-Tag

Steuert, wie Suchmaschinen und AI-Bots mit Ihrer Seite interagieren. Verwenden Sie "index, follow", um vollen Zugriff zu erlauben.

<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />

Open-Graph-Tags

Open-Graph-Tags steuern, wie Ihr Content beim Teilen in sozialen Medien erscheint. Ursprünglich von Facebook erstellt, jetzt von vielen Plattformen einschließlich AI-Tools verwendet.

Vollständiges Open-Graph-Beispiel

<meta property="og:title" content="Complete Guide to Meta Tags" />
<meta property="og:description" content="Master meta tags and Open Graph for GEO optimization." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://geo-score.online/learn/technical/meta-tags-complete" />
<meta property="og:image" content="https://geo-score.online/images/meta-tags-guide.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Bloffee" />
<meta property="og:locale" content="en_US" />
<meta property="article:published_time" content="2025-01-10T00:00:00.000Z" />
<meta property="article:modified_time" content="2025-01-10T12:00:00.000Z" />
<meta property="article:author" content="Bloffee" />

Open-Graph-Bild-Anforderungen

Ihr og:image ist entscheidend. Es erscheint, wenn Content geteilt wird. Befolgen Sie diese Spezifikationen:

Empfohlene Größe: 1200 x 630 Pixel
Mindestgröße: 600 x 314 Pixel
Maximale Dateigröße: 8 MB
Format: JPG oder PNG
Seitenverhältnis: 1,91:1

Twitter-Card-Tags

Twitter Cards funktionieren ähnlich wie Open Graph, sind aber spezifisch für Twitter/X. Sie verbessern, wie Ihre Links auf der Plattform erscheinen.

Twitter-Card-Beispiel

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@bloffee" />
<meta name="twitter:creator" content="@bloffee" />
<meta name="twitter:title" content="Complete Guide to Meta Tags" />
<meta name="twitter:description" content="Master meta tags and Open Graph for GEO." />
<meta name="twitter:image" content="https://geo-score.online/images/meta-tags-guide.jpg" />

Twitter-Card-Typen

summary: Kleines quadratisches Bild-Thumbnail
summary_large_image: Großes Banner-Bild (empfohlen)
app: Für mobile App-Promotions
player: Für Video-/Audio-Content

Erweiterte Meta-Tags für GEO

Autoreninformationen

Helfen Sie AI-Engines, Content-Urheberschaft und Autorität zu verstehen.

<meta name="author" content="Bloffee Team" />
<link rel="author" href="https://geo-score.online/about" />

Sprache und Locale

Geben Sie Content-Sprache für internationale Websites an.

<html lang="en">
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="nl_NL" />
<meta property="og:locale:alternate" content="fr_FR" />

Charset und Viewport

Wesentliche technische Tags für ordnungsgemäßes Rendering.

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Vollständige Meta-Tags-Vorlage

Verwenden Sie diese Vorlage als Ausgangspunkt für alle Ihre Seiten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Primary Meta Tags -->
  <title>Your Page Title | Brand Name</title>
  <meta name="title" content="Your Page Title | Brand Name">
  <meta name="description" content="Clear description of your page content in 150-160 characters.">
  <meta name="author" content="Your Name or Company">
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
  <link rel="canonical" href="https://yoursite.com/page-url">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://yoursite.com/page-url">
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="Clear description for social sharing.">
  <meta property="og:image" content="https://yoursite.com/image.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name" content="Your Brand">
  <meta property="og:locale" content="en_US">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="https://yoursite.com/page-url">
  <meta name="twitter:title" content="Your Page Title">
  <meta name="twitter:description" content="Clear description for Twitter.">
  <meta name="twitter:image" content="https://yoursite.com/image.jpg">
</head>
<body>
  <!-- Your content -->
</body>
</html>

Ihre Meta-Tags testen

Testen Sie Meta-Tags immer vor der Veröffentlichung:

Meta-Tags-Schnelltipps

•Schreiben Sie einzigartige Meta-Beschreibungen für jede Seite
•Halten Sie Titel unter 60 Zeichen
•Verwenden Sie hochwertige Bilder für og:image (1200x630px)
•Fügen Sie immer Canonical-URLs hinzu
•Testen Sie mit Debugging-Tools vor der Veröffentlichung
•Aktualisieren Sie og:image bei Redesign oder Rebranding

Meta-Tags & Open Graph