27. 03. 2013

Ako robiť moderné stránkovanieAj keď ide o relatívne "starú" informáciu, vzhľadom na to, že v praxi som sa s ňou stretol veľmi zriedka, je vhodné ju spomenúť.

Je známe, že stránkovanie stránok, napríklad pri zobrazovaní výrobkov v eshopoch, článkov v rámci nejakej kategórie alebo vlákien v diskusnom fóre, má pre Google indexovanie určité nevýhody. Jednou z nich je pravdepodobnosť, že Google ďalšie kroky nezaindexuje, resp. nezaindexuje obsahy na "vzdialených" stránkach. Ďalšou nevýhodou môže byť vznik duplicitného obsahu, kde prechody medzi krokmi stránok sa generujú cez tzv. kotvu (obsah za znakom # v URL). Google totiž text za kotvou ignoruje.

Existuje niekoľko riešení, ako obsahy "zviditeľniť", napr. odkrývaním a zakrývaním obsahov prostredníctvom Javascriptu, avšak pre dlhšie zoznamy stránok má to nevýhody - pri renderovaní stránky sa musí načítať celý zoznam, čo môže trvať dlhší čas.
Duplicite môžeme zabrániť definovaním kanonického linku (meta tag canonical), avšak tým neošetríme indexovanie "vzdialených" krokov.

Pre komplexné riešenie stránkovania Google odporúča používať linkové elementy rel="prev" a rel="next", ktoré indikujú, že práve zobrazená stránka má predchádzajúcu, resp. nasledujúcu stránku. Inak povedané, tieto elementy vytvárajú sekvenciu stránok, vďaka čomu ich vie Google prirodzene indexovať.

Implementácia je nasledujúca:

- Predstavme si, že na URL http://www.example.com/kategoria?page=1 máme zobrazený prvý krok stránkovania, pričom existujú kroky na druhú a tretiu stránku. Pri zobrazení prvého kroku pridáme do <head> sekcie link <link rel="next" href="http://www.example.com/kategoria?page=2" /> , čím definujeme, že k práve zobrazenej stránke je naviazaná nasledujúca stránka.

- Predstavme si, že na URL http://www.example.com/kategoria?page=2 máme zobrazený druhý krok stránkovania, pričom existujú kroky na prvú a tretiu stránku. Pri zobrazení druhého kroku pridáme do <head> sekcie link <link rel="prev" href="http://www.example.com/kategoria?page=1" /> a <link rel="next" href="http://www.example.com/kategoria?page=3" /> , čím definujeme, že k práve zobrazenej stránke je naviazaná predchadzajúca a nasledujúca stránka.

- Predstavme si, že na URL http://www.example.com/kategoria?page=3 máme zobrazený tretí krok stránkovania, pričom existujú kroky na prvú a druhú stránku. Pri zobrazení tretieho kroku pridáme do <head> sekcie link <link rel="prev" href="http://www.example.com/kategoria?page=2" /> , čím definujeme, že k práve zobrazenej stránke je naviazaná predchádzajúca stránka.

V rámci implementácie je možné použiť aj kanonický link, napr.:
<link rel="canonical" href="http://www.example.com/kategoria?page=2" />
<link rel="prev" href="http://www.example.com/kategoria?page=1&id=xxx" />
<link rel="next" href="http://www.example.com/kategoria?page=3&id=xxx" />

Sumarizácia:

- pri prvom kroku sa používa len atribút rel="next"

- pri kroku, ktorý má predchádzajúci a nasledujúci krok, sa používajú atribúty rel="prev" a rel="next"

- pri poslednom kroku sa používa len atribút rel="prev"

- URL v elementoch môžu byť relatívne alebo absolútne

- elementy sa definujú len v sekcii <head>

- namiesto atribútu rel="prev" je možné použiť ekvivalent rel="previous"

- elementy nevytvárajú samotné presmerovania, ale slúžia len ako hinty pre Google