Wenn der Link
geteilt wird.
Drei Isarland-nahe Storefronts, eine Frage: Was erscheint, wenn man den Link in WhatsApp, Signal, Slack oder LinkedIn einfügt? Geprüft wurde Startseite und je eine Produktseite — denn geteilt wird fast immer ein Produkt, nicht die Startseite. Das Ergebnis kippt zwischen beiden.
Die Schlagzeile kippt zwischen Start- und Produktseite. Auf der Startseite zeigt keiner ein Bild. Auf der Produktseite — dem Link, den Kund:innen wirklich teilen — liefern die beiden echten Builds ein echtes Produktfoto, das Demo nie. Jeder der drei scheitert am WhatsApp-Test auf eine andere Weise. Keiner liefert auf Start und Produkt eine korrekte, bildhafte Karte.
Die Matrix — Start (S) · Produkt (P)
| Signal | fabular.pages.dev · Demo | isarland.de · Live | webshop · CTO-Build |
|---|---|---|---|
| og:title / description | ✓ S + P | ✓ S + P (P falsch gekeyt) | ✓ S + P |
| og:image vorhanden | ✗ S + P | S: ✗ kaputt · P: ✓ | S: ✗ · P: ✓ |
| og:image ist ein echtes Bild | — | S: text/html · P: JPEG 1200×1097 | P: JPEG, aber 200×200 |
| Bild-Host | — | www.isarland.de (Prod) | testshop.isarland.de (Staging) |
| twitter:card | summary_large_image (=Logo) | ✗ keine | summary_large_image |
| og:url | ✓ | ✗ | ✗ (canonical da) |
| og:site_name / locale | ✗ / ✗ | ✗ / ✗ | ✓ / ✓ (de_DE) |
| Meta an alle Crawler | ✓ statisch | ⚠ UA-gegated (nur Bots) | ✓ statisch |
| WhatsApp · Startseite | nur Text | nur Text (Bild kaputt) | nur Text |
| WhatsApp · Produkt | nur Text, kein Bild | Foto ✓ — aber falsches Produkt | Foto ✓ — aber 200px, Staging |
✓ funktioniert · ⚠/rot degradiert oder fehlt · — n/a. WhatsApp/Facebook/LinkedIn/Signal lesen og:image, nicht twitter:image.
Pro Storefront
fabular.pages.dev — das Demo: beste Tags, kein Bild
Fresh Haven · Referenz-DemoDie vollständigste Tag-Schicht der drei (OG + Twitter + canonical + theme-color), komplett statisch — jeder Crawler, jede UA bekommt sie.
Aber og:image fehlt — auf Startseite und Produkt (grep -c og:image = 0). Einziges Bild: twitter:image = /icons/icon-512.png, ein 512×512 quadratisches App-Logo, das WhatsApp/FB ignorieren. Auf der Produktseite sind twitter:title/description sogar die generischen Startseiten-Texte, nicht die des Produkts.→ og:image ergänzen (Startseite: eine 1200×630 Share-Karte; Produkt: das Produktfoto) + Produktseiten eigene twitter-Texte geben. Günstigster, wirksamster Fix der drei.
isarland.de — live: echte Fotos, drei Lücken
Angular SPA · prerendered MetaProduktseiten tragen ein echtes og:image (1200×1097 JPEG, 116 KB, unter WhatsApps Größenlimit) — und die Meta ist prerendered, ein echter Kontrast zur dokumentierten fab4minds-JS-Mauer.
Der größte Befund: geteilte Produkt-Links zeigen das falsche Produkt. Die prerenderte Meta ist fehlgekeyt:
Im echten Browser (mit JS) rendern beide Produkte korrekt („Samba", „Weißbier, alkoholfrei") — also Browser-richtig, Crawler-falsch: ein Prerender-Snapshot-Bug auf lebenden Produkten, keine toten URLs. Vermutete Ursache: der Snapshot wird abgegriffen, bevor die Produktdaten async laden; Rezept-Routen laden rechtzeitig.→ Prerender-Keying fixen: auf die Produktdaten warten, bevor der Snapshot OG-Titel/-Bild schreibt. Höchste Priorität.
Startseiten-og:image zeigt auf app_logo-192x192.png → liefert 200 text/html (die SPA-Hülle), kein PNG; die Pfade soft-404en. og:image:width/height lügen zudem (1062×759 für eine „192er" Datei).→ Auf ein echtes Bild zeigen; falsche Maße korrigieren.
Meta ist UA-gegated: og:title = 1 für WhatsApp/facebookexternalhit, aber 0 für eine normale Browser-UA. WhatsApp + Facebook sind abgedeckt — jeder Crawler außerhalb der Allowlist (Signal, Telegram, Slack, LinkedIn, Mastodon) bekommt die leere Hülle, also keine Vorschau.→ Allowlist weiten oder die Meta-Hülle generell ausliefern. (Auch fehlend: twitter-Tags, og:url, og:site_name/locale.)
webshop.…workers.dev — CTO-Build: sauberste Tags, Staging-Bild
Headless-Rebuild · Christoph TrapplDie bestgebaute Tag-Schicht der drei (einziger mit og:site_name + og:locale), statisch an alle UAs. Produktseite = volle summary_large_image-Karte (og + twitter).
Aber der Bild-Host ist testshop.isarland.de — das Staging-Backend (dieselbe Fragilität wie im Vor-Audit). Jede Vorschau-Karte hängt daran, dass Staging erreichbar bleibt.→ Vor Go-Live auf den Produktions-Host umstellen.
Die og:image-URL fordert width=1200, trägt aber allowUpscale=false, und die Quelle des geprüften Produkts ist nur 200px — der Crawler bekommt ein 200×200, 6 KB-Thumbnail unter einem Großbild-Banner. An einem Produkt beobachtet, bei kleinen Quellen vermutlich wiederkehrend.→ allowUpscale=false droppen oder eine von der Quelle gedeckte Breite anfordern.
Startseite hat gar kein Bild (kein og:image, kein twitter:image, twitter:card=summary). Auch fehlt og:url.→ Startseiten-og:image/twitter:image + og:url ergänzen.
Drei Mal dieselbe Lücke, an unterschiedlicher Stelle.
Das Demo beweist das Gerüst und überspringt die Nutzlast (perfekte Tags, kein Produktbild). Der Live-Shop hat die Nutzlast und bricht die Verkabelung (echte Fotos, aber falsch gekeyt + UA-gegated). Der CTO-Build hat die saubersten Tags und die fragilste Quelle (Staging, Thumbnail). Eine korrekte Karte braucht beides — erreichbares, richtig gekeytes, ausreichend großes Bild an jeden Crawler.
- isarland.de: Produkt-Prerender-Keying fixen (geteilte Links zeigen das falsche Produkt) — danach Startseiten-Bild + UA-Gate.
- fabular.pages.dev:
og:imageergänzen (Start: Share-Karte, Produkt: Produktfoto) — ein Tag, größter Effekt. - webshop: Bild-Host von Staging auf Prod +
allowUpscalelösen, damit Karten nicht 200px sind.