Open-Graph-Analyse

Wie diese Prüfung funktioniert

Scanaris sucht im <head> deiner Seite drei Open-Graph-Tags: og:title, og:description und og:image. Sind alle drei mit Inhalt da, gibt es nichts zu sagen. Fehlt eins, öffnet es einen informativen Befund, der nennt, welche; fehlen alle drei, sagt der Befund direkt, dass die Seite kein Open Graph hat. Er ist informativ, kostet also keine Punkte: Es ist keine Sicherheits- oder Indexierungslücke, sondern eine verpasste Gelegenheit bei jedem Teilen deiner Seite.

Warum das wichtig ist

Wenn jemand deinen Link in WhatsApp, X, LinkedIn, Slack, Discord, iMessage oder Telegram einfügt, besucht die App die URL, liest diese Tags und baut die Vorschaukarte: großes Bild, Titel und Beschreibung. Ohne sie erscheint die Karte ohne Bild, mit der rohen URL oder einem beliebigen Textfetzen der Seite. Der Unterschied bei den Klicks zwischen einem Link mit Karte und einem ohne ist groß, vor allem auf dem Handy, wo die Karte den ganzen Bildschirm füllt. Und das Bild, das du wählst, ist für viele der erste Eindruck deiner Marke.

So behebst du es

<meta property="og:title" content="Sicherheitsscanner für KI-gebaute Apps">
<meta property="og:description" content="Scanne deine Website in 60 Sekunden und bekomme jeden Fehler mit Lösung.">
<meta property="og:image" content="https://deinedomain.de/og/home.png">
<meta property="og:url" content="https://deinedomain.de/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

• Das Bild kommt als absolute HTTPS-URL, 1200 mal 630 Pixel, als JPG oder PNG und unter 1 MB, damit es jede Plattform akzeptiert. Ein Markenhintergrund, der Seitentitel in groß und das Logo: Das ist die Formel, die funktioniert.
• Eines pro Seite, nicht überall dasselbe. Ein Artikel mit seiner Schlagzeile im Bild wird öfter geteilt als einer mit dem generischen Bild der Website. Nuxt hat ein Modul, das diese Bilder aus einer Vorlage erzeugt; Next.js macht es mit einer Datei opengraph-image.tsx in jeder Route.
• Nuxt: useSeoMeta({ ogTitle, ogDescription, ogImage, twitterCard: 'summary_large_image' }). Next.js: metadata.openGraph und metadata.twitter. WordPress: Yoast und Rank Math erzeugen sie pro Beitrag aus dem Beitragsbild.
• twitter:card ist das einzige eigene Tag, das X braucht; für Titel, Beschreibung und Bild nutzt es die og:-Tags, wenn es keine eigenen findet.

Die Plattformen cachen die Karte beim ersten Besuch einer URL. Nach dem Ändern der Tags forderst du im Sharing-Debugger von Facebook, im Post Inspector von LinkedIn oder im Validator von X ein neues Crawlen an; WhatsApp und Telegram erneuern sie nach einer Weile von selbst.

Prüf, ob es behoben ist

curl -s https://deinedomain.de | grep -oE '<meta (property|name)="(og:|twitter:)[^"]+" content="[^"]*"'
curl -s -o /dev/null -w "%{http_code} %{content_type}\n" "$(curl -s https://deinedomain.de | grep -oE 'og:image" content="[^"]+"' | cut -d'"' -f3)"

Der erste Befehl listet die Tags; der zweite lädt das Bild herunter und sollte 200 mit einem Bildtyp liefern. Füge die URL dann in einen Chat mit dir selbst ein und schau dir die Karte an.

Häufige Fragen

Ich habe schon Titel und Meta-Description. Reichen die nicht?

Manche Plattformen nutzen sie als Ersatz, aber keine zeigt ein Bild ohne og:image, und das Bild bringt den Sprung bei den Klicks. Die og:-Tags erlauben dir außerdem einen anderen Titel als bei Google, kürzer und direkter.

Zählt das fürs SEO?

Nicht direkt: Google nutzt Open Graph nicht fürs Ranking. Es zählt dafür, dass Leute teilen und klicken, was in Links und Traffic mündet. Was Google tatsächlich liest, prüft SEO-Metadaten.

Mein Bild erscheint in manchen Apps abgeschnitten.

Jede Plattform schneidet auf ihr Seitenverhältnis zu. Mit 1200 mal 630 und dem wichtigen Inhalt zentriert, mit Rand an den Kanten, sieht es überall gut aus. Vermeide kleinen Text in den Ecken.