Angular 6 – SEO optimizacija

Aplikacije napravljene u Angularu u startu nisu SEO optimizirane što ne znači da to tako mora i ostati. Koristeći ng-toolkit Universal moguće je kroz nekoliko koraka omogućiti da Angular aplikacija postane SEO-Friendly.

Angular CLI

Prije svega, moram provjeriti koju verziju Angular CLI-a imam instaliranu. U ovom slučaju to je verzija 6.0.8

Angular CLI verzija: ng -v

Kreiranje Angular projekta

Novi projekt kreiram i pokrećem sljedećim naredbama

U web pregledniku mogu vidjeti kako projekt trenutno izgleda. Na početnoj se stranici nalazi nekoliko redova teksta.

Angular 6 - SEO optimizacija

Međutim, ako kliknem na desnu tipku miša i odaberem ‘View page source‘ mogu vidjeti sljedeće tj. niti jedan od ranije spomenutih redova teksta ovdje nije vidljiv, a trebao bi biti ako želim imati SEO optimizaciju.

Angular 6 - page source

Dodavanje nove komponente

Novu komponentu dodajem sljedećom naredbom

Nakon što je komponenta kreirana

Angular 6 - nova komponenta

trebam dodati i pripadajuću rutu kako bi se nova komponenta prikazala. To ću napraviti unutar datoteke app-routing.module.ts.

Na početnoj stranici app.component.html sada mogu navesti poveznicu prema novoj komponenti.

Sve to na kraju izgleda ovako

Angular 6 – SEO optimizacija

Međutim, koliko god ja sadržaja dodao tražilice ga neće vidjeti što znači da ga neće moći indeksirati što opet znači da moja Angular aplikacija neće biti SEO optimizirana.

SEO optimizacija

Angular CLI će i ovdje odraditi veliki dio posla umjesto mene.

Pokrećem sljedeću naredbu i nadam se da neće biti grešaka.

ng-toolkit/universal

Aplikaciju ću sada pokrenuti sljedećom naredbom

i odmah mogu vidjeti da je od sada moja Angular aplikacija SEO optimizirana.

Angular 6 – SEO optimizacija

Moguće je primijetiti da početna i nova stranica imaju jednak naslov

Za novu komponentu mogu napraviti poseban naslov na sljedeći način.

Angular 6 – SEO optimizacija

Angular 6 – SEO optimizacija

Zaključak

SEO optimizacija je daleko kompleksnije područje da bi se gore navedeni primjer mogao smatrati cjelovitim rješenjem, ali i ovo je dobar početak za svakog Angular developera.

Struktura projekta:

Uvod u SEO za Bing [Microsoft Virtual Academy]

Na Microsoft Virtual Academy moguće je pronaći sve više različitih online tečajeva tj. za svakoga po nešto. I nedavno sam tako primijetio ovaj vezan za SEO pa reko idem vidjeti što nudi. Opravdao je moja očekivanja jer i nisam očekivao saznati ništa posebno novo ili drugačije pošto je ipak ovo tečaj za početnike, a kojima ga svakako mogu preporučiti. I neovisno o tome što je riječ o Bingu, većinu sadržaja ovog tečaja možete primijeniti kako na Google tako i na ostale tražilice. Stara narodna poslovica kaže ”Reci mi za koliko tražilica znaš reći ću ti tko si”.

Uvod u SEO za Bing [Microsoft Virtual Academy]

Tečaj je podijeljen u 5 modula od kojih svaki sadržava video predavanje i Power Point prezentaciju te kratki test od 5 pitanja za provjeru znanja. Naravno, ako već imate nekog SEO iskustva možete se odmah baciti na rješavanje svih testova i na taj način skratiti vrijeme konzumacije tečaja na minimum.

1. modul: Uvod u SEO

Uvod u SEO
Prvi modul, uz to što će vam dati više detalja o samom SEOu ponudit će i neke informacije o Bing/Yahoo tražilici te vas upoznati s usko vezanim pojmovima kao što su: Bingbot, MSNbot, Adidxbot i BingPreview. Uz to će prikazati načine kako Bing gleda na SEO optimizaciju uz više od 1000 faktora koji na nju utječu. Pojmovi kao što su SERP, crawler, ranking, index i dr. nešto su što ćete od prve shvatiti iako možda do sada niste niti čuli za te pojmove.
Također, kratko je predstavljena i platforma Bing Ads kao direktan konkurent Googleovom AdWordsu koji trenutno pokriva Bing i Yahoo tražilice te partnerske stranice kao što su Facebook, WebMD, Amazon, CNBC, Monster i Viacom.

2. modul: Istraživanje i važnost ključnih riječi

Uvod u SEO: Istraživanje i važnost ključnih riječi
Ključne riječi su već toliko prožvakana tema da to postaje bolno za čitati, ali od nekakvih početaka se mora krenuti pa tako i u ovom modulu sva pažnja ide prema ključnim riječima. Pojašnjava se terminologija (head keywords, mid-tail keywords, long-tail keywords), osnove istraživanja ključnih riječi koristeći Bing Keyword Tool kao i najbolje prakse i savjeti. Prilikom istraživanja ključnih riječi od velike vam koristi može biti Microsoft Excel tj. Bing Ads Intelligence plugin.

3. modul: On-page optimizacija

Uvod u SEO: On-page optimizacija
Ovaj se modul tiče planiranja sadržaja web stranica i kako ga optimizirati za najbolje rezultate. Glavni savjet ovog dijela tečaja je da umjesto korištenja zastarjelih SEO tehnika kao što je nabacivanje ključnih riječi (keyword stuffing) pišete zanimljiv i koristan sadržaj. Nakon toga fokus skreće na on-page elemente poput title taga, H1-H6 elemenata, ALT teksta i ostalog što je potrebno da bi se zadovoljile neke osnove SEO optimizacije. Osnovna razlika između on-page i 0ff-page optimizacije je što u prvom slučaju imate punu kontrolu dok u drugom nemate. Da biste dobro savladali on-page optimizaciju morate poznavati HTML.

4. modul: Pregled tehničkih SEO pitanja i alata

Uvod u SEO: Pregled tehničkih SEO pitanja i alata
U ovom modulu počinje prava zabava i konkretni primjeri kako pravilno koristiti sve što ste naučili kroz prijašnje module te kako riješiti potencijalne probleme pri čemu vam od posebne koristi može biti Bing Webmaster’s Tools. Prije svega toga pojašnjava se teorija i logika koja stoji iza arhitekture web stranica, planiranja iste i međusobnog linkanja.
Prije planiranja i pisanja kvalitetnog sadržaja potrebno je zadovoljiti tehničke kriterije, kao što su dobra arhitektura stranice, čisti kod, responzivan dizajn, pravilno postavljen robots.txt i dr., koji će omogućiti da sadržaj na pravi način bude prezentiran korisnicima.
Kada je stranica napravljena i postavljena na web potrebno ju je provući kroz Bing Webmaster’s Tools u kojemu je moguće napraviti željenu konfiguraciju, pregledavati izvještaje o stranici i raditi dijagnozu stranice te u slučaju problema iskoristiti neke od ondje ponuđenih alata za rješavanje tih problema.