Ierarhia titlurilor h1/h2/h3

Structura titlurilor din pagini este ce citește Google ca să înțeleagă despre ce e fiecare pagină. Acum fișele de produs au două titluri principale identice în cod, prima pagină are ca titlu principal sloganul bannerului din panoul de administrare (deci se schimbă de fiecare dată când se schimbă bannerul), paginile de colecție sar de la nivelul 1 direct la nivelul 3, iar footerul își repetă titlul pe fiecare pagină din site. Vizitatorul nu vede nimic în neregulă — problemele sunt toate în cod și în varianta randată pe care o indexează Google.

Ce am găsit

Două `<h1>` identice pe fiecare fișă de produs

În DOM-ul randat pe https://hyperice.md/products/hypervolt-3-pro, document.querySelectorAll('h1').length întoarce 2, ambele cu textul „Hypervolt 3 Pro"; primul e vizibil, al doilea are clasa hidden … lg:block și offsetParent === null la lățimea curentă. Același rezultat pe /products/hypervolt-3.

Cauza — două elemente randate mereu, ascunse alternativ din CSS. frontend/src/pages/ProductDetail.tsx:254-256, blocul mobil:

            <div className="flex flex-col items-start px-5 lg:hidden">
              <div className="flex w-full items-baseline justify-between gap-3">
                <h1 className="text-[21px] font-medium leading-[1.2] text-ink">{product.title}</h1>

și frontend/src/pages/ProductDetail.tsx:392, blocul desktop:

              <h1 className="hidden text-[21.33px] font-medium leading-[1.2] text-ink lg:block">

HTML-ul pre-randat servit de server are un singur h1 (curl https://hyperice.md/products/hypervolt-3 → <h1>Hypervolt 3</h1>), deci dublura apare exact în varianta hidratată, cea pe care o vede Google după randare. Textul fiind identic, nu există ambiguitate despre subiectul paginii, dar regula unui singur <h1> per pagină e încălcată pe toate fișele de produs.

`h1`-ul primei pagini este sloganul bannerului, nu subiectul magazinului

În DOM-ul randat pe https://hyperice.md/ singurul h1 este „Antrenamentul de vară începe acum"; pe https://hyperice.md/ru este „Летние тренировки начинаются сейчас". În HTML-ul servit, <title> este „Tehnologie de recuperare și wellness | Hyperice Moldova", iar h1-ul din noscript este „Tehnologie de recuperare și wellness" — titlul și h1-ul vorbesc despre lucruri diferite.

Cauza, frontend/src/components/HeroBanner.tsx:189-211; conținutul h1-ului, la linia 211:

              {active?.headline ?? (loaded ? t('hero.title') : ' ')}

active.headline este titlul bannerului administrat din panou, iar t('hero.title') intervine doar când nu e configurat niciun banner. Cât timp cererea e în curs, h1-ul conține un singur spațiu.

Salt de la `h1` direct la `h3` pe paginile de colecție

În DOM-ul randat pe https://hyperice.md/collections/shop-all, ordinea titlurilor este: h2 „Coșul tău" (sertarul de coș, în afara fluxului paginii), apoi h1 „Toate produsele", apoi direct h3 — „Hypervolt", „Normatec", „Hyperboot by Nike × Hyperice", „Hyperice X", „Venom", „Vyper + Hypersphere" și numele produselor. Pagina are trei h2 în total, iar celelalte două sunt „Rămâi conectat" din footer. În conținutul propriu-zis nu există niciun h2 între h1 și h3, deci banda de categorii și grila de produse nu au titlu care să le introducă. Prin comparație, paginile de terapie au ierarhie corectă (verificat pe /ru/therapy/recovery).

Blocul de newsletter din footer apare de două ori în DOM, pe fiecare pagină

NewsletterBlock e definit la frontend/src/components/Footer.tsx:118, cu h2 la linia 123:

      <h2 className="heading-2 text-white">{t('footer.newsletter.heading')}</h2>

și este randat de două ori — Footer.tsx:197 (blocul mobil) și Footer.tsx:251 (blocul desktop). Ambele sunt mereu în DOM, ascunse doar din CSS: pe /products/hypervolt-3-pro și pe /collections/shop-all titlul „Rămâi conectat" apare de două ori. E aceeași cauză de fond ca la h1-ul dublu de pe fișa de produs și merită rezolvată în același gest.

De făcut

În frontend/src/pages/ProductDetail.tsx, un singur element de titlu în DOM, mutat prin CSS (order/grid) între poziția de sus pe mobil și coloana din dreapta pe desktop; dacă poziționarea prin CSS nu iese identică vizual, al doilea rămâne <p> sau <span> cu aceleași clase, nu al doilea h1.
Vitalie decide ce devine h1-ul primei pagini: titlul magazinului, invizibil (sr-only), cu titlul bannerului transformat în <p> stilizat identic — varianta recomandată, pentru că scoate h1-ul de sub ce se scrie în panou — sau titlul bannerului rămâne h1, iar câmpul din panou primește o notă că e titlul principal al paginii.
În frontend/src/components/CollectionPage.tsx, banda de categorii și grila de produse primesc fiecare câte un h2 deasupra (poate fi sr-only dacă nu se vrea schimbare vizuală), de exemplu numele secțiunii de categorii și „Produse".
În frontend/src/components/Footer.tsx, un singur NewsletterBlock în DOM, poziționat prin CSS între aranjamentul mobil și cel desktop.

Criteriu de acceptare

Pe /products/hypervolt-3-pro, /products/normatec-premier și /products/venom-2-back, în cele 3 limbi, document.querySelectorAll('h1').length întoarce 1 la 390px și la 1440px lățime; aspectul rămâne cel de acum (comparație vizuală înainte/după).
Pe /, /en și /ru, DOM-ul randat are exact un h1, textul lui nu se schimbă când se schimbă bannerul din panou și nu e niciodată gol la prima încărcare; heroul arată identic.
Pe /collections/shop-all, /collections/hypervolt și /collections/normatec, în cele 3 limbi, lista de titluri din DOM nu conține niciun salt de la h1 direct la h3.
Pe orice pagină, DOM-ul randat conține o singură dată titlul de newsletter și un singur set de linkuri de footer; footerul arată identic la 390px și la 1440px față de acum.

Depinde de

Alegerea între cele două variante pentru h1-ul primei pagini este decizie de produs și îi aparține lui Vitalie; restul punctelor se execută fără să aștepte.

Edited Aug 27, 2026 by Vitalie