Ako ste ikada pokušavali napraviti Google SEO za onepage stranice znate koliko to može biti problematično s obzirom na broj sekcija koje se na njoj nalaze ili broj linkova koji se nalaze. Kao i uvijek kod SEO ne postoji univerzalni recept na koji to napraviti jer Google svoje algoritme za pretraživanje mijenja na mjesečnoj bazi. Jedino što možete napraviti je relevantno postaviti linkove, nazive slika, naslove, ključne riječi i nadati se da će sve dobro proraditi. Kako se sada bavimo one page stranicama, ovaj dio sa linkovima i ključnim riječima je posebno problematičan s obzirom da sav sadržaj imamo na jednom mjestu. Kako bi Google pravilno indeksirao vašu stranicu on mora imati link na određeni sadržaj na vašem webu, a kako specifično zadati link na određeni sadržaj kad imate sve na jednom mjestu? Za to postoji nekoliko metoda. Jedna od popularnijih metoda je napraviti dodatne dokumente sa specifičnim nazivima i određenim sadržajem koji prosječnom korisniku neće biti vidljivi. Metoda broj dva je manipulacija linkovima javascriptom. Da, dobro ste pročitali javascriptom. Kada je došao HTML5 prije par godina donio je sa sobom jako veliki broj API-a koji omogućavaju različite manipulacije sadržajem i samim preglednikom. Jedan od tih API-a je histori API koji nam omogućava manipuliranje prošlosti pregledavanja u vašem pregedniku. Kako javascript uspješno može komunicirati sa preglednikom korisnika te se rapidno povećava broj javascript frameworkova tako je Google prilagodio svoje pretraživače da mogu detektirati i ovakve promjene. Što to znači? To znači da Vam neće trebati dodatni dokumenti samo radi SEO. Ono što će Vam biti potrebno je dobro napisana router skripta, komad javascript koda koji će detektirati kada dođete na novu sekciju. Kako to izgleda u praksi? Kako ste već na našoj stranici, pogledajte malo linkove u pregledniku kako mjenjate sekcije. S obzirom da smo objasnili općeniti dio i da je ovo blog post više namjenjen developerima mislim da se možemo prebaciti na geek talk. Ovdje u Aplitapu koristimo kombinaciju PHP i jQuery-a za izradu naših stranica, tako da ćemo se zadržati u okviru toga.

history.back() - okida klikanje back gumba u pregledniku

history.forward() - okida klikanje forward gumba u pregledniku

history.go(n) - šalje preglednik n koraka u naprijed ili nazad ovisno o predznaku broja

history.state - dohvaća trenutno stanje prošlosti pregledavanja

history.pushState(objekt, naslov, url)

Ovaj dio će nam jako koristiti u SEO optimizaciji. Kada dođemo u novu sekciju moramo detektirati da smo došli tamo(hoćete li detektirati klik na link, poziciju scrollbara, koristiti strelice na tipkovnici za navigaciju ili nešto treće to ostavljam vama na izbor).

Ali prvo objašnjenje parametara koje ta metoda prima:

Objekt - prima javascript objekt koji je relevantan za novo stanje u history-u. Možete staviti podatke koji vam trebaju za definiranje neke forme, personalizaciju web-a ili sto god hoćete.

Naslov - prima naslov stanja, simulira promjenu

taga bez promjene title taga Url - url link do postojeće sekcije

history.replaceState()-funkcionira jednako kao i pushState, samo što ne ubacuje ništa u history nego zamjenuje trenutno stanje. Sada kada smo objasnili kako radi history API napraviti ćemo kratki tutorial kako to upotrijebiti. Imamo manju web stranicu sa 3 sekcije. Na vrhu stranice ćemo postaviti menu sa 3 linka: Početna, O nama i Kontakt. Ovaj dio možemo postaviti na dva naćina, možemo u href od linka i postaviti #imesekcije i u funkciji parsirati taj link ili ćemo iskoristiti HTML5 mogućnost sa data atributima koje ćemo dodati na ili na link ili na container div od sekcije. Moj prijedlog je ići na data atribut jer će nam dobro doći u kombinaciji sa router skriptom. Krečem od pretpostavke da ste navigaciju unutar stranice već riješili tako da nju neću objašnjavati. Ono što ćemo napraviti je postaviti na početku vaše javascript skripte varijablu početnog url-a. Idući korak je detektiranje promjene sekcije, dakle klika na link ili pozicije scrollbara ili kako ste već rješili navigaciju. Na taj event promjene sekcije povući ćete data atribut u kojem se nalazi ime vaše sekcije u varijablu. Idući korak je napraviti history.pushState(objekt ako ga imate, varijabla sa nazivom sekcije, url varijabla + varijabla sa nazivom) i prvi korak je gotov. Osim što smo ovime promjenili url moj savjet je da na same sekcije postavite još par atributa sa keywordsima, opisom i ostalim stvarima koje stavljate u title i meta tagove te da title i meta tagove javascriptom mjenjate kada dođete na sekciju. Korak broj dva je napraviti router skriptu koja će vam omogućiti RESTful urlove i “loviti” kada netko dođe na vašu stranicu sa linkom vasa-stranica.domena/sekcija te povući ovaj dio sa sekcijom. Ovisno o sekciji koja je zatražena potrebno je na početku popuniti

dio stranice i na $(document).ready u javascriptu pozvati kretanje na stranici na željenu sekciju i to je u principu to. Uz ovaj dio naravno da morate paziti na ono što ćete stavljati u h1 tagove, kako nazivate slike koje će biti na vašoj stranici i što stavljate u meta tagove za određenu sekciju. To je to od mene za ovaj put, sretno u vašoj optimizaciji.

PRIMJER KODA