ForHosting KIT · Websites auslesen & überwachen

Open-Graph-Tags für soziale Netzwerke erstellen

Dieser Open-Graph-Tag-Generator verwandelt vier wesentliche Angaben für soziale Netzwerke in einen sauberen HTML-Block für den Kopfbereich Ihrer Seite.

● BetaKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Geben Sie Titel, Beschreibung, Bild-URL und Objekttyp an; Sie erhalten sowohl das vollständige Markup als auch jede Tag-Zeile einzeln. Das Werkzeug prüft, ob das Bild HTTP oder HTTPS verwendet, entfernt äußere Leerzeichen und maskiert Zeichen, die ein HTML-Attribut beschädigen könnten. Das Ergebnis ist deterministisch, für Vorlagen und Redaktionssysteme geeignet und über die API für $0.002 pro Anfrage verfügbar.

Wählen Sie Inhalte, die die geteilte Seite beschreiben

Gehen Sie von der Seite selbst aus, nicht von dem sozialen Netzwerk, in dem sie erscheinen könnte. Der Open-Graph-Titel sollte den konkreten Artikel, das Produkt, Profil oder die Zielseite bezeichnen. Die Beschreibung sollte einen nachvollziehbaren Grund zum Öffnen nennen. Formulieren Sie beide Texte präzise und eigenständig, denn ein geteilter Link kann ohne den Kontext Ihrer Website erscheinen. Der Generator verlangt ausgefüllte Werte und entfernt Leerzeichen an deren Rändern, schreibt Werbetexte jedoch weder um noch kürzt oder erfindet er sie. So behalten Sie die redaktionelle Kontrolle und erhalten in automatisierten Abläufen vorhersehbare Ergebnisse. Obwohl die zulässigen Grenzen verschiedene Plattformpraktiken abdecken, ist knapper Text meist leichter zu erfassen und wird seltener abgeschnitten. Platzieren Sie wichtige Aussagen nicht ausschließlich am Ende einer langen Beschreibung. Metadaten und sichtbarer Seiteninhalt sollten zudem übereinstimmen; die Vorschau darf nichts versprechen, was die Zielseite nicht bietet.

Geben Sie ein öffentliches Webbild und den passenden Typ an

Die Bild-URL muss eine absolute Adresse mit dem Schema http oder https sein. Relative Pfade, lokale Dateien, Daten-URLs, FTP-Adressen und fehlerhafte URLs werden abgelehnt, da soziale Crawler die Ressource über das Web erreichen müssen. Die Prüfung bestätigt lediglich Format und Protokoll: Sie lädt das Bild nicht herunter, misst keine Abmessungen, untersucht keinen Medientyp und beweist nicht, dass ein externer Crawler Zugriff erhält. Verwenden Sie eine stabile Produktions-URL statt einer vorübergehenden Vorschauadresse. Stellen Sie außerdem sicher, dass Anmeldung, Robot-Regeln oder Hotlink-Schutz die Dienste zur Kartenerstellung nicht blockieren. Das Feld type wird zum Wert von og:type. website eignet sich häufig für allgemeine Seiten, article für redaktionelle Inhalte. Der Generator akzeptiert jeden nicht leeren Typ und unterstützt dadurch auch Namensräume und kompatible Erweiterungen.

Binden Sie die Tags ein und prüfen Sie das veröffentlichte Ergebnis

Die Antwort enthält im Feld html vier durch Zeilenumbrüche getrennte meta-Elemente sowie im Array tags dieselben Elemente einzeln. Fügen Sie sie über das Routen-Metadatensystem, die Servervorlage oder den statischen Build-Schritt in den Kopfbereich des Dokuments ein. Die Reihenfolge bleibt fest: Titel, Beschreibung, Bild und Typ. Kaufmännische Und-Zeichen, spitze Klammern, Anführungszeichen und Apostrophe werden maskiert, damit Eingaben das Markup nicht beschädigen. Maskieren Sie den zurückgegebenen Block beim Einsetzen in eine HTML-Vorlage nicht erneut. Untersuchen Sie nach der Veröffentlichung den tatsächlich ausgelieferten Quelltext und achten Sie auf genau einen maßgeblichen Wert je Eigenschaft; Themes, Plugins und Framework-Vorgaben erzeugen mitunter konkurrierende Tags. Testen Sie die URL anschließend mit den Debuggern der relevanten Plattformen. Gültiges Markup liefert klare Daten, doch Zuschnitt, Kürzung, Cache und Darstellung bestimmt weiterhin das jeweilige Netzwerk.

Anwendungsfälle

Veröffentlichen Sie einen Artikel

Verwandeln Sie freigegebenen Titel, Kurztext, Beitragsbild und Typ in einen sofort einsetzbaren Social-Metadatenblock.

Erstellen Sie Produktseiten

Erzeugen Sie während eines statischen oder serverseitigen Builds einheitliches Open-Graph-Markup aus strukturierten Datensätzen.

Vereinheitlichen Sie die CMS-Ausgabe

Geben Sie Redaktionen einen deterministischen Formatierer, der Bildprotokolle prüft und jeden Wert sicher maskiert.

Häufige Fragen

Welche Tags werden erzeugt?

Das Ergebnis enthält die meta-Elemente og:title, og:description, og:image und og:type.

Warum wurde meine Bild-URL abgelehnt?

Das Bild benötigt eine gültige absolute URL mit dem Schema http oder https; relative Pfade und andere Schemas sind unzulässig.

Prüft der Generator, ob das Bild existiert?

Nein. Er stellt keine Netzwerkanfrage und prüft nur Format und Protokoll, nicht Verfügbarkeit, Abmessungen oder Crawler-Zugriff.

Kann ich einen anderen Open-Graph-Typ als website oder article verwenden?

Ja. Jeder nicht leere Typ innerhalb der festgelegten Grenze ist zulässig, auch Werte kompatibler Open-Graph-Erweiterungen.

Was kostet die API?

Die API kostet $0.002 pro Anfrage. Die Browserversion steht auf dieser Seite kostenlos zur Verfügung.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/web/open-graph-generate

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

curl -X POST https://api.kit.forhosting.com/web/open-graph-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title":"A Practical Guide to Urban Gardening","description":"Learn how to grow herbs and vegetables in a small city space.","image_url":"https://example.com/images/urban-garden.jpg","type":"article"}'

const res = await fetch("https://api.kit.forhosting.com/web/open-graph-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "title": "A Practical Guide to Urban Gardening",
    "description": "Learn how to grow herbs and vegetables in a small city space.",
    "image_url": "https://example.com/images/urban-garden.jpg",
    "type": "article"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/open-graph-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "title": "A Practical Guide to Urban Gardening",
    "description": "Learn how to grow herbs and vegetables in a small city space.",
    "image_url": "https://example.com/images/urban-garden.jpg",
    "type": "article"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/open-graph-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"title":"A Practical Guide to Urban Gardening","description":"Learn how to grow herbs and vegetables in a small city space.","image_url":"https://example.com/images/urban-garden.jpg","type":"article"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"title":"A Practical Guide to Urban Gardening","description":"Learn how to grow herbs and vegetables in a small city space.","image_url":"https://example.com/images/urban-garden.jpg","type":"article"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/open-graph-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "title": "A Practical Guide to Urban Gardening",
  "description": "Learn how to grow herbs and vegetables in a small city space.",
  "image_url": "https://example.com/images/urban-garden.jpg",
  "type": "article"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.open_graph_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`timeout_sec`	30
`max_crawl_pages`	25

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Vollständige KIT-Dokumentation lesen →