OGP-Thumbnail-Design 2025 — Lesbar, leicht, im Frame

Einführung

Für OGP zählen vor allem drei Dinge: nicht abgeschnitten werden, lesbar bleiben und leicht ausliefern. Wer Schrift, Textmenge, Ränder und Seitenverhältnis konstant hält, fängt Plattform‑Eigenheiten zuverlässig ab. Dieser Leitfaden bündelt sichere Verfahren für 2025 und nutzt dabei OGP-Thumbnail-Maker. Für SEO und strukturierte Daten siehe Bild-SEO 2025 — Alt-Text, strukturierte Daten und Sitemaps in der Praxis.

TL;DR

• Basis-Seitenverhältnis: 1200×630 (1,91:1). Zentrierter Aufbau, kritische Inhalte in die mittleren 60%.
• Mindestschriftgröße: ca. 40–48 px für Japanisch/komplexe Glyphen; Headline auf 2 Zeilen begrenzen.
• Sicherheitsränder: mindestens 8–10% an allen Seiten gegen dynamisches Cropping.
• Formate: Fotos als WebP/AVIF; UI/Logos als PNG oder verlustfreies WebP. Ziel 200–400 KB.

Spezifikation (praxisnah)

• Basisgröße: 1200×630 px (innerhalb der Open‑Graph‑Empfehlung)
• Alternative: 1200×628 px (fängt Plattform‑Abweichungen ab)
• Safe Area: 10% je Kante (min. 8%); Text innerhalb des zentralen 60%-Rechtecks
• Hintergrundfoto: Gesichter/Logos und Hauptmotive innerhalb der zentralen 50%
• Farbe: Kontrastverhältnis ≥ 7:1 (Richtschnur WCAG AAA)
• Größe: 200–400 KB (statische OGPs), dynamisch bis ~500 KB
• Format: bevorzugt WebP (Kompatibilität/Größe), AVIF testen und bei guter Qualität nutzen

Das Zuschneideverhalten der Plattformen ändert sich leicht von Jahr zu Jahr. Mit 10% Sicherheitsrand an allen Seiten vermeidet man in den meisten Auto‑Previews Probleme.

Layout‑Muster

Trenne 1) Titel, 2) Sub/Descriptor und 3) Brand‑Bereich. Wichtige Elemente in den mittleren 60%. Großzügige Abstände/Zeilenhöhe sichern die Lesbarkeit auch in schmalen Previews.

Schrift und Lesbarkeit

Für Japanisch ist eine klare Grotesk geeignet. Laufweite je nach Breite anpassen; bei Lokalisierung Glyphenunterschiede berücksichtigen. Für die Sichtprüfung hilft ein Vergleichs‑Slider (siehe Compare Slider).

Bildgenerierung und Optimierung

Erzeuge das Basisbild mit OGP-Thumbnail-Maker und komprimiere die finale Ausgabe mit Image Compressor auf 200–400 KB. Beachte für Farbe und Kontrast Korrektes Farbmanagement & ICC-Strategie 2025 — Praxisleitfaden für stabile Webbild-Farben.

Automatisierter Workflow (Node.js/sharp)

Minimalbeispiel zur Generierung aus einem Template beim Deploy.

// scripts/build-ogp.mjs
import sharp from 'sharp'
import fs from 'node:fs/promises'
import path from 'node:path'

const WIDTH = 1200, HEIGHT = 630
const OUT = 'public/ogp'
await fs.mkdir(OUT, { recursive: true })

const entries = [
  { slug: 'ogp-thumbnail-design-2025', title: 'OGP‑Thumbnail‑Design 2025', brand: 'Unified Image Tools' },
]

const base = sharp({ create: { width: WIDTH, height: HEIGHT, channels: 4, background: '#0b0f15' } })
for (const e of entries) {
  const svg = `<svg width="${WIDTH}" height="${HEIGHT}" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" fill="#0b0f15"/>
    <rect x="${WIDTH*0.1}" y="${HEIGHT*0.1}" width="${WIDTH*0.8}" height="${HEIGHT*0.8}" fill="none"/>
    <text x="50%" y="45%" font-size="72" text-anchor="middle" fill="#fff" font-family="'Inter','Noto Sans JP',sans-serif">${e.title}</text>
    <text x="50%" y="65%" font-size="36" text-anchor="middle" fill="#9aa4b2" font-family="'Inter','Noto Sans JP',sans-serif">${e.brand}</text>
  </svg>`
  const img = await base
    .composite([{ input: Buffer.from(svg) }])
    .webp({ quality: 82 })
    .toBuffer()
  await fs.writeFile(path.join(OUT, `${e.slug}.webp`), img)
}

Hinweise:

• In Produktion SVG‑Vorlage mit Variablen nutzen
• Start bei WebP q≈80 und nach Sichtprüfung (Fransen/Banding) feinjustieren
• Laufweite/Zeilenhöhe vor dem Rastern anpassen; Headline auf 2 Zeilen

Häufige Fehler

• Beschnitt an den Rändern: zu wenig Safe Area; im Template fixieren
• Unleserlicher Text: zu klein/zu geringer Kontrast
• Zu große Dateien: fehlendes Resize/überladene Deko; zuerst Resize‑Workflows 2025 — Vom Layout rückwärts 30–70 % Verschwendung streichen anwenden

Next.js‑Integration (Metadata)

OGP stabil über app/[locale]/layout.tsx bereitstellen (Konzeptbeispiel).

// export const generateMetadata = async (): Promise<Metadata> => ({
//   openGraph: {
//     type: 'article',
//     images: [
//       { url: `/ogp/ogp-thumbnail-design-2025.webp`, width: 1200, height: 630, alt: 'OGP‑Thumbnail‑Design 2025' }
//     ],
//   },
//   twitter: {
//     card: 'summary_large_image',
//     images: ['/ogp/ogp-thumbnail-design-2025.webp']
//   }
// })

Wichtig:

• Für Shares absolute Bild‑URLs bevorzugen
• summary_large_image für maximale Sichtbarkeit verwenden
• In mehrsprachigen Sites OGP pro Locale wechseln und mit hreflang konsistent halten

CLI‑Rezepte (cwebp/avifenc)

cwebp input.png -q 82 -m 6 -mt -o ogp.webp
avifenc --min 26 --max 32 --speed 6 input.png ogp.avif

Artefakte erkennen:

• Dünne japanische Striche verschwinden → Qualität erhöhen oder auf WebP wechseln
• Banding auf Flächen/Verläufen → leichtes Rauschen hinzufügen oder AVIF lockern

QA‑Checkliste (vor dem Posting)

• 1200×630 oder 1200×628; Seitenverhältnis 1,91:1
• Titel/Logo/Gesichter innerhalb der 10% Safe Area
• Schriftgröße ≥ 40–48 px, Headline ≤ 2 Zeilen
• Kontrastverhältnis ≥ 7:1; bei lauten Hintergründen Blur/Maskierung
• 200–400 KB (dynamisch ≤ ~500 KB)
• Visuelle Prüfung WebP/AVIF (Fransen/Jaggies/Banding)
• Open‑Graph und Twitter‑Card Metadaten auf der Seite prüfen
• Previews auf großen Plattformen geräteweise gegen Cropping testen

Fazit

Stabiler Betrieb basiert auf Template‑Disziplin und schlanker Ausgabe. Von Erstellung bis Export in einem konsistenten Durchlauf, um Nacharbeit zu vermeiden.