Editoriale Linkvorschau

Editorial OG Card

Ein einheitliches Link-Vorschaubild pro Beitrag. Jede Karte enthält:

• einen oberen Strich mit einem Kicker (Serie oder Rubrik), dem Thema und einer Meta-Zeile (Lesezeit oder Datum),
• die Überschrift in einer großen Serife, als echter Text gesetzt (immer korrekt geschrieben), nur so weit verkleinert wie nötig, mit ein oder zwei Wörtern in der Akzentfarbe,
• eine Autorenzeile mit Initialen oder einem Foto sowie der URL des Beitrags,
• Kunst auf der rechten Seite: eine von vier Blockkompositionen, die aus dem Slug des Beitrags ausgewählt wird (sodass ein Beitrag seine Karte behält), ein von dir gewähltes Bild oder nichts, wobei die Überschrift weiter nach rechts reicht.

Ein Skript liest deine Beiträge in eine cards.json, du überprüfst sie, und ein zweites Skript rendert jede Karte mit dem bereits auf dem Rechner vorhandenen Chrome. Nichts zu installieren.

Was du brauchst

• Node.js 18 oder neuer.
• Chrome, Chromium oder Edge. Das Skript findet sie an den üblichen Orten; setze CHROME_PATH, falls nicht.
• Internetzugang während des Renderns für das Google-Fonts-Stylesheet (Instrument Serif, Inter, IBM Plex Mono). Siehe Fehlerbehebung zum Offline-Rendern.

Dieses Skill-Ordner ist <skill> unten: der Ordner, in dem sich diese SKILL.md befindet.

Schritte

1. cards.json erstellen

Aus Markdown-Beiträgen (Astro, Hugo, Jekyll, Eleventy, Next.js MDX, alles mit Frontmatter):

node <skill>/scripts/from-posts.mjs content/blog --site=deinblog.example --path=/blog/ --out-dir=public/og

Es liest jede .md-, .mdx- und .markdown-Datei im Ordner und erstellt eine Karte pro Beitrag, die neuesten zuerst. Beiträge mit draft: true werden übersprungen. Aus dem Frontmatter entnimmt es:

Kartenfeld	Von
slug	slug, sonst permalink, sonst der Dateiname (oder Ordner bei index.md), ohne führendes Datum
title	og_title, sonst title
kicker	kicker, sonst series, sonst --kicker=..., sonst „Artikel“
topic	topic, sonst die erste category, sonst der erste Tag
meta	reading_time, sonst die Wortanzahl bei 230 Wörtern pro Minute: „8 Min. Lesezeit“
author	author (Text, oder name darunter), sonst --author=...
url	--site + --path + Slug, unter dem Autor angezeigt
out	<out-dir>/<slug>.png; ohne --out-dir neben dem Beitrag als <name>.og.png (oder og.png neben einer index.md)

Führe es erneut aus, wenn Beiträge hinzugefügt werden: Bereits in cards.json enthaltene Karten behalten deine Bearbeitungen, neue Beiträge werden hinzugefügt und entfernte gelöscht.

Von Hand für Seiten, die kein Markdown sind (Newsletter, Landing Pages, Dokumentationsabschnitte), schreibe dieselbe Struktur selbst:

{
  "theme": { "paper": "#131313", "ink": "#f2ede4", "accent": "#ff7a45" },
  "defaults": { "kicker": "Night Desk", "author": "Ines Varga" },
  "cards": [
    {
      "slug": "ausgabe-41",
      "title": "Warum jede Redaktion leise ihr *CMS neu aufbaut*",
      "topic": "Ausgabe 41",
      "meta": "Okt 2026",
      "url": "nightdesk.example/41",
      "tags": ["#medien", "№ 41"]
    }
  ]
}

defaults füllt jedes Feld, das eine Karte auslässt.

2. Karten bearbeiten

Öffne cards.json und gehe die Titel durch:

• Setze die ein oder zwei Wörter, die den Punkt tragen, in *Sternchen*; sie werden kursiv in der Akzentfarbe gesetzt. "Ein Designsystem *in einer Woche* ausliefern".
• Überschriften lesen sich am besten unter 70 Zeichen; das Limit liegt bei 110. Ab etwa 80 wird die Schrift kleiner. Kürze mit og_title im Frontmatter des Beitrags oder direkt in cards.json.

Alle Felder, die eine Karte haben kann:

Feld	Was es ist	Limit
title	Die Überschrift (erforderlich)	110
slug	Benennt die Datei und wählt das Layout (erforderlich, sofern out nicht gesetzt ist)	–
out	Wohin die PNG-Datei geht, relativ zu cards.json (Standard og/<slug>.png)	–
kicker	Oben-links-Beschriftung, in der Akzentfarbe	24
topic	Nach dem Kicker; auch der Standard-Hashtag auf der Kunst	28
meta	Oben-rechts: Lesezeit, Datum, Ausgabe	20
author	Autorenzeile; Initialen erscheinen im Kreis	32
avatar	Ein Foto für den Kreis anstelle von Initialen (Pfad oder URL)	–
url	Wird unter dem Namen angezeigt	48
art	blocks (Standard), image oder none	–
image	Das Bild für "art": "image" (Pfad oder URL); es wird auf 390×430 beschnitten	–
layout	1 bis 4, um die Blockkomposition selbst zu wählen	–
tags	Bis zu zwei kleine Beschriftungen auf der Kunst, z. B. ["#css", "Teil 2"]	16 pro

Das Theme bestimmt das Aussehen jeder Karte: paper (Hintergrund), ink (Text) und accent als Hex-Werte, plus serif, sans und mono für andere Google-Fonts-Familien. Die Akzentfarbe wird für die Blöcke verwendet; für Text wird sie abgedunkelt oder aufgehellt, bis sie lesbar ist. Zwei Themes zum Start: das Standard-Tintenblau (#fafaf7, #17181c, #2433e8) und Nacht (#131313, #f2ede4, #ff7a45).

3. Rendern

node <skill>/scripts/render.mjs cards.json

Es überprüft zuerst jede Karte und listet alle Probleme auf einmal auf, rendert dann die Karten vier auf einmal (etwa eine Sekunde pro Karte) und prüft, ob jedes PNG 1200×630 groß ist. Füge --scale=2 für 2400×1260 Bilder hinzu (schärfer auf hochauflösenden Bildschirmen, etwa doppelte Dateigröße) oder --only=slug,slug, um einige Karten neu zu rendern.

4. Anschauen

Öffne og-preview.html, das neben cards.json geschrieben wird: jede Karte nebeneinander. Überprüfe, ob Überschriften stark verkleinert wurden (kürze sie), ob Akzentwörter auf der falschen Phrase gelandet sind und ob benachbarte Karten sich ausreichend unterscheiden. Ändere layout bei einer Karte, um eine andere Komposition zu wählen.

5. In die Website einbinden

Die Karten erscheinen nur in Vorschauen, wenn jede Seite mit einer absoluten URL auf ihr Bild verweist. Im <head> der Seite:

<meta
  property="og:image"
  content="https://deinblog.example/og/designsystem-in-einer-woche.png"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Ein Designsystem in einer Woche ausliefern" />
<meta name="twitter:card" content="summary_large_image" />

Mach es einmal im Beitragslayout oder Template, basierend auf dem Slug, nicht pro Beitrag:

• Next.js (App Router): Gib in der generateMetadata der Beitragsroute zurück: openGraph: { images: [{ url: /og/${slug}.png, width: 1200, height: 630 }] } und twitter: { card: 'summary_large_image' }, mit metadataBase im Root-Layout gesetzt, damit die URL absolut wird.
• Astro, Eleventy, Jekyll, Hugo: Füge die Tags zum Kopf des Basis-Layouts hinzu, unter Verwendung der Site-URL plus /og/ plus dem Slug der Seite.
• Bilder neben dem Beitrag (kein --out-dir): Verwende den Pfad, den dein Framework für am selben Ort befindliche Dateien bereitstellt.

Nach dem Deployment füge eine Beitrags-URL in einen Link-Vorschau-Checker oder in einen Entwurf auf X, LinkedIn oder Slack ein, um die Karte zu sehen. Plattformen cachen Vorschauen; ein geändertes Bild kann eine Weile brauchen, um angezeigt zu werden.

6. Weiterlaufen lassen (optional)

Um Karten für neue Beiträge bei jedem Build zu erstellen, kopiere die Ordner scripts/ und template/ dieses Skills in das Repository (z. B. tools/og/) und führe beide Skripte vor dem Build aus, zum Beispiel als prebuild-Skript in package.json:

"prebuild": "node tools/og/scripts/from-posts.mjs content/blog --site=deinblog.example --path=/blog/ --out-dir=public/og && node tools/og/scripts/render.mjs cards.json"

Der Build-Rechner benötigt Chrome; die meisten CI-Images haben es, oder setze CHROME_PATH.

Fehlerbehebung

• render: fix cards.json first: Jede Zeile nennt die Karte, das Feld und das Limit.
• Kein Chrome gefunden: Installiere Chrome oder Chromium, oder setze CHROME_PATH auf die ausführbare Datei.
• Die Überschrift wird in einer einfachen Serife oder die Beschriftungen in einer System-Schriftart angezeigt: Das Google-Fonts-Stylesheet wurde nicht geladen. Um offline zu rendern, installiere Instrument Serif, Inter und IBM Plex Mono (alle kostenlos von Google Fonts) und setze "fonts": "" im Theme. "fonts" kann auch die URL deines eigenen Stylesheets für andere Schriftfamilien sein.
• Die Vorschau auf einer Plattform zeigt das alte Bild oder keins: Überprüfe, ob die og:image-URL in einem Browser geöffnet werden kann und absolut ist (mit https:// und deiner Domain), und bitte die Plattform, die Seite erneut zu scrapen, oder warte, bis ihr Cache abläuft.

Dateien

• scripts/from-posts.mjs: Frontmatter in cards.json, behält deine Bearbeitungen bei späteren Ausführungen. Keine Abhängigkeiten.
• scripts/render.mjs: Überprüft cards.json, rendert die PNGs und schreibt og-preview.html. Keine Abhängigkeiten.
• scripts/chrome.mjs: Findet Chrome und macht die Screenshots.
• template/: Die Karte selbst. card.html und card.css sind das Layout, card.js füllt den Text, wählt lesbare Farben, zeichnet die Kunst und passt die Überschrift an.
• examples/field-notes/: Ein kleiner Blog (posts/) und die daraus mit from-posts.mjs erstellte cards.json, mit Akzentwörtern versehen. examples/night-desk/: Eine handschriftliche cards.json für einen Newsletter, dunkel. Die Vorschauen auf Lookbk werden aus diesen gerendert.
• NOTICE.md: Die Schriftarten und Software, die dieses Skill verwendet.