Card de partajare 1200×630, og:locale și apple-touch-icon

Când cineva trimite un link de hyperice.md pe WhatsApp, Facebook sau Telegram, imaginea implicită a cardului este banda de logo de 700×95 pixeli, cu fundal transparent. E sub dimensiunea minimă acceptată de platforme, deci pe multe dintre ele cardul apare fără nicio imagine, iar acolo unde apare se vede un dreptunghi negru gol: transparența e turnată pe negru, iar wordmarkul e el însuși negru. Prima pagină, în toate cele trei limbi, e cea mai des trimisă — și arată ruptă. Alături de asta lipsesc și două lucruri mai mici cerute de checklistul de lansare: apple-touch-icon și og:locale.

Ce am găsit

Imaginea implicită de partajare e o bandă de logo de 700×95, transparentă

Sursa, în ambele locuri unde se decide:

backend/src/services/render-page.ts:104
  const image = `${origin}${meta.image ?? '/hyperice-logo-print.png'}`;

frontend/src/components/Seo.tsx:98
  const DEFAULT_IMAGE = '/hyperice-logo-print.png';

Fișierul, luat de pe producție:

curl -sS -o og-logo.png -w '%{http_code} %{content_type} %{size_download}' https://hyperice.md/hyperice-logo-print.png
200 image/png 12390

file og-logo.png   →  PNG image data, 700 x 95, 8-bit/color RGBA, non-interlaced

Analiza pixelilor: 63,8 % dintre ei au canalul alfa exact 0, iar 77,6 % au alfa sub 255. Singura culoare complet opacă din imagine este (0, 0, 0).

Acoperirea, măsurată pe toate cele 381 de adrese din sitemap.xml: 54 de pagini (18 pagini × 3 limbi) servesc hyperice-logo-print.png ca og:image, printre ele /, /en și /ru.

Contextul care contează: 95 de pixeli înălțime e sub minimul documentat de platforme pentru cardul mare (Facebook cere cel puțin 200×200, Twitter cel puțin 300×157).

Nu există apple-touch-icon, și nici vreun icon PNG pe site

Singura referință de icon din shell:

grep -n "favicon\|apple-touch\|manifest" frontend/index.html
16:    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2" />

Randorul nu adaugă niciunul: lista de tag-uri din backend/src/services/render-page.ts:106-115 conține exact canonical, alternate hreflang, og:title, og:url, og:type, og:site_name, og:image și twitter:card, plus og:description (linia 117) și robots (liniile 119-120) condiționate.

Pe producție:

/favicon.svg                        200 | image/svg+xml | 1151b
/favicon.ico                        404
/apple-touch-icon.png               404
/apple-touch-icon-precomposed.png   404
/site.webmanifest                   404
/manifest.json                      404

frontend/public/apple-touch-icon.png nu există; singurele fișiere de identitate vizuală de acolo sunt favicon.svg și hyperice-logo.svg. Cine adaugă magazinul pe ecranul de pornire al unui iPhone primește o miniatură generată din captura paginii, nu logo-ul.

Niciun og:locale, deși site-ul e trilingv

grep -rn "og:locale" backend/src frontend/src nu întoarce nicio linie. Aceeași lipsă în aplicație: frontend/src/components/Seo.tsx:130-135 setează og:title, og:url, og:type, og:site_name, og:image și twitter:card, și atât. Pe live, numărul de pagini fără nicio potrivire pentru og:locale este 381 din 381.

Hreflang-ul complet și reciproc există deja, deci partea grea a multilingvismului e făcută. Facebook și LinkedIn folosesc însă og:locale ca să aleagă versiunea potrivită atunci când cineva partajează linkul; fără el, cele trei versiuni ale aceleiași pagini apar ca trei linkuri fără legătură între ele.

Nicio imagine de partajare nu are raportul cerut de card

Toate cele 110 imagini og:image distincte de pe cele 381 de adrese, descărcate și măsurate:

  72  1380x1080   articole Hyperhub, raport 1,28:1
  31  800x869     produse, raport 0,92:1 — portret
   5  1300x1020   colecții
   1  1440x720    collections/hyperboot-hero.jpg, 2:1
   1  700x95      logo-ul implicit

Niciuna la 1200×630. Sursele: backend/src/services/page-meta.ts:193 (image: product.image), :231 (collection.heroImage), :268 (article.heroImage) — se refolosește direct poza de pe pagină, fără o variantă dedicată pentru partajare.

Cardul summary_large_image are raportul 1,91:1, deci o poză de produs în portret intră tăiată de sus și de jos: la un Hypervolt vertical se vede doar mijlocul aparatului, fără cap și fără mâner. Articolele pierd în jur de o treime din înălțime. Spre deosebire de logo-ul implicit, aceste imagini depășesc minimele platformelor, deci cardurile se randează — arată doar vizibil mai prost decât produsul.

De făcut

• Creează og-default.jpg la exact 1200×630, cu fundal opac (alb sau negru de brand, nu transparent), wordmarkul centrat și margine suficientă.
• Pune noul fișier ca implicit în ambele locuri — backend/src/services/render-page.ts:104 și frontend/src/components/Seo.tsx:98; dacă se schimbă doar unul, randorul și aplicația servesc imagini diferite.
• Adaugă în headTags (backend/src/services/render-page.ts:106-115) și og:image:width = 1200, og:image:height = 630 și og:image:alt, ca prima partajare să se randeze corect înainte ca platforma să apuce să descarce fișierul.
• Generează din hyperice-logo.svg un apple-touch-icon.png de 180×180 cu fundal opac (iOS nu respectă transparența, o face neagră) și pune-l în frontend/public/.
• Referă-l în frontend/index.html, lângă linia 16: <link rel="apple-touch-icon" href="/apple-touch-icon.png?v=1" />. Fișierul stă la URL fix, deci are nevoie de ?v= incrementat la fiecare schimbare — aceeași regulă ca la favicon (vezi comentariile din frontend/index.html:5-15 și frontend/nginx.conf:236-254).
• Adaugă og:locale în headTags din backend/src/services/render-page.ts — funcția primește deja locale ca parametru (linia 98) — cu maparea ro → ro_MD, ru → ru_RU, en → en_US, plus câte un og:locale:alternate pentru celelalte două limbi. Lista se construiește din același helper alternatesFor folosit la linia 80, ca să nu apară o a doua sursă de adevăr despre limbi.
• Aceeași completare în frontend/src/components/Seo.tsx, care are limba curentă la linia 117.
• Adaugă un câmp separat de imagine de partajare (shareImage) pentru produs, colecție și articol, completabil din panou, folosit în backend/src/services/page-meta.ts cu fallback pe imaginea actuală. Pozele de pe pagină nu se redimensionează — ele sunt corecte acolo unde stau.

Criteriu de acceptare

• sips -g pixelWidth -g pixelHeight pe og-default.jpg dă 1200 și 630, iar sips -g all arată hasAlpha: no.
• Reluat scanul pe cele 381 de adrese din sitemap, niciuna nu mai servește hyperice-logo-print.png ca og:image.
• Facebook Sharing Debugger pe https://hyperice.md/ afișează card mare cu logo lizibil, fără avertisment de dimensiune.
• curl -sSI https://hyperice.md/apple-touch-icon.png → HTTP 200, content-type: image/png; sips pe el dă 180×180 și hasAlpha: no; HTML-ul servit pe prima pagină conține linkul.
• curl -sS https://hyperice.md/ru | grep -o 'og:locale[^>]*' întoarce og:locale cu ru_RU plus două og:locale:alternate; la fel pe / (ro_MD) și /en (en_US). Valorile sunt reciproce între cele trei versiuni ale aceleiași pagini.
• sips pe imaginea de partajare a unui produs, a unei colecții și a unui articol dă 1200×630; Sharing Debugger pe /products/arm-attachment arată produsul întreg, netăiat.

Depinde de

Alegerea pozei de partajare pentru fiecare produs, colecție și articol e o decizie vizuală și îi revine lui Vitalie; din repo se construiesc doar câmpul shareImage, ecranul din panou și randarea. Restul punctelor se fac integral din repo.