Većina savremenih veb stranica koristi JavaScript, čineći ih dinamičnim i interaktivnim. Iako su pretraživački botovi prilično napredni, oni ponekad ne mogu pravilno prikazati sav JavaScript sadržaj, što može negativno uticati na rangiranje stranice.
Način na koji se JavaScript sadržaj prikazuje na vašoj veb stranici direktno utiče na njegovu vidljivost za pretraživače.
Na primer, kod serverskog prikazivanja, server šalje kompletan HTML sadržaj veb stranice pregledaču na zahtev.
Međutim, kod klijentskog prikazivanja, JavaScript se izvršava u pretraživaču koristeći DOM.
Treća opcija je dinamičko prikazivanje, gde se sadržaj prikazan na klijentskoj strani isporučuje pretraživačima, dok se sadržaj sa serverske strane šalje korisničkim pregledačima.
Tehnike prikazivanja direktno utiču na to kako se JavaScript obrađuje, a time i na poziciju vaše stranice u rezultatima pretrage.
Da biste osigurali da se sav JavaScript kod vaše veb stranice pravilno prikazuje, neophodno je primenjivati ispravne SEO prakse specifične za JavaScript. Hajde da prvo definišemo šta tačno podrazumeva JavaScript SEO.
Šta je JavaScript SEO?
JavaScript SEO je proces optimizacije veb stranice kako bi pretraživači mogli lakše da prepoznaju, indeksiraju i rangiraju sadržaj generisan JavaScriptom (dinamički sadržaj). Google, kao i drugi pretraživači, obrađuje JavaScript u tri koraka: indeksiranje, prikazivanje i indeksiranje. Da bi Google uspešno izvršio ove korake, JavaScript sadržaj mora biti optimizovan, odnosno vidljiv i pristupačan.
Kako Google obrađuje JavaScript sadržaj?
Googlebot prati ove korake prilikom obrade JavaScripta:
- Preuzima URL adresu iz reda za indeksiranje putem HTTP zahteva.
- Proverava datoteku robots.txt da li postoje URL-ovi kojima je zabranjeno indeksiranje.
- Preskače „zabranjene“ URL-ove, analizira odgovor za druge URL-ove i dodaje ih u red za indeksiranje.
- Stavlja stranice u red za prikazivanje, izuzimajući one koje nisu namenjene za indeksiranje.
- Koristeći Chromium, prikazuje stranicu, izvršava JavaScript i indeksira stranicu.
- Ponovo analizira prikazani HTML kako bi pronašao veze.
- Dodaje nove URL-ove u red za indeksiranje.
Kada Google ne indeksira JavaScript sadržaj?
Google može uspešno indeksirati JavaScript ako je on pravilno implementiran. Na primer, ako su neke od vaših JS ili CSS datoteka blokirane, Google možda neće moći ispravno indeksirati veb stranicu. Takođe, ako postoje veze u izvornom HTML-u koje nisu prisutne u prikazanom HTML-u, Google može propustiti te veze tokom indeksiranja.
Pored toga, ako JavaScript nije ugrađen direktno u HTML, Google mora preuzeti zasebnu datoteku za njegovo izvršavanje. Takođe, pretraživači mogu koristiti keširanu verziju veb stranice (radi boljih performansi), što može dovesti do toga da JavaScript na stranici nije sinhronizovan sa kešom.
S obzirom na to da svaki segment JavaScript koda zahteva obradu, prekomerna upotreba JavaScripta može usporiti učitavanje stranice ili čak izazvati greške sa vremenskim ograničenjem.
Zašto je JavaScript SEO važan?
JavaScript SEO je od suštinskog značaja jer utiče na brojne elemente i faktore rangiranja koje Google i drugi pretraživači analiziraju prilikom optimizacije:
| Element na stranici | Potencijalni SEO problem | Moguće SEO rešenje |
| Prikazani sadržaj | Pretraživači ne mogu pravilno prikazati stranicu ako su njeni resursi blokirani u robots.txt datoteci. Takođe, Google ne može indeksirati blokirane ili skrivene JS i CSS datoteke. | Smanjite količinu JavaScripta u osnovnom sadržaju stranice. Razmotrite alternativne pristupe klijentskom prikazivanju, kao što su serversko prikazivanje, dinamičko prikazivanje i hibridno prikazivanje (kombinacija klijentske i serverske strane). |
| Veze | Ako su neke veze interne ili ih JavaScript generiše tek kada korisnik klikne na njih, Google možda neće moći da ih otkrije. | Koristite sidrene veze sa atributom href i deskriptivne tekstove sidra za veze. Pseudo-veze, poput div i span oznaka, se ne indeksiraju. |
| Metapodaci | Ako sajt ne koristi Node.js pakete kao što je vue-meta, pretraživači mogu indeksirati iste ili, još gore, nemaju metapodatke za svaki prikaz ili stranicu. | Koristite Node.js pakete kao što su react-helmet, vue-meta, react-meta-tags. |
| Lenjo učitane slike | Pretraživački botovi ne učitavaju sadržaj koji je označen za odloženo učitavanje. Pretraživač ne skroluje stranicu u potrazi za sadržajem, pa neki elementi možda nikada neće biti prikazani. | Koristite IntersectionObserver API, koji prati vidljivost i položaj DOM elemenata kada postanu dostupni. Možete koristiti i ugrađenu opciju lenjog učitavanja u pretraživaču (Chrome). |
| Vreme učitavanja stranice | Stranica sa puno JavaScripta može se sporije učitavati, što može negativno uticati na njeno rangiranje u pretragama. | Dodajte kritični JS kod inline i odložite učitavanje nekritičnog JS koda dok se glavni sadržaj ne prikaže, smanjujući ukupnu količinu JavaScript koda. |
Najbolje prakse za JavaScript SEO
Primenom sledećih najboljih praksi, možete pomoći pretraživačima da lakše indeksiraju i pravilno prikazuju vaše stranice:
Dodajte veze i slike prema definisanim veb standardima
Koristite „a href“ oznaku za sve veze umesto onclik, #pageurl ili window.location.href=’/page-url’. Google će lakše pratiti i indeksirati takve veze.
<a href="http://techblog.co.rs.com">Dobrodošli u svet geeka</a>
Na sličan način, slike treba dodavati pomoću „img src“ oznake, a ne „img data-src“:
<img src="myimg.png" />
Dajte prednost serverskom prikazivanju
Osigurajte da je sadržaj vaše veb stranice dostupan na serveru, a ne samo u korisničkom pregledaču.
Proverite da prikazani HTML sadrži sav važan sadržaj
Prikazani HTML mora sadržati tačan naslov, meta robots, meta opise, slike, strukturirane podatke i kanonske oznake.
Optimizujte svoju JavaScript veb lokaciju za pretraživače
Da biste testirali svoju JavaScript SEO implementaciju, možete slediti ove korake:
- Proverite koliko JavaScripta koristi vaša veb lokacija: Jednostavno onemogućite JavaScript u svom pregledaču. Ako vidite da se mnogo sadržaja ne prikazuje, to znači da vaša veb lokacija u velikoj meri zavisi od JavaScripta.
- Proverite da li Googlebot dobija sav važan sadržaj i oznake: Koristite Google alatku za testiranje mobilnih uređaja ili alatku za testiranje bogatih rezultata da biste videli kako Googlebot obrađuje izvorni HTML.
- Možete koristiti i Chrome ekstenzije, kao što je Pogledaj prikazani izvor, da biste uporedili izvorni HTML i prikazani, i razumeli kako JavaScript menja stranicu.
- Proverite važne oznake (naslov, meta opis, itd.) na prikazanom HTML-u pomoću SEO Pro Chrome ekstenzije.
Zaključak
U ovom tekstu smo saznali kako JavaScript može otežati SEO optimizaciju i razmatrali smo načine za rešavanje problema koje mogu prouzrokovati prekomerno korišćenje JavaScripta u vašem kodu.
Takođe smo predstavili neke najbolje prakse i alate koji će vam pomoći da optimizujete svoju JavaScript veb lokaciju za pretraživače. Dodatni alati koji mogu olakšati Googleu da prepozna i indeksira dinamički sadržaj su Prerender, AngularJS i Huckabuy.
Takođe, možete razmotriti najbolje načine za skraćivanje vremena učitavanja veb stranice.
Da li ste uživali u čitanju ovog članka? Podelite ga sa drugima!