Kako sam napravio SelRanker.com - jednostavni SEO alati

SelRanker.com je jednostavna web stranica koju sam napravio s jasnim ciljem: ponuditi besplatne, praktične i lake alate koji pomažu pri osnovnoj SEO optimizaciji. U ovoj objavi dijelim cijeli proces – od ideje i tehnologije koju sam koristio, preko problema na koje sam naišao, do rješenja i planova za dalji razvoj.

Projekt je započeo kao osobni eksperiment da vidim koliko brzo i efikasno mogu napraviti set alata koji pokrivaju najčešće SEO potrebe – od generiranja meta tagova do provjere alt teksta za slike. Cilj nije bio napraviti komercijalni monster već funkcionalan, brz i jednostavan servis kojeg će moći koristiti svatko bez registracije.

Zašto SelRanker?

Mnogi SEO alati su ili skupi ili prekomplicirani za brze provjere. Htio sam nešto lagano – alat koji će korisniku brzo dati odgovor ili prijedlog, bez registracije i bez suvišnih distrakcija.

Glavni motivi su bili:

Dostupnost: alat koji je brz i besplatan, dostupan svim korisnicima bez potrebe za registracijom ili plaćanjem.
Jednostavnost: fokus na nekoliko najkorisnijih funkcija zamišljenih tako da ne bude potrebno učiti sučelje – korisnik dolazi, kopira URL ili tekst i dobije rezultat.
Performanse: brze odgovore s minimalnim opterećenjem servera kako bi čak i korisnici na sporijim vezama mogli iskoristiti alate.

Kao rezultat, SelRanker je više praktični toolbox nego sveobuhvatni SEO paket – služi za brze provjere i pomoć pri osnovnim optimizacijama.

Glavne potrebe koje sam želio pokriti

Projekt obuhvaća niz alata koji rješavaju konkretne, često ponavljajuće zadatke u SEO workflowu. Svaki alat je zamišljen kao single-purpose komponenta koja izvršava zadatak brzo i jasno.

SEO i Meta Tag generator: alat koji prema naslovu ili opisima stranice generira primjeren meta title i meta description optimizirane za duljinu i osnovne SEO smjernice. Ima opcije za targetiranje ključnih riječi i varijante tekstova za testiranje.
Alati za provjeru robots.txt: online viewer i validator koji učitava robots.txt, prikazuje pravila, i upozorava na potencijalne greške (npr. Disallow: / ili blockanje CSS/JS resursa). Također pokazuje sitemap lokacije i preporuke.
URL Slug generator: preuzima naslov ili string i generira SEO-friendly slug (latinični), eliminira dijakritiku, višestruke crtice i višak znakova.
Alt text auditor: analiza slika na stranici (prema listi URL-ova) i provjera nedostajućih ili generičkih alt atributa. Daje prijedloge kako napisati deskriptivan alt za accessibility i SEO.
Text Readability checker: mjeri čitljivost teksta (Flesch, broj riječi po rečenici, pasivnost) i daje preporuke za pojednostavljenje jezika.
FAQ generator: na osnovu zadanih ključnih riječi ili teme generira prijedlog najčešćih pitanja i odgovora koje možete dodati na stranicu kako biste poboljšali long-tail prisutnost.
HTML, CSS i JS minifier i beautifier: alati za brzo komprimiranje ili formatiranje koda – korisno za smanjenje veličine stranica i lakše održavanje.
SERP Snippet preview: prikaz kako će meta title i description izgledati u Google rezultatima, uključujući broj znakova i prijedloge za optimizaciju.

Svaki od ovih alata ima laganu verziju koja radi odmah u browseru i opciju da preuzmete rezultat ili kopirate kod.

Tehnologija i hosting

Stranica je statička HTML/CSS/JS – to znači brže učitavanje i manje održavanja. Hosting koji sam koristio je ScalaHosting, shared paket za početak, a nakon što stranica bude rasla planiram nadogradnju na VPS ili managed hosting.

Stack koji sam koristio:

Čisti HTML5 i CSS (ne koristi se kompleksan CMS)
Minimalni JavaScript za interaktivnost alata (vanilla JS)
SVG ikone za UI elemente
Hostana na shared hostingu (ScalaHosting) s planom migracije ako promet poraste

Prednosti statičkog pristupa:

Brzina: statičke stranice se serviraju brzo i koriste manje resursa.
Sigurnost: bez baze i server-side logike manje je mogućnosti za napade.
Jednostavno održavanje: lako editirati pojedine HTML datoteke.

Nedostaci i ograničenja:

Svaka nova blog objava zahtijeva ručno dodavanje nove HTML stranice ili korištenje skripti za generiranje – zato planiram uvesti generiranje sadržaja automatski.
Dinamičke funkcionalnosti (npr. korisnički dashboard) zahtijevale bi dodavanje server-side dijela ili prelazak na PHP/Node.

Dizajn i struktura

Stranica ima “hero” zaglavlje, jasne CTA gumbe za pokretanje alata i sekciju s karticama za svaki alat. Fokus je na čitljivosti i brzom pristupu funkcionalnosti.

Dublje o dizajnu

Footer i navigacija: footer sadrži linkove na Privacy Policy, Kontakt i FAQ. Glavni menu je jednostavan: Home, Alati, Blog, Kontakt.

Hero sekcija: velik naslov, kratak opis i primarni CTA (npr. “Počni besplatno”). U heroju je i brzi search input za unos URL-a ili teksta.

Kartice alata: prikazani u responsive gridu. Svaka kartica sadrži ikonu, naslov, 1-2 rečenice objašnjenja i gumb. Kartice su rasterećene i usmjerene na akciju.

Problem s PHP-om i zašto sam odustao privremeno

Pokušao sam stranicu prebaciti na PHP kako bi mogao uključivati zajednički header i footer (<?php include 'header.php'; ?>) i pojednostaviti održavanje. Međutim, naišao sam na grešku: nakon što preimenujem HTML fajl u .php, URL poput selranker.com/serp daje HTTP 500 ili javlja da stranica ne postoji – dok selranker.com/serp.php radi. Problem je vjerojatno vezan za server-side konfiguraciju (mod_rewrite, server settings ili direktorij index files).

Umjesto da gubim vrijeme na debugiranje hostinga, privremeno sam se vratio na čisti HTML. Plan je sljedeći:

Kontaktirati podršku ScalaHostinga i tražiti objašnjenje za 500 grešku i kako postaviti “pretty URLs”.
Implementirati jednostavni .htaccess sa mod_rewrite pravilima jednom kad budem siguran da host podržava prepisivanje.
Na duže staze, radije ću uvesti PHP include za header/footer jer to značajno pojednostavljuje održavanje (jedan file za header, jedan za footer).

UI/UX detalji i pristupačnost

Fokus na kontrastu, čitljivim fontovima i velikim klikabilnim elementima za mobile.
Semantički HTML (header, main, nav, footer) i ARIA atributi tamo gdje je potrebno.
Minimalne, suptilne animacije i jasne poruke o pogreškama.

Kako planiram riješiti problem s objavama (blog)

Trenutno na stranici ne postoji blog sekcija, a želim postaviti jednostavan sustav za objave koji neće narušiti performanse i sigurnost.

Opcije koje razmatram:

Flat-file CMS (Markdown + generator): pisanje postova u Markdownu i pokretanje kratke skripte koja generira HTML stranice. Prednost: brzina, verzioniranje kroz Git, jednostavno za backup.
Statički site generator (npr. Eleventy): omogućuje template-e, partials i build proces koji izlaz generira kao statične stranice.
Headless CMS (Netlify CMS/Forestry): uredničko sučelje koje objavljuje u repozitorij i generira statičke stranice – idealno ako želim da netko drugi lako objavljuje.
Lagan CMS na serveru (npr. Pico, Grav): datotečni CMS bez baze, ako želim imati editor direktno u admin panelu.

Plan implementacije:

Napraviti testnu verziju bloga koristeći Markdown + build skriptu (lokalno) i githook za deploy.
Ako urednički tim/korisnici trebaju jednostavno sučelje, povezati Netlify CMS ili Forestry.
Implementirati paginaciju, tagove i jednostavan search za postove.
Dodati schema.org FAQ/Article markup za bolje rich snippet rezultate.

SEO izazovi i rješenja

Jedan od problema koji sam susreo: alat koji skenira stranicu (SEMrushBot-Desktop) prijavio je HTTP 403 – tj. bJedan od problema koji sam susreo: alat koji skenira stranicu (SEMrushBot-Desktop) prijavio je HTTP 403 – tj. bot ne može pristupiti stranici. To može loše utjecati na indeksiranje i analitiku.

Što sam napravio konkretno:

Provjera server-side postavki: pregledao sam .htaccess, web application firewall (WAF) pravila i custom server rules koji mogu blokirati specifične user-agente ili IP raspona.
Testovi s različitim user-agentima: pokrenuo sam curl naredbe za simulaciju različitih botova i pregledao odgovore:

curl-I-A”SEMrushBot-Desktop” https://selranker.com/serp

curl-I-A”Googlebot” https://selranker.com/serp

Robots.txt provjera: osigurao sam da robots.txt ne blokira važne botove i da je sitemap naveden.
Analiza server logova: pregledao sam access logove da vidim koji user-agenti su blokirani i od kojih IP-a dolaze zahtjevi.

Rezultat:

Nakon ispravke .htaccess i firewall pravila stranica je dostupnija crawlerima i alati sada vraćaju status 200. To je povećalo pouzdanost analitike i omogućilo servisima poput SEMrush-a da pravilno indeksiraju alat.

AdSense i monetizacija

Cilj mi je povezanost sa AdSenseom. Stvari na koje sam obratio pažnju prije same prijave na AdSense su:

Što treba pripremiti (sadržaj i pravila)

Jasan i originalan sadržaj: stranica mora imati dovoljno originalnog teksta i korisnih informacija. Kopirani ili tanki sadržaj smanjuje šanse za odobrenje.
Obavezne stranice i dokumenti: napraviti i lako dostupne stranice “Privacy Policy“, “Kontakt” i “Terms of Service“. Ove stranice pokazuju da je sajt ozbiljan i da poštuje pravila privatnosti.
Kvaliteta sadržaja: dodati uporabne opise alata, FAQ i primjere – to povećava vjerodostojnost i smanjuje rizik od odbijanja. Bježati od tema koje već postoje na dosta stranica, i pokušati pisati neke orginalne teme i tekstove.

Tehničke provjere prije prijave

Provjera crawlabilnosti: osigurati da robots.txt i HTTP headeri ne blokiraju Googlebot ili AdSense provjere. U praksi: robots.txt ne smije imati Disallow: / za cijeli site i ne smije blokirati putanje koje AdSense koristi.
Server i sigurnost: testirao sam pristup pomoću različitih user-agenta (curl, online toolovi). Riješili smo problem s HTTP 403 koji je blokirao alate poput SEMrush-a – slične blokade bi mogle utjecati na AdSense provjere.
SSL/TLS: osigurati da sajt radi preko HTTPS-a i da certifikat ispravno radi (bez miješanog sadržaja).
Brzina i performanse: stranice trebaju brzo učitavanje (osobito homepage i stranica s alatima) – AdSense preferira dobro korisničko iskustvo.

Pravne i sigurnosne stvari

Autorska prava za slike/ikone: koristiti samo slike i SVG-e za koje imate licencu ili su u javnom domenu. To je posebno važno kod AdSense-a jer kršenje licence može dovesti do problema.
GDPR i lokalni zakoni: jer su korisnici iz EU regije, provjeriti da li je cookie banner i privacy policy u skladu s GDPR-om (jasno obavijestiti korisnike o kolačićima i oglasnim funkcijama).

Što smo već napravili – pregled mojih koraka na stranici SelRanker

Postavili smo osnovni Google tag (gtag) i osnovne meta tagove za stranicu u header sekciju.
Riješili smo problem s HTTP 403 koji je spriječavao crawlanje od strane alata (provjera .htaccess/firewall pravila i user-agent pravila).
Provjerili smo robots.txt i testirali pristup sa različitim user-agentima.
Optimizirali smo stranice za brzinu koristeći statički HTML/CSS pristup i SVG umjesto teških slika.
Pripremili smo jasne stranice kao što su kontakt i osnovni opis alata (treba dodatno dopuniti Privacy Policy i Terms ako još nisu kompletni).
Razmotrili smo pitanja licence za SVG ikone i preporučili provjeru izvora.
Napravili smo workflow za brže generiranje HTML fragmenata koristeći Excel/Google Sheets.

SVG ikone i autorska prava

Za ikonice sam koristio javno dostupne SVG-e. Prije korištenja uvijek provjerite licencu na stranici izvora – neke ikonice su potpuno besplatne za komercijalnu upotrebu (npr. CC0, MIT), dok druge zahtijevaju atribuciju ili imaju ograničenja. Ako planirate monetizaciju preko AdSensea, obavezno izbjegavajte korištenje materijala za koji ne možete jasno dokazati licencu.

Kako postupiti praktično:

Pronađi izvor i pročitaj licencu: uvijek otvoreno provjeri LICENSE datoteku ili odjeljak „License” na stranici s ikonama.
Ako je licenca permisivna (CC0, MIT, Apache) – obično je sigurno koristiti za komercijalne projekte bez atribucije. Ako je CC BY – moraš navesti autorstvo onako kako licenca traži.
Ako nema nikakve licence navedene, nemoj koristiti ikonu u produkciji – potraži alternativu sa jasnom licencom.
Dokumentiraj izvore: sačuvaj vezu i kopiju licence u projektu (npr. /licenses/icons/ ili licenses/README.md) – korisno ako ikada zatraže dokaz (AdSense, pravna provjera).

Tehnički savjeti za korištenje SVG-ova:

Inline SVG (stavljen direktno u HTML) omogućava stiliziranje putem CSS-a (fill="currentColor"), jednostavno animiranje i bolje accessibility rješenje (možeš dodati <title> i <desc>). Međutim, inline SVG povećava veličinu HTML-a ako ih imaš puno.
<img src="icon.svg"> je lakše keširati i smanjuje HTML, ali ograničava CSS kontrolu nad unutarnjim elementima SVG-a.
Koristi sprite ili simbol <use> za često korištene ikonice kako bi smanjio broj HTTP zahtjeva.
Minificiraj SVG (npr. SVGO) i ukloni nepotrebne atribute/ID-eve koji mogu uzrokovati konflikte.

Pristupačnost (a11y):

Ako je ikona dekorativna (ne prenosi značenje), koristi aria-hidden="true" i ne stavljaj title/alt.
Ako ikona prenosi informaciju (npr. ikona za preuzimanje), osiguraj opis: inline SVG s <title> ili <img alt="opis">.
Testiraj sa screen readerima i provjeri fokus za elemente koji su interaktivni.

Licenciranje i AdSense:

AdSense može provjeriti autorska prava i zahtijevati odstranjivanje neovlaštenog sadržaja. Zato je važno imati jasnu, dokumentiranu licencu za sve grafike.
Ako koristiš ikonice koje zahtijevaju atribuciju, jasno navedi attribution u footeru sajta ili u zasebnoj licencnoj sekciji – najbolje u vidljivom i lako dostupnom obliku.

Preporuke za profesionalniji pristup:

Za ozbiljnu monetizaciju razmisli o kupovini komercijalne ikona-biblioteke ili licenci koja jasno pokriva korištenje u oglasno-monetiziranim projektima.
Drži katalog izvora i licence na jednom mjestu u projektu – to štedi vrijeme i smanjuje rizik ako zatraže dokaz.

Najveće lekcije i savjeti

Počnite jednostavno. Minimalan stack često znači manje glavobolja, brže lansiranje i manji rizik od grešaka. Ako možeš, prvo napravi funkcionalni MVP (minimum viable product) sa nekoliko ključnih alata i poliraj ih prije dodavanja novih funkcija.

Testirajte pristup crawlerima rano. Provjeri robots.txt, .htaccess i HTTP zaglavlja čim postaviš stranicu. Alati koji skeniraju sajt (Googlebot, SEMrush, Ahrefs) često otkriju probleme koje obični korisnik ne vidi – a ti problemi mogu utjecati na vidljivost i monetizaciju.

Ako imate puno sadržaja, razmislite o CMS-u ili statičkom generatoru. Ručno upravljanje stotinama HTML fajlova brzo postane neodrživo. Flat-file CMS, statički site generator ili headless CMS mogu ubrzati workflow i olakšati suradnju.

Držite UI čistim. Korisnici dolaze radi brzih odgovora – ne zatrpavajte ih opcijama i oglasima. Jasna hijerarhija, velike CTA tipke i minimalna distrakcija povećavaju zadržavanje i konverziju.

Provjerite licence za svaki vanjski sadržaj. Sve što nije tvoje (ikonice, slike, fontovi) mora imati jasnu licencu. To nije samo pravna briga – neke platforme (AdSense, partneri) mogu odbiti ili ograničiti sajt zbog povreda autorskih prava.

Što dalje?

Evo konkretnih, prioritetnih koraka koje preporučujem da odradiš sljedeće:

Dodati sustav za lakše objavljivanje blog postova (Markdown + build skripta):
- Omogućava brzo pisanje i generiranje HTML stranica lokalno ili u CI/CD procesu.
- Verzije u Git repozitoriju olakšavaju rollback i kolaboraciju.
Poboljšati UX alata (brže odgovore, mobile optimizacija):
- Uvedi caching rezultata za često korištene upite.
- Optimiziraj UI za mobile: velike klikabilne površine, manje input polja i brzi loading indikatori.
Postepeno monetizirati kroz AdSense uz dobar UX:
- Počni s par nenametljivih pozicija oglasa (sidebar, ispod sadržaja) i prati metrike.
- Ne stavljaj oglase koji prekrivaju alat ili CTA, posebno na mobilnim uređajima.
Kreirati sidebar s korisnim linkovima i resursima:
- Sidebar može sadržavati popularne alate, FAQ, prijedloge za dalje čitanje i male CTA-e (npr. „Podrži projekt“).
Implementirati zajednički header i footer preko PHP include:
- To znatno olakšava održavanje (jedan edit u header.php mijenja sve stranice).
- Riješi server konfiguraciju (pretty URLs) ili koristi .htaccess s mod_rewrite kad hosting to podržava.
Napraviti checklistu za AdSense prijavu i testirati sve stavke:
- Privacy Policy, Kontakt, SSL, brzina, crawlabilnost, originalan sadržaj – sve provjeriti prije slanja zahtjeva.

Zaključak

SelRanker.com je dokaz da se korisni SEO alati mogu napraviti brzo i bez velikih troškova, ako se ideja jasno definira i održi fokus na osnovnim funkcijama. Projekt je praktičan, lagan za korištenje i skalabilan – uz nekoliko tehničkih poboljšanja (PHP include, blog generator, jasne licence za grafike) može postati još pouzdaniji i profitabilniji.