SEO·Claude Code
SEOClaude Code

Open Graph + Twitter Card Tags setzen — Claude Code

Wenn deine URL in Slack, WhatsApp, LinkedIn oder X eingefügt wird, wird die Preview-Card aus Open-Graph-Tags gebaut. Fehlende Tags = nackte URL ohne Bild — 3-5x geringere Klickrate.

rocket_launch

In Claude Code fixen

Anthropics offizieller Terminal-Coding-Agent

Claude Code kann zuerst den ganzen Codebase greppen, die Änderung planen, dann jede betroffene Datei editieren. Prompt unten in deinen Claude Code-Chat einfügen und der Fix rollt in einem Rutsch über das ganze Projekt aus.

Anderes Tool? Wähle deinen Stack:

LovableCursorBoltv0ReplitWindsurfClaude CodeBase44

Der Prompt für Claude Code

Diesen Text exakt so in deinen Claude Code-Chat kopieren und einfügen.

Run Claude Code in the project root and make these exact changes, scanning the whole codebase first:

Add Open Graph tags

1. Add <meta property="og:title">, <meta property="og:description"> and <meta property="og:image"> in <head>.
2. Use a 1200x630 image for og:image and host it under a stable URL.
3. Mirror the same values into Twitter Card meta tags (twitter:title, twitter:description, twitter:image).

Warum das wichtig ist

Etwa die Hälfte des Traffics auf SaaS- und Content-Sites kommt aus Links in Messaging-Apps, Slack-Channels, X, LinkedIn-Posts und AI-Chats. Jede dieser Oberflächen rendert eine Preview-Card. Kein og:image = keine Preview = weggescrollt.

Open Graph ist das eine Format das all diese Previews steuert. Einmal im HTML-Head setzen, und Facebook, LinkedIn, Slack, WhatsApp, Telegram, Discord und Signal nutzen es. Twitter/X verwendet ein sehr ähnliches Format (twitter:card) — OG-Werte spiegeln, fertig.

AI-Chat-Tools (ChatGPT, Claude) laden OG-Tags ebenfalls wenn sie Link-Cards in ihren Antworten rendern. Fehlendes og:image lässt deine Site dort genauso verlassen wirken.

So nutzt du diesen Prompt in Claude Code

  1. 1. Dein Claude Code-Projekt öffnen.
  2. 2. Prompt oben mit Copy-Button kopieren.
  3. 3. In Claude Code-Chat einfügen und senden.
  4. 4. Diff reviewen, Änderungen akzeptieren, neu deployen.
  5. 5. Fix mit der Checkliste unten verifizieren.

Typische Fehler vermeiden

  • error_outlineog:image mit relativer URL — viele Scraper verlangen absolute URLs.
  • error_outline1024×1024 quadratisches Bild nutzen — LinkedIn und Slack schneiden es ab.
  • error_outlineVergessen die Bild-Datei in /public zu shippen, dann 404t og:image.
  • error_outlineDasselbe og:image auf jeder Seite — als Fallback OK, aber Artikelseiten verdienen eigene.
  • error_outlineNur og:* setzen ohne twitter:* — X fällt auf OG zurück, aber das Card-Format differiert; ohne `twitter:card` = kleines Layout.

Wie du prüfst ob der Fix geklappt hat

  • check_circleURL in https://www.opengraph.xyz/ einfügen — muss Title, Description und korrektes 1200×630-Bild rendern.
  • check_circleAuf https://cards-dev.twitter.com/validator testen — muss eine summary_large_image-Card zeigen.
  • check_circleURL in Slack, LinkedIn und WhatsApp einfügen — jede rendert die Preview.
  • check_circle`curl -s URL | grep "og:image"` — bestätigt dass der Tag server-seitig rendert, nicht erst nach JS.

Häufige Fragen

Korrekte og:image-Grösse?expand_more
1200×630 Pixel, PNG oder JPEG, unter 1 MB. Passt bei LinkedIn, Slack, WhatsApp und Facebook ohne Zuschnitt.
Brauche ich og:* und twitter:*?expand_more
X fällt bei den meisten Feldern auf og:* zurück, aber `twitter:card` muss `summary_large_image` sein für das grosse Layout. Zur Sicherheit spiegeln.
Kann ich og:images pro Seite automatisch generieren?expand_more
Ja — Next.js hat `ImageResponse` für dynamische OG-Images, Vercel OG ist verbreitet. Statische Sites: Script das ein Template mit dem Seitentitel rendert.

Alle 34 Prompts passend zu deiner Claude Code-Site?

Pantra scannt deine Site in 10 Sekunden, erkennt den Stack und generiert genau die Prompts die passen — nur die du brauchst.

Site scannen

Ähnliche Claude Code-Prompts

Bilder

1200×630 Open-Graph-Bild setzen — Claude Code

Prompt um ein richtig dimensioniertes og:image zu erstellen und zu referenzieren — Link-Previews auf LinkedIn, Slack, WhatsApp, X sehen professionell aus.

SEO

Einen einzigartigen <title>-Tag pro Seite setzen — Claude Code

Copy-Paste-Prompt um auf jede Seite einen einzigartigen, keyword-relevanten <title>-Tag zu setzen — in Lovable, Cursor, Bolt, v0, Replit, Windsurf, Claude Code oder Base44.

SEO

Einzigartige Meta-Descriptions auf jede Seite — Claude Code

Prompt um einzigartige 50-160-Zeichen-Meta-Descriptions auf jede Seite zu setzen — steuert das graue Snippet in Google-Ergebnissen.

SEO

H1-Tag fixen — genau eine pro Seite — Claude Code

Prompt der genau eine H1 pro Seite mit dem Hauptkeyword durchsetzt — für Lovable, Cursor, Bolt, v0, Replit, Windsurf, Claude Code, Base44.

Mehr im Glossar erfahrenarrow_forward