OG-Bild erstellen #4

Closed
opened 2026-08-10 13:57:03 +02:00 by admin · 4 comments
Owner

Kein OpenGraph-Bild vorhanden - aktuell nur Text-Metadata (metadataBase/OG-Tags bereits in src/app/layout.tsx implementiert). Braucht ein echtes 1200x630 Bild fuer Social-Sharing-Previews (Design-Aufgabe, kein Code). Zurueckgestellt, kein akuter Blocker.

Kein OpenGraph-Bild vorhanden - aktuell nur Text-Metadata (metadataBase/OG-Tags bereits in src/app/layout.tsx implementiert). Braucht ein echtes 1200x630 Bild fuer Social-Sharing-Previews (Design-Aufgabe, kein Code). Zurueckgestellt, kein akuter Blocker.
Author
Owner

Umgesetzt: 1200x630 OG-Bild für Social-Sharing-Previews

Kein Logo-Asset im Repo vorhanden (die App nutzt durchgehend das Lucide-PawPrint-Icon + Orange-500 als Markenzeichen), daher als programmatisch generiertes Bild via next/ogs ImageResponse umgesetzt statt einer statischen Datei — wird bei Bedarf einmalig gerendert und als statisches Asset ausgeliefert (src/app/opengraph-image.tsx):

  • Warmer Orange-Gradient (Markenfarbe), großes halbtransparentes Paw-Wasserzeichen als Tiefenebene, PawFeed-Wortmarke + Tagline + Domain
  • twitter.card auf summary_large_image umgestellt (vorher summary, ohne Bild wirkungslos)

Beim Live-Test gefunden + gefixt: Genau derselbe Middleware-Bug wie beim GDPR-Export-Link (#6) — die neue /opengraph-image-Route wurde von der Clerk-Middleware auf /sign-in umgeleitet. Da Social-Media-Crawler (Facebook, Twitter/X, Slack, Discord) nie eine Session haben, hätte das Bild nie angezeigt — behoben in src/proxy.ts (Commit 747d9e1).

Verifiziert: og:image/twitter:image-Meta-Tags korrekt im HTML (inkl. width/height/alt), Bild-URL liefert HTTP 200 + image/png, Bild optisch geprüft.

Commits: e47eed3 (Feature), 747d9e1 (Proxy-Fix). Deployed und live auf pawfeed.org.

**Umgesetzt: 1200x630 OG-Bild für Social-Sharing-Previews** Kein Logo-Asset im Repo vorhanden (die App nutzt durchgehend das Lucide-`PawPrint`-Icon + Orange-500 als Markenzeichen), daher als programmatisch generiertes Bild via `next/og`s `ImageResponse` umgesetzt statt einer statischen Datei — wird bei Bedarf einmalig gerendert und als statisches Asset ausgeliefert (`src/app/opengraph-image.tsx`): - Warmer Orange-Gradient (Markenfarbe), großes halbtransparentes Paw-Wasserzeichen als Tiefenebene, PawFeed-Wortmarke + Tagline + Domain - `twitter.card` auf `summary_large_image` umgestellt (vorher `summary`, ohne Bild wirkungslos) **Beim Live-Test gefunden + gefixt:** Genau derselbe Middleware-Bug wie beim GDPR-Export-Link (#6) — die neue `/opengraph-image`-Route wurde von der Clerk-Middleware auf `/sign-in` umgeleitet. Da Social-Media-Crawler (Facebook, Twitter/X, Slack, Discord) nie eine Session haben, hätte das Bild nie angezeigt — behoben in `src/proxy.ts` (Commit `747d9e1`). **Verifiziert:** `og:image`/`twitter:image`-Meta-Tags korrekt im HTML (inkl. width/height/alt), Bild-URL liefert HTTP 200 + `image/png`, Bild optisch geprüft. Commits: `e47eed3` (Feature), `747d9e1` (Proxy-Fix). Deployed und live auf pawfeed.org.
Author
Owner

Follow-up: Facebook-Sharing-Debugger-Warnung behoben ("og:image sollte explizit angegeben werden")

Root Cause: pawfeed.org/ hatte gar keine öffentlich abrufbare Seite — jeder Besucher ohne Login-Session (also auch der Facebook-Crawler) wurde per 307 auf accounts.pawfeed.org/sign-in umgeleitet, noch bevor Next.js die Seite mit unseren og:image/og:title-Tags überhaupt rendern konnte. Der Crawler hat unsere echten Metadaten also nie gesehen.

Lösung (nach Rücksprache — echte Landingpage statt Crawler-Sonderbehandlung):

  • / ist jetzt öffentlich erreichbar (src/proxy.ts)
  • src/app/page.tsx: redirectet weiterhin sofort zu /feed für eingeloggte Nutzer (auth()-Check statt hartem .protect()), rendert für ausgeloggte Besucher jetzt eine echte Hero-Landingpage — warmer Orange-Gradient + Paw-Wasserzeichen im selben visuellen Stil wie das OG-Bild, PawFeed-Wortmarke, Tagline, "Get started"/"Log in"-CTAs

Verifiziert: https://pawfeed.org/ liefert jetzt HTTP 200 mit vollständigen og:image/twitter:image-Tags im HTML (statt 307-Redirect), Landingpage im isolierten Browser-Kontext (ohne Login-Cookie) optisch geprüft, beide CTA-Links zeigen korrekt auf /sign-up bzw. /log-in.

Commit: 07a1cb7. Deployed und live auf pawfeed.org — der Facebook Sharing Debugger sollte beim nächsten "Scrape Again" jetzt saubere Ergebnisse liefern.

**Follow-up: Facebook-Sharing-Debugger-Warnung behoben ("og:image sollte explizit angegeben werden")** Root Cause: `pawfeed.org/` hatte gar keine öffentlich abrufbare Seite — jeder Besucher ohne Login-Session (also auch der Facebook-Crawler) wurde per 307 auf `accounts.pawfeed.org/sign-in` umgeleitet, noch bevor Next.js die Seite mit unseren `og:image`/`og:title`-Tags überhaupt rendern konnte. Der Crawler hat unsere echten Metadaten also nie gesehen. **Lösung (nach Rücksprache — echte Landingpage statt Crawler-Sonderbehandlung):** - `/` ist jetzt öffentlich erreichbar (`src/proxy.ts`) - `src/app/page.tsx`: redirectet weiterhin sofort zu `/feed` für eingeloggte Nutzer (`auth()`-Check statt hartem `.protect()`), rendert für ausgeloggte Besucher jetzt eine echte Hero-Landingpage — warmer Orange-Gradient + Paw-Wasserzeichen im selben visuellen Stil wie das OG-Bild, PawFeed-Wortmarke, Tagline, "Get started"/"Log in"-CTAs **Verifiziert:** `https://pawfeed.org/` liefert jetzt HTTP 200 mit vollständigen `og:image`/`twitter:image`-Tags im HTML (statt 307-Redirect), Landingpage im isolierten Browser-Kontext (ohne Login-Cookie) optisch geprüft, beide CTA-Links zeigen korrekt auf `/sign-up` bzw. `/log-in`. Commit: `07a1cb7`. Deployed und live auf pawfeed.org — der Facebook Sharing Debugger sollte beim nächsten "Scrape Again" jetzt saubere Ergebnisse liefern.
Author
Owner

Landingpage vervollständigt (Nutzer-Feedback: "schön, aber es fehlen wichtige Elemente")

Ergänzt:

  • Header mit Wortmarke + Sprachumschalter
  • Sprachumschalter mit echten Flaggen statt Text — erst mit Emoji (🇬🇧/🇩🇪) versucht, dann auf Inline-SVG umgestellt, weil Flaggen-Emoji auf Windows standardmäßig nur als "GB"/"DE"-Buchstaben gerendert werden (kein Color-Flag-Font). Betrifft den Sprachumschalter überall in der App, nicht nur die Landingpage.
  • App-Preview: echter Screenshot des Live-Feeds in einem Browser-Chrome-Mockup, per sharp sauber zusammengesetzt (Sidebar + Feed-Spalte ohne die Lücke, die der rohe Screenshot durch das zentrierte Layout hatte)
  • Feature-Übersicht: 4 Kernpunkte (Pet-first-Profile, Posts/Stories/Video, Health-Tracking, Pet-zu-Pet-Messaging)
  • Footer mit Impressum/Datenschutz/AGB — dieselben Links wie in der eingeloggten Sidebar

Commits: 1eb27df (Header/Preview/Features/Footer), 0da56a2 (SVG-Flaggen-Fix + Screenshot-Crop-Fix). Deployed und live auf pawfeed.org, visuell im ausgeloggten Zustand verifiziert.

**Landingpage vervollständigt** (Nutzer-Feedback: "schön, aber es fehlen wichtige Elemente") Ergänzt: - **Header** mit Wortmarke + Sprachumschalter - **Sprachumschalter mit echten Flaggen** statt Text — erst mit Emoji (🇬🇧/🇩🇪) versucht, dann auf Inline-SVG umgestellt, weil Flaggen-Emoji auf Windows standardmäßig nur als "GB"/"DE"-Buchstaben gerendert werden (kein Color-Flag-Font). Betrifft den Sprachumschalter überall in der App, nicht nur die Landingpage. - **App-Preview**: echter Screenshot des Live-Feeds in einem Browser-Chrome-Mockup, per `sharp` sauber zusammengesetzt (Sidebar + Feed-Spalte ohne die Lücke, die der rohe Screenshot durch das zentrierte Layout hatte) - **Feature-Übersicht**: 4 Kernpunkte (Pet-first-Profile, Posts/Stories/Video, Health-Tracking, Pet-zu-Pet-Messaging) - **Footer** mit Impressum/Datenschutz/AGB — dieselben Links wie in der eingeloggten Sidebar Commits: `1eb27df` (Header/Preview/Features/Footer), `0da56a2` (SVG-Flaggen-Fix + Screenshot-Crop-Fix). Deployed und live auf pawfeed.org, visuell im ausgeloggten Zustand verifiziert.
Author
Owner

Letzte Ergänzungen für heute:

  • i18n: Die Landingpage war komplett hartcodiert Englisch — neuer "Landing"-Übersetzungs-Namespace in messages/en.json/messages/de.json, src/app/page.tsx nutzt jetzt getTranslations("Landing"). Sprachumschalter wirkt sich jetzt sichtbar auf Hero-Text, Buttons, Feature-Überschriften und Footer-Links aus (Commit f899ed5).
  • App-Preview final ersetzt: Nutzer hat einen eigenen, saubereren Screenshot geliefert (kein Layout-Gap) — als public/app-preview-feed.png übernommen, next/image auf natürliche Bildgröße (872×926) statt beschnittenem 16:10-Rahmen umgestellt, damit nichts abgeschnitten wird (Commit 59981f9).

Beide live deployed und verifiziert (DE/EN-Cookie-Test + visueller Check).

Session-Ende für heute — vollständiger Handoff mit allen Entscheidungen, offenen Punkten und Nächste-Schritte-Liste liegt im Repo unter .claude/handoffs/2026-08-11-gdpr-token-grid-targeting-landingpage.md (Commit 4feafd6). Issue bleibt bewusst offen, bis final bestätigt.

**Letzte Ergänzungen für heute:** - **i18n:** Die Landingpage war komplett hartcodiert Englisch — neuer `"Landing"`-Übersetzungs-Namespace in `messages/en.json`/`messages/de.json`, `src/app/page.tsx` nutzt jetzt `getTranslations("Landing")`. Sprachumschalter wirkt sich jetzt sichtbar auf Hero-Text, Buttons, Feature-Überschriften und Footer-Links aus (Commit `f899ed5`). - **App-Preview final ersetzt:** Nutzer hat einen eigenen, saubereren Screenshot geliefert (kein Layout-Gap) — als `public/app-preview-feed.png` übernommen, `next/image` auf natürliche Bildgröße (872×926) statt beschnittenem 16:10-Rahmen umgestellt, damit nichts abgeschnitten wird (Commit `59981f9`). Beide live deployed und verifiziert (DE/EN-Cookie-Test + visueller Check). **Session-Ende für heute** — vollständiger Handoff mit allen Entscheidungen, offenen Punkten und Nächste-Schritte-Liste liegt im Repo unter `.claude/handoffs/2026-08-11-gdpr-token-grid-targeting-landingpage.md` (Commit `4feafd6`). Issue bleibt bewusst offen, bis final bestätigt.
admin closed this issue 2026-08-12 18:37:49 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: admin/petfeed#4