Dokumentation Kernwerkzeuge Open Graph Meta Generator

API-Referenz

Dieses Dokument enthält technische Details zum Open Graph Meta Generator und zu seiner zugrunde liegenden Funktionsweise.

Tool-Überblick

Der Open Graph Meta Generator ist ein clientseitiges Tool, das HTML-Meta-Tags für die Protokolle Open Graph und Twitter Card erzeugt. Es verarbeitet Benutzereingaben und gibt korrekt formatierte HTML-Meta-Tags aus.

Eingabeparameter

Allgemeine Informationen

Parameter	Typ	Erforderlich	Beschreibung	Beispiel
`pageType`	string	Ja	Inhaltstyp	`"website"`, `"article"`, `"book"`
`title`	string	Nein	Seitentitel	`"My Awesome Website"`
`description`	string	Nein	Seitenbeschreibung	`"A great website for developers"`
`url`	string	Nein	Seiten-URL	`"https://example.com/page"`
`siteName`	string	Nein	Name der Website	`"My Company"`

Bildeinstellungen

Parameter	Typ	Erforderlich	Beschreibung	Beispiel
`imageUrl`	string	Nein	Bild-URL	`"https://example.com/image.jpg"`
`imageAlt`	string	Nein	Alternativtext zum Bild	`"Company logo"`
`imageWidth`	string	Nein	Bildbreite in Pixeln	`"1200"`
`imageHeight`	string	Nein	Bildhöhe in Pixeln	`"630"`

Twitter-Einstellungen

Parameter	Typ	Erforderlich	Beschreibung	Beispiel
`twitterCardType`	string	Ja	Typ der Twitter Card	`"summary_large_image"`
`twitterSite`	string	Nein	Twitter-Handle der Website	`"@example"`
`twitterCreator`	string	Nein	Twitter-Handle des Autors	`"@author"`

Ausgabeformat

Das Tool erzeugt HTML-Meta-Tags im folgenden Format:

Open-Graph-Tags

<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:alt" content="Image description" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter-Tags

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Inhaltstypen

Unterstützte Seitentypen

Typ	Beschreibung	Typische Verwendung
`website`	Allgemeine Website-Seiten	Startseite, Über-uns-Seite, Kontakt
`article`	Blogposts und Nachrichtenartikel	Blogposts, Nachrichten, Tutorials
`book`	Buchseiten und E-Books	Buchlisten, E-Book-Seiten
`profile`	Persönliche oder geschäftliche Profile	Nutzerprofile, Unternehmensseiten
`music`	Musiktitel und Alben	Musik-Streaming, Albumseiten
`video`	Videoinhalte	Videoseiten, Filmübersichten

Twitter-Card-Typen

Typ	Beschreibung	Am besten geeignet für
`summary`	Basis-Karte mit Thumbnail	Blogposts, Nachrichten
`summary_large_image`	Karte mit großem Bild	Visuelle Inhalte, Produkte
`app`	Promotion für mobile Apps	App-Store-Seiten
`player`	Video- oder Audioinhalte	Videoseiten, Podcasts

Datenverarbeitung

HTML-Escaping

Alle Benutzereingaben werden automatisch escaped, um XSS-Angriffe zu verhindern:

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

URL-Validierung

URLs werden validiert, um sicherzustellen, dass sie korrekt formatiert sind:

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

Längenbeschränkungen für Inhalte

Das Tool setzt empfohlene Längenlimits durch:

Titel: maximal 60 Zeichen
Beschreibung: maximal 160 Zeichen
URL: muss ein gültiges URL-Format haben

Browser-Kompatibilität

Unterstützte Browser

Browser	Version	Unterstützung
Chrome	60+	Vollständig unterstützt
Firefox	55+	Vollständig unterstützt
Safari	12+	Vollständig unterstützt
Edge	79+	Vollständig unterstützt

Erforderliche Features

Unterstützung für ES6+
Unterstützung für die Clipboard API
Unterstützung für Local Storage
Unterstützung für CSS Grid

Performance-Aspekte

Clientseitige Verarbeitung

Die gesamte Verarbeitung erfolgt im Browser
Keine Serveranfragen erforderlich
Sofortige Generierung und Vorschau
Geringer Speicherbedarf

Caching

Generierte Meta-Tags werden im Browser-Speicher gecacht
Verlaufsdaten werden lokal gespeichert
Keine externen Abhängigkeiten

Fehlerbehandlung

Fehler bei der Eingabevalidierung

// Example error handling
if (!title.trim()) {
  showError("Title is required");
  return;
}

if (url && !isValidUrl(url)) {
  showError("Please enter a valid URL");
  return;
}

Fehler beim Laden von Bildern

// Handle image loading errors
function handleImageError(event) {
  const img = event.target;
  img.style.display = "none";
  showWarning("Image failed to load");
}

Integrationsbeispiele

WordPress-Integration

// Add to functions.php
function add_open_graph_tags() {
    if (is_single()) {
        $title = get_the_title();
        $description = get_the_excerpt();
        $image = get_the_post_thumbnail_url();

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
        echo '<meta property="og:image" content="' . esc_url($image) . '" />';
    }
}
add_action('wp_head', 'add_open_graph_tags');

React-Integration

// React component example
function OpenGraphMeta({ title, description, image, url }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
    </>
  );
}

Next.js-Integration

// Next.js Head component
import Head from "next/head";

function MyPage() {
  return (
    <Head>
      <meta property="og:title" content="My Page Title" />
      <meta property="og:description" content="My page description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
    </Head>
  );
}

Testen und Validieren

Facebook: developers.facebook.com/tools/debug
Twitter: cards-dev.twitter.com/validator
LinkedIn: linkedin.com/post-inspector

Automatisierte Tests

// Example test for meta tag generation
describe("Open Graph Meta Generator", () => {
  test("generates correct meta tags", () => {
    const input = {
      pageType: "website",
      title: "Test Page",
      description: "Test description",
    };

    const output = generateMetaTags(input);

    expect(output).toContain('<meta property="og:type" content="website" />');
    expect(output).toContain('<meta property="og:title" content="Test Page" />');
  });
});

Fehlerbehebung

Häufige Probleme

Bilder werden nicht angezeigt: Prüfen Sie URL-Format und Erreichbarkeit
Tags funktionieren nicht: Validieren Sie sie mit Social-Media-Debuggern
Inhalte werden abgeschnitten: Prüfen Sie die Zeichenlimits
Cache-Probleme: Aktualisieren Sie den Cache mit Debugger-Tools

Debug-Modus

Aktivieren Sie den Debug-Modus, um detaillierte Informationen zu sehen:

// Enable debug logging
localStorage.setItem("debug", "true");

Zukünftige Erweiterungen

Geplante Funktionen

Unterstützung für strukturierte Daten nach Schema.org
Mehrsprachige Unterstützung
Bulk-Generierung
API-Endpunkt für serverseitige Generierung
Erweiterte Bildoptimierung
Analytics-Integration

Mitwirken

So tragen Sie zum Open Graph Meta Generator bei:

Forken Sie das Repository
Erstellen Sie einen Feature-Branch
Nehmen Sie Ihre Änderungen vor
Fügen Sie Tests hinzu
Senden Sie einen Pull Request

Support

Bei technischem Support oder Fragen:

Lesen Sie die FAQ
Sehen Sie sich die Examples an
Kontaktieren Sie den Support über die Hauptwebsite

War diese Seite hilfreich?

On this page

Tool-Überblick Eingabeparameter Ausgabeformat Inhaltstypen Datenverarbeitung Browser-Kompatibilität Performance-Aspekte Fehlerbehandlung Integrationsbeispiele Testen und Validieren Fehlerbehebung Zukünftige Erweiterungen Support