Breadcrumb & pagination corecte

De ce contează breadcrumb-ul

• arată unde te afli și cum ajungi „în sus” în doar 1–2 clickuri
• reduce bounce-ul pe pagini adânci (produs → categorie)
• oferă motorelor un context clar al ierarhiei

De ce contează pagination-ul

• încărcare mai rapidă (liste lungi împărțite în pagini)
• control pe ce văd oamenii pe mobil (nu scroll infinit fără capăt)
• permite indexarea paginilor utile (ex.: cu produse diferite)

Reguli simple pentru breadcrumb

• plasează deasupra titlului sau a grilei de produse
• folosește denumiri scurte: „Acasă”, „Laptopuri”, „Gaming”
• separatoare clare: „›” sau „/” (vizibil și pe mobil)
• ultimul element = pagina curentă (fără link)
• pe paginile de produs, include categoria direct „mai sus”

Structuri corecte (exemple)

Pentru filtre, nu reinventa ierarhia. Arată doar contextul selectat (etichetă mică), nu o „ramură” nouă în breadcrumb.

Pagination prietenoasă (UX)

• buton clar „Anterior” și „Următor”
• afișează 5–7 numere (… pentru sărituri lungi)
• arată câte rezultate sunt: „Pag. 2 din 12, 240 produse”
• păstrează selecțiile (filtre/sortare) când schimbi pagina

URL-uri curate (SEO)

• forme comune: ?page=2 sau /pagina/2/
• păstrează aceleași parametre când sunt active filtrele
• nu crea duplicate prin URL-uri diferite care arată aceeași listă

Canonical (pe scurt, fără jargon)

• Pagina 1 (categoria): canonical către fără parametri (URL canonic).
• Pag. 2+: canonical către propria adresă (nu către pagina 1).
• nu face noindex pe paginile 2+, dacă listele sunt utile.

Scopul: să nu „amesteci” semnalele tuturor paginilor într-una singură.

Prev/Next & scroll infinit

• include linkuri „Anterior/Următor” în HTML (accesibil pentru tastatură)
• scroll infinit? oferă și link „Vezi pagina următoare” (fallback)
• nu ascunde paginile 2+ în spatele unui script imposibil de urmat

Breadcrumb HTML (fără JSON, accesibil)

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Acasă</a></li>
    <li><a href="/electronice/">Electronice</a></li>
    <li><a href="/electronice/laptopuri/">Laptopuri</a></li>
    <li aria-current="page">Gaming</li>
  </ol>
</nav>

Dacă vrei, poți adăuga ulterior marcare semantica (microdata), dar fără JSON aici.

Pagination HTML (clar & simplu)

<nav aria-label="Paginare categorie">
  <ul class="pagination">
    <li class="prev"><a href="?page=1">Anterior</a></li>
    <li><a href="?page=1">1</a></li>
    <li class="active"><span>2</span></li>
    <li><a href="?page=3">3</a></li>
    <li class="next"><a href="?page=3">Următor</a></li>
  </ul>
</nav>

Pe mobil, păstrează butoanele suficient de mari (48px înălțime minim).

Greșeli frecvente la breadcrumb

• denumiri lungi sau „tehnice” pe care oamenii nu le înțeleg
• ultimul element cu link (nu e clar că e pagina curentă)
• breadcrumb duplicat: apare și sus, și sub titlu, fără sens

Greșeli frecvente la pagination

• paginile 2+ cu noindex → pierzi produse la indexare
• canonical greșit (toate către pagina 1)
• URL-uri diferite care servesc aceeași listă (duplicate)